display:none, visibility:hidden и opacity: 0 — в чем их различие?

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

Display: none

display: none скрывает элемент и удаляет его из потока документа. Это означает, что скрытый элемент не занимает место на странице и не влияет на остальные элементы. Браузер не загружает скрытый элемент и не обрабатывает его, что может ускорить загрузку страницы. Однако, скрытый элемент остается доступен для программного обращения к нему, например, с помощью JavaScript.

Например сделаем такую разметку:

<div class="blocks">
  <div class="blocks__item block1">Блок 1</div>
  <div class="blocks__item block2">Блок 2</div>
  <div class="blocks__item block3">Блок 3</div>
</div>

Добавим немного стилей:

.blocks {
    display: flex;
    gap: 10px;
}

.blocks__item {
    padding: 12px 24px;
    background: green;
    color: white;
}

И получаем такой результат:

Теперь для .block2 установим display: none:

See the Pen display:none by Max (@max00110) on CodePen.

 

Поскольку мы использовали display:none на элемент .block2, он не отображается в документе. Таким образом, его место на экране освобождается для других элементов.

Visibility: hidden

Свойство visibility: hidden не удаляет элемент из потока документа. Это означает, что скрытый элемент занимает место на странице и влияет на остальные элементы. Если вы скрываете элемент с помощью visibility:hidden, то он все еще будет влиять на макет страницы и может влиять на расположение других элементов на странице. Это свойство может быть полезным, когда вы хотите временно скрыть элемент, но сохранить его размер и позицию.

Возьмем наш предыдущий пример и вместо display: none для .block2 добавим visibility: hidden:

See the Pen display:none by Max (@max00110) on CodePen.

 

Как вы видите, блок скрылся но макет не изменился, оставив место под скрытый блок.

visibility: hidden против opacity: 0

Следующее, о чем вы можете спросить – какая разница между visibility: hidden и opacity: 0? Ведь между ними визуально нет никакой разницы.

See the Pen visibility:hidden by Max (@max00110) on CodePen.

 

Да, визуально разницы нет, но есть разница в поведении элементов.

Элементы с visibility: hidden не являются интерактивными. Имеется в виду, что пользователи не могут взаимодействовать с такими элементами (например, кликать). Это потому, что такие элементы действительно невидимы.

А элементы с opacity: 0 интерактивны, так как они на самом деле видны, просто очень прозрачны. Свойство opacity не определяет видимость элемента — оно определяет только прозрачность.

Подведем итоги

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

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

https://html-css.blog/css/displaynone-i-visibilityhidden/
https://habr.com/ru/companies/htmlacademy/articles/340224/