October 04, 2019

There are a handful of ways to hide things using CSS, and each of them has its own strengths and potential drawbacks. Here’s a list of the 5 most common ways to hide content, and a use case or two for each.

Display

display: none; or HTML hidden attribute

Removes element from visual flow, hiding it from both visual and AT (Assistive Technology) consumption

Does not transition

Use Case

Toggled, closed, or otherwise hidden elements that may be shown again.

Breakpoint-dependent elements like mobile & desktop menus

Opacity

Opposite of transparency, opacity: 1; is fully opaque, opacity: 0; is fully transparent.

Does not affect the element’s position in the DOM flow, but a common gotcha here is an opacity value other than 1 puts the element in a new stacking context.

value other than puts the element in a new stacking context. opacity applies to the whole element and any descendants, but is not inherited by the element’s children.

Use Case

Temporarily hide elements, typically to fade in after a timeout or on a callback

Pair with another method to create a smooth transition of content in/out of the visual flow

Visibility

visibility: hidden;

Visually hidden, but still occupies the same space in the visual flow.

Unlike the display property, visibility is animatable. Pairs nicely with a short opacity transition when animating an element in.

Use Case

Hide an element without disrupting the visual flow.

Pair with DOM manipulation, like position: absolute; or overflow: hidden; height: 0; to enable transitions where display: none; would fall short.

ARIA

aria-hidden='true'

Hides from screen readers, but not visually.

Use Case

Visual-only elements that already have descriptive text

Redundant elements (all but one of mobile/tablet/desktop menus)

Clipping

Hides visually, but not to AT. A11y guidelines on this are an excellent description.

Use Case

Visually redundant elements already described in the DOM

Input labels made redundant by a visual overhaul using pseudo-elements

Things to Remember