Hiding Elements With CSS

Being able to hide and show elements on a page is an integral part of responsive design. Depending on what you want to achieve, there are many different ways to hide an element using CSS. In this article, I explore the properties we can use to do this, and the pros and cons of each.

The Properties #

Display #

As I have mentioned before, every element in an HTML document is a rectangular box. Hiding an element with the display property means that this rectangular box is not generated at all.

Although the element is still within the markup, (which you can see if you use inspect element), for all intents and purposes, it doesn't exist on the page. No part of the box model - the content area, padding area, border area or margin area - is generated or appears on the page.

Any content within the element, or its children, is functionally non-existent. If it is an actionable element, for example a button or a, it cannot be acted upon. The element and any content within it is also ignored by screen readers.

.foo {
  display: none;
}

Visibility #

With the visibility property, the "rectangular box" is still generated, but not rendered on the screen. Because the box is generated, the four areas that make up the box model still affect the layout of the rest of the page. However, the four areas are not visible on the screen.

Apart from the fact that the box model is generated, using the visibility property to hide an element is similar to the display property. The element cannot be acted upon and is not read by screen readers.

.foo {
  visibility: hidden;
}

Opacity #

The opacity property only deals with how an element appears visually; more specifically, its transparency.

When an element's opacity is set to the absolute lowest, although it becomes hidden visually on the screen, it is functionally no different to if the element were set to any solid colour. The element still takes up as much space as it usually would, is still read by screen readers, and can still be interacted with.

.foo {
  opacity: 0;
}

Position #

The position property isn't typically meant for hiding and showing elements on the page. The use of this property for this purpose came out of a need to be able to have an element be visually hidden on a page and not affect the layout, but still be readable by screen readers and actionable if needed.

There are two ways in which the position property cn be combined with other properites to achieve this.

Combined with the top and left properties, the element is moved out of the viewport and therefore out of eyesight.

.foo {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Alternatively, Jeff Burnz pioneered the idea of using the clip property to resize the rectangular box to an insignificant size, making it functionally hidden.

.foo {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* syntax for IE6 & IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

With both methods, the result is the same -

Although these solutions are a bit of a hacky way to deal with the problem, they are currently the best way to remove an element visually from the screen, while maintaining its function.

Summary #

&nsp;	display	visibility	opacity	position
Is the box model generated?	✗	✓	✓	✓
Does the box affect the document layout?	✗	✓	✓	✗
Is the box visible on screen?	✗	✗	✗	✗
Will the element’s content be read by screen readers?	✗	✗	✓	✓
Is the element actionable (clickable, focusable)?	✗	✗	✓	✓