В чём разница между opacity, visibility и display: none при скрытии элементов?

В чём разница между opacity, visibility и display: none при скрытии элементов?

• CSS-способы скрытия элементов и их последствия
• opacity: элемент становится визуально невидимым, но сохраняет место в потоке и может получать события (при прозрачности)
• visibility: hidden: элемент не виден и недоступен для клика, однако его место в раскладке сохраняется
• display: none: элемент исключается из потока, не отображается, не занимает место и недоступен для взаимодействия
• Воздействие на layout: display требует перестроения, а visibility и opacity не меняют раскладку
• Перформанс: display может потребовать больше ресурсов из-за перерасчёта layout'а
• Когда использовать: display — для полного скрытия, visibility — чтобы оставить свободное место, opacity — для визуальных эффектов и анимаций
• Что важно для доступности: display и visibility скрывают элемент от экранных читалок, а opacity — нет, поэтому содержимое остаётся доступным для чтения

Развёрнутый ответ

Краткий ответ

opacity, visibility и display: none — три CSS-свойства, управляющие видимостью элементов. При этом они по-разному воздействуют на раскладку страницы, рендеринг и возможность взаимодействия с элементом.

opacity определяет степень прозрачности элемента в диапазоне от 0 (полная прозрачность) до 1 (полная непрозрачность). Элемент продолжает находиться в DOM, занимает прежнее место и реагирует на события, хотя визуально может быть полностью невидимым или полупрозрачным.

При значении visibility: hidden элемент перестаёт отображаться, но его область в раскладке сохраняется. Нажать на такой элемент нельзя: он невидим и недоступен для клика, несмотря на сохранённое пространство.

Свойство display: none исключает элемент из layout flow. Он не отображается, не занимает места и не участвует в расчёте размеров и позиционировании, поэтому взаимодействовать с ним также невозможно.

Главные различия

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

Пример применения

На практике opacity часто выбирают для плавного изменения прозрачности, например в React 18 или при использовании CSS transitions. visibility: hidden подходит, когда нужно скрыть элемент, но сохранить занимаемое им место, например отдельные элементы формы. display: none применяют для динамического исключения компонента из DOM-потока — например, при переключении вкладок или работе модальных окон, чтобы он не влиял на остальной layout и не создавал лишнюю нагрузку.