Element Hiding Techniques in CSS

Hiding HTML elements from CSS is not a big deal; we do it instinctively until we learn accessibility and find a fundamental difference.

This difference is to hide an element and its content entirely or hide an element but show its content to the screen readers. We know that hiding something is not just cosmetic, but for a lot of us, it is accessibility. We can create things which goal is to be invisible to the eye but visible for the readers.

Of course, there are other areas where we want to know the differences between the hiding techniques, for example in the case of animation. Animating the display property is not possible, so we should use the opacity, but doing this the hidden content stay actionable – if there clickable element, we can interact, or we can’t click through it – so we want to find a solution which usually is the visibility property.

These are some examples from the life of the everyday front-end developer, and I think – as usual – that this is interesting. I infrequently think about how many times I’m hiding elements just from CSS and being honest I rarely use them consciously. I just learned in the years what to use in which situation. I’m sure that every intermediate CSS dev will do and think similarly.

Need a WordPress website? Or you prefer the more performant headless and static solutions? We can help!

Generally, there is three property which purpose – in some way – is hiding an element: the display, the visibility, and the opacity. You can hide in another way too, but for that, you need more than one property. We talk about the other techniques in the last section! Let’s start the explore!

Hide Elements with The Display Property

Setting the display property to none value will cause the true hidden state in your document. Your content will be still present in your HTML, but the box-model isn’t generated, your elements don’t reserve any space. You also can’t interact with the components. You can select the elements through JavaScript but can’t get its width or height.

If you use display: none; all of the descendant elements will be invisible too, and you can’t switch them back declare them as block – or any “visible” value – display. You can’t animate these parts in any way (with CSS). The content will be invisible for screen readers too.

See the Pen Hide Elements with CSS – display: none; by Adam Laki (@adamlaki) on CodePen.

As you see in the example – by clicking the toggle button – when the element is hidden it disappears from the flow.

Hiding Elements with The Visibility Property

The visibility: hidden; declaration is between the display and the opacity property. Using the visibility property the element has the box-model, so it takes its place in the layout, but we can’t interact with the component from the user side.

The elements hidden with this property will be invisible for the screen readers but remain animated.

For me, this method is useful when I’m designing a drop-down – in this case, a basic one – menu. In case of a dropdown, we use absolute positioning, so the box-model is not a problem because we get the item out from the document flow. Combining with opacity, we can animate it and also disable the interaction when the dropdown is invisible.

See the Pen Hide Elements with CSS – visibility: hidden; by Adam Laki (@adamlaki) on CodePen.

If you toggle the visibility, you can open the dropdown when you navigate to the position where it will appear; this is because only with opacity the element is actionable but after set visibility: hidden; it disappears.

Hiding Elements with Opacity

Using the opacity property, we can hide our elements just visually; this means it has its box-model and remains actionable. This property can get a value between 0 and 1, defining it we set an element’s and its children’s transparency.

Because it is just visually hiding the content will be accessible for screen readers, and we can animate it too.

By alone this can be useful when we design some article/blog card where the content is revealed on hover – and it is not a problem that it is actionable because we show it on hover event – as you see in the next example:

See the Pen Hide Elements with CSS – opacity: 0; by Adam Laki (@adamlaki) on CodePen.

If you inspect this pen, you can see that the .sh-effect–delta__overlay have had a zero transparency.

Hiding Elements but Show Them to The Screen Readers

As I said earlier the hiding is starting to be interesting when you want to hide something but show it to the screen readers. For the accessible design, this is more than necessary. As you know now you can’t do it with the previous – one-line solutions – we need other solution which is hacks.

Hiding Elements with Position

Hiding elements using the position property is simple, we set a high negative top and/or left value. With this method, the element’s content is still accessible with a screen reader, but it is “removed” from the content flow.

For example check out the classic .screen-reader-text code:

.screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Hiding Elements with Clip-path

Using clip-path we can achieve a more modern solution for the previous a11y hiding problem. With this property, we can set zero with and height mask to our element so it will be hidden. It is supported in all modern browsers except IE and Edge, but we can declare fallbacks.

.screen-reader-text {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
}

+1 Hiding with Max Height and Hidden Overflow

Hiding with max-height property is a specific use case, but it is still functional. If you want to build accordion navigation which is animated you can use max-height: 0; and overflow: hidden;.

In CSS we can’t animate elements using height – like from zero to auto – but we can animate max-height: 0; to max-height: 1000px;. In some cases, this is not the best solution because it is using fix values.

See the Pen Hide Elements with CSS – max-height: 0; by Adam Laki (@adamlaki) on CodePen.

As you see the content will be hidden just by height and overflow. These content will be visible for the screen readers too.

+2 More Solution(s)

• Nicolas Hoffmann showed another hiding solution how you could make something non-visible for screen readers but still animate it. Check out the van11y project for a working example.