CSS - Visibility

The visibility Property

The visibility property in CSS controls if an element is visible or hidden. It allows you to hide elements without removing them from the document flow. The syntax for using the visibility property is:

selector {
  visibility: value;
}

The visibility property can take one of three values: visible, hidden, or collapse.

.element {
  visibility: visible;
}

.element {
  visibility: hidden;
}

table tr {
  visibility: collapse;
}

Inheritance and Overriding

The visibility property in CSS is inherited by child elements from their parent elements. This means that if you set the visibility of a parent element to hidden, all its child elements will also be hidden, unless you explicitly override the visibility value for the child elements.

.parent {
  visibility: hidden;
}

.child {
  /* Inherits visibility: hidden from parent */
}

The child element inherits the visibility: hidden from its parent, so it will also be hidden.

To override the inherited visibility value for a child element, you can set a different visibility value specifically for that child element.

.parent {
  visibility: hidden;
}

.child {
  visibility: visible;
}

Even though the parent element has visibility: hidden, the child element will be visible because it has its own visibility property set to visible, which overrides the inherited value.

This inheritance and overriding behavior allows you to control the visibility of elements at different levels of the DOM hierarchy. You can hide entire sections of your web page by setting the visibility of a parent element to hidden, and then selectively make certain child elements visible by overriding their visibility property.

It's important to remember that even though an element with visibility: hidden is not visible, it still occupies space in the layout. If you want to completely remove an element and its space from document flow, use display: none.

Combining visibility with Other Properties

The visibility property can be combined with other CSS properties to create visual effects and transitions. Two common combinations are using visibility with opacity for fading effects and combining visibility with transition.

Using visibility with opacity allows you to create fading effects. The opacity property controls the transparency of an element, with a value of 1 being fully opaque and 0 being fully transparent. By combining these properties, you can make an element fade in or out.

.element {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

.element:hover {
  visibility: visible;
  opacity: 1;
}

The element starts as invisible and transparent (visibility: hidden; opacity: 0). The transition duration is set to half a second for both properties. When hovered over, the element becomes visible immediately while the opacity changes over half a second.

Combining visibility with transition allows you to create smooth transitions between visible and hidden states.

.element {
    visibility: hidden;
    opacity: 0;
    transition: visibility .3s linear .3s, opacity .3s linear ;
}

.element:hover {
    visibility :visible ;
    opacity :1 ;
}

Similar to the previous example, the element starts as invisible and transparent (visibility:hidden;opacity :0). The transition duration is set to three-tenths of a second for both properties. When hovered over, the element becomes visible immediately while the opacity changes over three-tenths of a second.

By combining these properties, you can control how elements appear or disappear, making your user interface more engaging.

Accessibility Considerations

When using the visibility property in CSS, consider accessibility for users who rely on assistive technologies like screen readers. The way you hide elements can impact how accessible your website is.

Screen readers treat elements with visibility: hidden differently than elements with display: none. When an element has visibility: hidden, it is still read by screen readers, even though it is not visible on the page. This can lead to confusion for users who rely on screen readers, as they may hear content that is not visually present.

<p>This text is visible.</p>
<p style="visibility: hidden;">This text is hidden but still read by screen readers.</p>

A screen reader would read both paragraphs, including the one with visibility: hidden, which may not be the intended behavior.

If you want to hide content from both sighted users and screen reader users, use display: none instead of visibility: hidden. Elements with display: none are completely removed from the document flow and are not read by screen readers.

<p>This text is visible.</p>
<p style="display: none;">This text is hidden and not read by screen readers.</p>

The screen reader would only read the first paragraph, as the second one is completely removed with display: none.

When hiding elements that contain important information or interactivity, provide alternative text or labels to keep your content accessible. You can use techniques like the aria-label attribute or visually hidden text to provide context for screen reader users.

<button style="visibility: hidden;" aria-label="Close">
  <img src="close-icon.png" alt="Close icon">
</button>

Even though the button is visually hidden, the screen reader would read the alternative text provided by the aria-label attribute, making clear what purpose the button serves.