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.
• 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

• All content hidden with CSS will become visible if styles are disabled.
• Be careful not to hide the full functionality of your site from screen reader and/or keyboard-only users.