CSS visibility: Hiding Elements Without Affecting Layout

The visibility property in CSS allows us to hide elements from view without removing them from the document flow. This makes it a particularly useful property when you're creating effects where space needs to be preserved.

What Is visibility?

The visibility property determines whether an element is visible or hidden. Unlike display: none, visibility hides the element but still maintains its layout and space in the document. Unlike when using opacity, when an element is hidden using visibility it is removed from the accessibility tree; it does not accept focus nor respond to user events.

Syntax:

visibility: visible | hidden | collapse;

• visible is the default value; the element is displayed.
• hidden hides the element but preserves its space in the layout.
• collapse removes the element from view and collapses its space but behaves differently depending on the element type:
  • For table rows, columns, and groups, the space is removed (like display: none), but the sizes of other rows and columns are calculated as if the collapsed cells still exist.
  • For flex items and ruby annotations, the space is removed entirely.
  • For other elements, collapse behaves the same as hidden.

Differences Between visibility and opacity

Whilst both visibility and opacity can make elements visually hidden, they behave differently:

For example:

.hidden-box {  /* This element is hidden, the user cannot interact with it. */  visibility: hidden;}.transparent-box {  /*    This element is hidden because it's has no opacity.    The user can still interact with it.  */  opacity: 0;}

Wrapping up

The visibility property is a great tool for hiding elements whilst maintaining layout consistency. It is particularly useful for UI interactions where the element might reappear dynamically, and you want to avoid everything beneath it in the document flow from shunting as it does so.

If you need more nuanced control over transparency, then the opacity property is probably a more suitable candidate.

Key Takeaways

• visibility hides elements without removing them from the layout.
• Hidden elements do not accept focus or respond to user interactions.
• Use hidden to make an element invisible, whilst visible restores it.
• Compare with opacity for scenarios where partial transparency is needed.

Both visibility and opacity are foundational tools for controlling the visual presentation of elements. Understanding their differences can help us develop interactive and engaging interfaces for our projects. This isn't an either/or type of scenario either ‑ there are plenty of occasions where I've found use for them both in tandem ‑ especially when animating full‑screen overlays.