Что такое visibility hidden?

Что такое visibility: hidden?

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

Основные характеристики visibility: hidden

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

Элемент с visibility: hidden остаётся частью DOM (Document Object Model) и рендеринг-дерева браузера. Он сохраняет свои исходные размеры (ширину, высоту, отступы), и другие элементы страницы не смещаются, чтобы занять его место. Например:

<div class="visible-box">Видимый блок</div>
<div class="hidden-box">Скрытый блок с visibility: hidden</div>
<div class="visible-box">Ещё один видимый блок</div>

.hidden-box {
  visibility: hidden;
  background: lightcoral;
  padding: 20px;
}

В этом случае второй блок будет невидим, но между первым и третьим блоками останется пустое пространство, соответствующее размерам скрытого элемента.

2. Доступность для взаимодействия

Хотя элемент не отображается визуально, он не становится интерактивным. Скрытый элемент:

• Не реагирует на события мыши (клики, ховеры);
• Игнорируется в навигации с клавиатуры;
• Не доступен для скринридеров (screen readers) — большинство программ зачитывания контента пропускают такие элементы, так как они считаются скрытыми для всех пользователей.

3. Наследуемость свойства

visibility является наследуемым свойством (inheritable). Если скрыть родительский элемент, все его дочерние элементы также станут невидимыми. Однако это можно переопределить, явно задав дочернему элементу visibility: visible. Например:

.parent {
  visibility: hidden; /* Скрывает родителя и всех детей */
}

.child {
  visibility: visible; /* Дочерний элемент снова становится видимым */
}

4. Возможность анимации

visibility можно анимировать с помощью CSS-переходов (transitions) и анимаций (animations), хотя это работает лишь в сочетании с другими свойствами, такими как opacity. Например, плавное исчезновение:

.element {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.element.hidden {
  visibility: hidden;
  opacity: 0;
}

Сравнение с другими методами скрытия элементов

Практические сценарии использования

1. Резервирование места для динамического контента

Когда контент загружается асинхронно (например, через AJAX), можно заранее зарезервировать под него область, чтобы избежать скачков макета:

.loading-placeholder {
  visibility: hidden;
  height: 200px;
}

2. Создание кастомных выпадающих меню (dropdowns)

visibility: hidden в сочетании с opacity позволяет делать плавные переходы:

.dropdown-content {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

.dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
}

3. Управление видимостью без перерасчёта макета

Если нужно временно скрыть элемент, но сохранить структуру страницы (например, в сложных flex/grid-контейнерах), visibility: hidden предпочтительнее display: none, так как не вызывает reflow (перерасчёт геометрии страницы).

Ограничения и особенности

• Не работает с псевдоэлементами ::before и ::after — их видимость контролируется отдельно.
• Не скрывает тени (box-shadow) и рамки (border) — они остаются видимыми, если не заданы дополнительные стили.
• Влияет на доступность — скрытые элементы обычно удаляются из accessibility tree, что важно учитывать при разработке для пользователей со специальными возможностями.

Итог

visibility: hidden — это инструмент для управления видимостью без нарушения макета. Он полезен в сценариях, где нужно временно скрыть контент, сохранив зарезервированное место, или создать плавные анимации появления/исчезновения. Однако для полного скрытия с удалением из потока документа (display: none) или создания интерактивных невидимых элементов (opacity: 0) стоит выбирать другие подходы, исходя из требований конкретной задачи.