visibility

Overview

The visibility property determines an element's appearance on the page by setting it to visible, hidden, or collapsed. Unlike the display: none property, which entirely removes an element from the layout, visibility hides an element while preserving its space in the layout, influencing the position of other elements accordingly.

Examples and Usage

The following example demonstrates the use of the property with visible and hidden values.

<h3 class="visible-heading"> I am a visible heading. </h3>

<h3 class="hidden-heading"> I am a hidden heading, but I still take up space in the layout. </h3>

<span> Upon selecting these elements in a test environment, you'll notice the second heading is still present and occupies space on the page. </span>

.visible-heading {
  visibility: visible; /* Default behavior: the element is visible */
}

.hidden-heading {
  visibility: hidden; /* The element is invisible but still takes up space in the layout */
}

In addition, there's also the collapse value which only affects table elements or elements styled as such with the display property. It hides the table sub-element without leaving the space it occupied, unlike the hidden value. However, the collapse value isn't consistently supported across browsers and may lead to various quirks. Thus, it is recommended to exercise caution or steer away from it entirely.

Values

The visibility property accepts the following values:

Associated Properties

There are no direct associated properties to visibility, but it's often compared and contrasted with the display property, which also controls the visibility of elements but affects the layout differently.

Tips and Tricks

• Use the visibility property when you need to hide an element without affecting the layout or position of surrounding elements.

• If you need to completely remove an element from the layout, consider using the display: none property instead.

• Remember that the collapse value only affects table elements.

• The hidden value allows you to visually hide an element while it still occupies space on the page, which is different from display: none. This property doesn't inherit by default, meaning that you can make an element hidden while keeping its children visible.

• Be aware that using the visibility: hidden value on an element will remove it from the accessibility tree, causing it and its descendants to no longer be announced by screen reading technology.

Browser Compatibility

Caution: Internet Explorer doesn't support visibility: initial, visibility: unset, and in versions up to IE7, hidden elements' descendants remain invisible even when their visibility is set to visible.

Useful Resources

Can I use - Visibility Property (for specifics on browser compatibility)

W3C CSS Display Module: visibility

CSS Flexbox Module Level 1: visibility-collapse (visibility: collapse; is also used in Flexbox and better defined in that context)