4 Techniques to Hide Elements in CSS: A Guide for Web Developers

Hiding an element in CSS can be achieved in various ways, depending on the desired effect and the element’s context. In this blog post, we’ll explore some of the most common techniques for hiding elements in CSS.

display: none;

The simplest way to hide an element in CSS is by using the “display: none” property. This property removes the element from the layout entirely, making it invisible and taking up no space on the page. It’s important to note that elements hidden with “display: none” will not be read by screen readers, and their content will not be accessible to users.

// Example css

.element {
  display: none;
}

visibility: hidden;

Another way to hide an element is by using the “visibility: hidden” property. This property makes the element invisible, but it still takes up space on the page. This means that other elements will not move to fill the empty space left by the hidden element. Unlike “display: none,” elements are hidden with “visibility: hidden” is still accessible to users and will be read by screen readers.

// Example css

.element {
    visibility: hidden;
}

opacity: 0;

The “opacity: 0” property makes the element completely transparent, but it still takes up space on the page. This is useful when you want to animate the element’s appearance or disappearance using CSS transitions or animations.

// Example scss

.element {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;

    &:hover {
        opacity: 1;
    }
}

position: absolute; left: -9999px;

This technique is often used to hide elements for accessibility purposes while still making the content available to screen readers. By setting the position of the element to “absolute” and moving it outside the view-port using “left: -9999px,” the element is effectively hidden from sight but can still be accessed by screen readers.

// Example css

.element {
   position: absolute;
   left: -9999px;
}

In conclusion, there are various ways to hide an element in CSS, each with its own pros and cons. When deciding which technique to use, consider the element’s context and the desired effect, as well as any accessibility concerns.

I hope this helps! Let me know if you have any further questions.

Credits: Thememakker Infotech LLP