Что указывается в visibility в CSS?

Разбор свойства visibility в CSS

Свойство visibility в CSS управляет видимостью элемента на странице, но, в отличие от display, оно не удаляет элемент из потока документа. Это ключевое отличие.

Основные значения свойства visibility

Свойство принимает четыре основных значения:

• visible (значение по умолчанию): Элемент полностью видим и отображается как обычно.
• hidden: Элемент становится невидимым, но критически важно — он продолжает занимать место в макете. Его пространство не освобождается, как при display: none. Это влияет на окружающие элементы: они не «сдвигаются» чтобы заполнить пустоту.
• collapse: Это значение имеет специфичное поведение, зависящее от типа элемента.

    *   Для **табличных элементов** (`<table>`, `<tr>`, `<td>`, `<th>`, `<col>`, `<colgroup>`): Элемент удаляется из визуального представления таблицы, как если бы был задан `display: none`. Однако, если используется `<col>` или `<colgroup>`, пространство столбцов освобождается. Для строк и ячеек таблицы пространство не сохраняется.
    *   Для **всех других элементов** (не табличных): `collapse` работает идентично `hidden`. Элемент скрывается, но сохраняет свое место в потоке.

• inherit: Элемент принимает значение visibility от своего родителя.

Практическое сравнение visibility: hidden и display: none

Разберем на примерах, как эти два подхода влияют на документ.

<div class="container">
  <div class="box">Box 1</div>
  <div class="box hidden-visibility">Box 2 (visibility)</div>
  <div class="box">Box 3</div>
</div>

<div class="container">
  <div class="box">Box A</div>
  <div class="box hidden-display">Box B (display)</div>
  <div class="box">Box C</div>
</div>

.container {
  border: 2px solid blue;
  margin-bottom: 20px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: inline-block;
}
.hidden-visibility {
  visibility: hidden;
}
.hidden-display {
  display: none;
}

В первой контейнере Box 2 скрыт (visibility: hidden), но между Box 1 и Box 3 остается пустой промежуток размером 100x100px + margin. Во второй контейнере Box B полностью удален из потока (display: none), поэтому Box A и Box C располагаются рядом, без промежуточного пространства.

Ключевые особенности и применения

• Влияние на события: Скрытый через visibility: hidden элемент не реагирует на события мыши (click, hover). Они «проходят сквозь» него к элементам ниже. Элемент с display: none вообще не существует в макете, поэтому события на его область не могут быть инициированы.
• Анимация и переходы: visibility можно анимировать вместе с другими свойствами (например, opacity) для создания эффектов плавного исчезновения/появления, где элемент сначала становится прозрачным, а затем полностью скрывается. display не является анимируемым свойством.

.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.fade-in {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

• Доступность (ARIA): Скрытый элемент остается в DOM и доступен для вспомогательных технологий (скринридеров), если не был специально помечен как aria-hidden="true". Это может быть важно или проблематично, и требует контроля.
• Специфичное применение collapse: Основное использование — для динамического скрытия строк или столбцов таблиц без пересчета ширины соседних столбцов вручную. Для Flexbox или Grid контейнеров использование collapse не даёт особого преимущества над hidden.

Итог

Выбор между visibility и display зависит от задачи:

• Используйте visibility: hidden, когда нужно скрыть элемент, сохранив структуру макета (например, для резервного пространства под спойлер, который будет показан позже, или для сложных анимаций).
• Используйте display: none, когда элемент должен быть полностью удален из потока документа, и его скрытие должно перестроить окружающий макет.
• Значение collapse является узкоспециализированным инструментом для работы с таблицами.

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