Creative Ways to Hide Elements with CSS

As a web developer you may be asked this during an interview, and it is important to know other ways to hide elements on a page besides the obvious of the display: none property. It’s also important to know the difference between different properties in CSS. Today, I would like to explore the differences between the different properties of hiding elements on a page.

Display

.foo-bar {
    display: none;
}

Let’s imagine that we have six boxes on the page, and we have a click event listener to hide the element on click. Once we click that element it will be hidden but the space between it will disappear like the following picture below. This is what the display:none property does it renders the element as if it doesn’t exist on the page. Although you can still see the element when you use inspect element on the page. Lastly, just be aware that if this is a button or a link that this element can’t be read by a screen reader.

Display Property MetricResult
Is the hidden content read by a screen reader?
Will the hidden element affect the document layout?
Will the hidden element’s box model be rendered?
Does the element detect clicks or focus?

Visibility

.foo-bar {
    visibility: hidden;
}

Alternatively, the with the visibility: hidden property the space will still be there after you click on the box. Like the display: none property it will still affect the rest of the layout on the page. In addition, it cannot be read by a screen reader on actionable elements.

Visibility Property MetricResult
Is the hidden content read by a screen reader?
Will the hidden element affect the document layout?
Will the hidden element’s box model be rendered?
Does the element detect clicks or focus?

Opacity

.foo-bar {
    opacity: 0;
}

The opacity property deals with how transparent an element looks on a page. Opacity can have a value between 0-1 as zero is completely hidden on a page. Anything in between 0-1 the element will look transparent. When set to zero the element still takes up the space on the page. It’s like having a white background and setting the element to white. In addition, it can still be seen by screen readers and still be interacted with.

Opacity Property MetricResult
Is the hidden content read by a screen reader?
Will the hidden element affect the document layout?
Will the hidden element’s box model be rendered?
Does the element detect clicks or focus?

Position

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

You can also use the position property to hide elements on a page. By setting the position to absolute you are saying that the DOM doesn’t reserve any space for the current element. You can see this by clicking the “toggle make absolute button“. The text goes underneath the square because the space is no longer reserved by the DOM. Now if you click “Toggle Hide with Top and Left -9999px Button” with the Position Absolute toggled on you can see that it pushes the element so far off the screen that it visually doesn’t exist.

Position Property MetricResult
Is the hidden content read by a screen reader?
Will the hidden element affect the document layout?
Will the hidden element’s box model be rendered?
Does the element detect clicks or focus?

Create a Visually Hidden Class

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
 
  height: 1px;
 
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

This is one of the most accessibly friendly ways to hide a CSS element on a page. With the position property coming in second with a downside. The main downside of the position property is that if you click a button that refocuses the page, it can cause page jumps. Furthermore, that’s why the Visually Hidden Method is better since it doesn’t cause those pages jump. With this visually hidden class you use the clip-path property and hidden overflow property. However, this was originally discussed on Scott O’ Harras blog back in 2017.

Position Property MetricResult
Is the hidden content read by a screen reader?
Will the hidden element affect the document layout?
Will the hidden element’s box model be rendered?
Does the element detect clicks or focus?

Other Methods Worth Mentioning

Additionally, there are even more methods to hide elements on a page. For example, using margin, padding, or the text-index property to -9999px. This is like the position method above. Although, I wouldn’t really recommend using these for hiding elements on a page. These methods just don’t work with right to left writing modes. Also, another method in addition to these is the transform method which works similarly to the opacity method (visually only though).

.hidden {
  text-indent: -9999em;
}
.hidden-2 {
  margin: -9999em;
}
.hidden-3 {
  padding: -9999em;
}
.hidden-4 {
  transform: scale(0);
}

Overview

MetricDisplayVisibilityOpacityPositionAccessible Way
Is the hidden content read by a screen reader?
Will the hidden element affect the document layout?
Will the hidden element’s box model be rendered?
Does the element detect clicks or focus?
Leave a Reply
Previous Post
virtual box

Intro to Virtual Machines (Virtual Box) and Linux, Part 1

Next Post

Intro to Git and Version Control

Related Posts
Skip to content
Share via
Copy link
Powered by Social Snap
Close Bitnami banner
Bitnami