Когда нужно использовать visibility: hidden?

Когда использовать visibility: hidden?

visibility: hidden — это CSS-свойство, которое скрывает элемент визуально, но сохраняет его в потоке документа (layout). Это ключевое отличие от display: none, которое полностью удаляет элемент из потока. Ниже разберём основные сценарии использования, технические особенности и альтернативы.

Ключевые особенности visibility: hidden

• Элемент остаётся в DOM: браузер продолжает рассчитывать его размеры и положение.
• Сохраняет взаимодействие: скрытый элемент не реагирует на события мыши и клавиатуры (если не использовать visibility: visible для дочерних элементов).
• Доступность: скрытый элемент обычно игнорируется скринридерами (в отличие от opacity: 0, который может оставаться доступным).
• Производительность: браузер пересчитывает layout при изменении visibility, но это менее затратно, чем при display: none, если элемент часто показывается/скрывается.

---

Основные сценарии использования

1. Сохранение пространства в макете

Когда нужно скрыть элемент, но оставить его «место» в документе (например, для предотвращения смещения соседних элементов). Пример:

.hidden-tooltip {
  visibility: hidden;
  /* Элемент невидим, но его блок сохраняет высоту/ширину */
}

2. Анимации и переходы (transitions)

visibility: hidden можно анимировать вместе с opacity для плавного появления/исчезновения без нарушения layout. Пример:

.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

3. Управление видимостью дочерних элементов

Если у родителя visibility: hidden, а у дочернего элемента — visibility: visible, то дочерний элемент будет виден. Это полезно для сложных скрытых/показываемых интерфейсов.

.parent {
  visibility: hidden;
}

.parent .child {
  visibility: visible; /* Ребёнок видим даже при скрытом родителе */
}

4. Оптимизация производительности частых переключений

Если элемент нужно часто показывать/скрывать (например, dropdown-меню), visibility: hidden может быть эффективнее display: none, так как не вызывает полного перерасчёта layout каждый раз.

---

Сравнение с альтернативами

---

Практический пример: dropdown-меню

Рассмотрим реализацию выпадающего меню с плавной анимацией:

<button class="dropdown-toggle">Меню</button>
<div class="dropdown">
  <a href="#">Пункт 1</a>
  <a href="#">Пункт 2</a>
</div>

.dropdown {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  /* Сохраняет место, но невидимо */
}

.dropdown-toggle:focus + .dropdown {
  opacity: 1;
  visibility: visible;
  /* Плавное появление без "прыжков" layout */
}

---

Ограничения и рекомендации

• Доступность: если элемент должен быть скрыт и от скринридеров, используйте комбинацию visibility: hidden с aria-hidden="true".
• События: помните, что элемент с visibility: hidden не получает события мыши — это может быть как преимуществом, так и проблемой.
• Анимация: само свойство visibility не анимируется по числовым значениям, но его можно включать/выключать с задержкой (transition-delay).

Когда НЕ стоит использовать visibility: hidden

• Если нужно полностью удалить элемент из потока документа (используйте display: none).
• Если скрытый элемент должен оставаться интерактивным (рассмотрите opacity: 0 + pointer-events: none).
• Для семантического скрытия контента от всех пользователей (лучше удалить элемент из DOM).

Итог

visibility: hidden — это инструмент для визуального скрытия с сохранением layout. Его основная ниша — анимации, управление сложными интерфейсами и оптимизация частых переключений видимости. Для других задач (полное удаление, семантическое скрытие) существуют более подходящие альтернативы.