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

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

Скрытие элемента с помощью opacity: 0

Если быть точным, свойство opacity не скрывает элемент, а лишь определяет его степень прозрачности. Значение 1 означает полную непрозрачность объекта, а значение 0, соответственно, приводит к полной прозрачности, в результате чего элемент перестает быть виден для посетителя. Последняя часть предложения важна: элемент будет скрыт лишь визуально, но при этом он будет занимать свое место на странице, влиять на положение других элементов, и с ним можно будет взаимодействовать (к примеру, он станет непрозрачным при наведении мыши, если определить соответствующий стиль для состояния :hover). Скрин-ридеры также будут видеть данный элемент.

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

Скрытие элемента с помощью visibility: hidden

В отличие от свойства прозрачности, свойство visibility специально предназначено для визуального скрытия элементов. Значение hidden скрывает элемент, а значение visible — показывает. Как и в случае с opacity, элемент продолжает занимать свое место на странице, однако взаимодействовать с элементом, скрытым с помощью visibility: hidden, нельзя. Скрин-ридеры не видят такой элемент.

Свойство visibility не реагирует на свойство transition, а это означает, что изменение значения с hidden на visible (либо наоборот) будет происходить мгновенно.

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

Скрытие элемента с помощью display: none

Свойство display со значением none стоит использовать в том случае, если вам нужно полностью скрыть элемент. Такой объект (и все его дочерние элементы) не только перестает быть виден посетителю и скрин-ридеру, но и не занимает места на странице и не влияет на расположение других элементов. Всё выглядит так, словно элемента и нет. Естественно, взаимодействовать с элементом, который скрыт данным образом, тоже невозможно.

Как и в случае со свойством visibility, свойство display не поддерживает плавные переходы transition.

Скрытие элемента с помощью position: absolute

Еще один способ скрыть элемент исключительно визуально — задать ему абсолютное позиционирование, выдернув из общего потока документа, и затем переместить далеко за пределы видимой области путем установки больших отрицательных значений для свойств top и left. Например:

div {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

Логично предположить, что спрятать таким образом элемент от скрин-ридеров нельзя, да и в целом не рекомендуется применять этот вариант скрытия, поскольку есть более надежные и правильные способы, описанные выше. Однако в некоторых нетривиальных ситуациях веб-разработчики всё же используют его.

Далее в учебнике: CSS Grid Layout — будущее уже здесь.