Чем отличается Display: None от Visibility: Hidden?

Разница между display: none и visibility: hidden

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

1. Поведение в потоке документа (Layout)

• display: none — элемент полностью удаляется из потока документа (layout tree). Браузер ведет себя так, как если бы этого элемента не существовало вообще.

    *   Пространство, которое элемент занимал, освобождается.
    *   Соседние элементы сдвигаются, чтобы заполнить освободившееся место.
    *   Размеры и положение других элементов пересчитываются (происходит **reflow**).

• visibility: hidden — элемент остается в потоке документа, но становится невидимым.

    *   Элемент продолжает занимать свое место на странице.
    *   Создается "пустота" или "невидимый блок" того же размера.
    *   Соседние элементы не сдвигаются.
    *   Если не меняются другие геометрические свойства, **reflow не происходит** (только **repaint**).

2. Взаимодействие и наследование

• display: none:

    *   Элемент и все его потомки становятся полностью недоступными для любых событий мыши, клавиатуры или скринридеров.
    *   Свойство не наследуется. Хотя потомки также скрыты (так как родительский контейнер удален из потока), это следствие, а не наследование.

• visibility: hidden:

    *   Свойство **наследуется**. Все потомки элемента также становятся невидимыми.
    *   Однако это поведение можно переопределить для конкретного потомка, задав ему `visibility: visible`. В этом случае потомок станет видимым внутри невидимого родительского "контейнера".
    *   Элемент не реагирует на события мыши (например, `click`, `hover`), так как он невидим. Клик проходит "сквозь" него к элементу ниже.

3. Влияние на производительность (Performance)

С точки зрения производительности, переключение между display: none и display: block (или другими значениями) обычно более затратно, так как провоцирует полный перерасчет макета (reflow) документа. Это может быть критично при частых анимациях или динамическом изменении контента.

Переключение visibility: hidden на visibility: visible обычно дешевле, так как чаще всего вызывает только перерисовку (repaint) элемента без изменения геометрии окружающих блоков.

4. Доступность (Accessibility)

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

• Контент, скрытый через display: none, удаляется из дерева доступности (accessibility tree) и не доступен для скринридеров.
• Контент, скрытый через visibility: hidden, также обычно не попадает в дерево доступности и не озвучивается. Это ключевое отличие от, например, свойства opacity: 0, при котором элемент может оставаться в дереве доступности.

Практические примеры

Пример с display: none:

<div class="box box1">Box 1</div>
<div class="box box2" style="display: none;">Box 2 (hidden)</div>
<div class="box box3">Box 3</div>

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: lightblue;
  border: 1px solid blue;
}

В этом случае Box 3 будет расположен сразу под Box 1, как если бы Box 2 не существовало.

Пример с visibility: hidden:

<div class="box box1">Box 1</div>
<div class="box box2" style="visibility: hidden;">Box 2 (hidden)</div>
<div class="box box3">Box 3</div>

Здесь между Box 1 и Box 3 будет пустой промежуток размером 100x100 пикселей (место, занимаемое невидимым Box 2).

Пример с наследованием visibility:

<div style="visibility: hidden;">
  <p>Этот текст не виден.</p>
  <p style="visibility: visible;">А этот текст ВИДЕН!</p>
</div>

Второй абзац станет видимым, несмотря на невидимого родителя.

Когда что использовать?

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

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