Mastering CSS Visibility and Display Properties: A Developer's Guide

Source

Understanding how CSS visibility and display properties affect layout and performance is crucial for crafting efficient, responsive designs. Let's dissect these properties with technical precision, practical examples, and best practices tailored for developers.

Core Concepts: visibility vs. display

Visibility Property

• Hides elements while retaining layout space.
• Values: visible (default), hidden, collapse, initial, inherit.
• Does not trigger layout recalculations when toggling visibility.

<div class="hidden-visibility">Hidden but occupies space</div>
<div>Next element</div>

.hidden-visibility {
  visibility: hidden; /* Element space remains reserved */
}

Display Property

• Removes elements from the document flow.
• Common value: display: none; (element is ignored by layout engine).
• Triggers reflow/repaint when toggled, affecting performance.

<div class="hidden-display">Removed from layout</div>
<div>Next element shifts up</div>

.hidden-display {
  display: none; /* Element space is reclaimed */
}

---

Key Differences & Use Cases

Property	Layout Impact	Performance	Accessibility
visibility: hidden	Retains space	Minimal impact	May be read by screen readers
display: none	Removes space	Triggers reflow	Hidden from screen readers

When to Use Each:

• visibility: hidden
  
  Ideal for UI elements that toggle without layout shift (e.g., tooltips, hover menus).

• display: none
  
  Best for removing elements entirely (e.g., conditional components, mobile-responsive content).

---

Advanced Usage & Edge Cases

visibility: collapse for Tables

• Hides table rows/columns while preserving structural integrity.
• Non-table elements: Behaves like visibility: hidden in most browsers.

<table>
  <tr class="collapsed-row">
    <td>Hidden row</td>
  </tr>
  <tr>
    <td>Visible row</td>
  </tr>
</table>

.collapsed-row {
  visibility: collapse; /* Table layout remains intact */
}

Performance Considerations

• display: none elements are excluded from render tree, reducing paint calculations.
• visibility: hidden elements still incur paint costs (but aren't visible).

---

Comparative Analysis with opacity: 0

Property	Hit Testing	Transitionable	Layout Impact
visibility: hidden	No	Yes (with delay)	Retains space
opacity: 0	Yes (use pointer-events: none to disable)	Yes	Retains space

---

Best Practices

1. Prefer display: none for:

   • Elements needing complete removal from accessibility tree.
   • Long-term hidden content to optimize rendering performance.

2. Use visibility: hidden for:

   • Smooth animations/transitions (combine with opacity).
   • Reserve space during AJAX loading states.

3. Browser Compatibility:

   • Test visibility: collapse in target browsers—behavior varies for flex/grid items.

---