CSS предоставляет разные способы скрыть элемент на странице: полностью удалить из разметки, сделать невидимым визуально или скрыть только от скринридеров. В этой статье мы подробно разберем каждый из вариантов, рассмотрим их особенности, преимущества и недостатки.
Display: none - полностью удаляет элемент
Display: none - это свойство в CSS, которое полностью удаляет элемент из разметки и потока документа. Когда мы применяем display: none к элементу, он перестает отображаться на странице. Более того, браузер ведет себя так, как будто этого элемента вообще нет в HTML-коде.
Преимущества display: none
- Элемент не отображается на странице
- Не влияет на расположение остальных элементов (layout)
- Экономит интернет-трафик, так как не загружается
Недостатки display: none
- Скрытый элемент недоступен для скринридеров
- Его невозможно анимировать, так как он удален из разметки
Из преимуществ и недостатков видно, что display: none лучше использовать, когда элемент совсем не нужен на текущей странице. Например, на мобильной версии сайта можно скрывать элементы навигации, предназначенные только для десктопа.
Пример использования display: none
Допустим, у нас есть блок с изображением, который должен отображаться только на экранах шире 1024px. В CSS мы можем скрыть его следующим образом:
@media (max-width: 1024px) { #image { display: none; } }
Таким образом, на экранах уже 1024px блок с id="image" не будет отображаться.
Visibility: hidden - делает элемент невидимым
В отличие от display: none, свойство visibility: hidden не удаляет элемент из разметки. Браузер продолжает считать, что элемент присутствует на странице и оставляет для него место, однако визуально элемент становится невидимым.
Преимущества visibility hidden
- Невидимый элемент продолжает влиять на расположение остальных элементов (сохраняет layout)
- Остается доступным для скринридеров
Недостатки visibility hidden
- Хоть элемент и невидим, он все равно загружается при открытии страницы
- Занимает место в разметке документа
Исходя из особенностей visibility: hidden, логично использовать его, когда нам нужно скрыть элемент временно, например при наведении курсора мыши или выполнении какого-то действия на странице.
Пример использования visibility hidden
Допустим, у нас есть кнопка, при нажатии на которую должен скрываться некий блок контента. Мы можем сделать это так:
.content { visibility: visible; } .content.hidden { visibility: hidden; }
А затем при обработке клика по кнопке добавлять класс .hidden к блоку .content, чтобы спрятать его.
Скрытие элемента от скринридеров
Иногда возникает необходимость визуально отобразить элемент на странице, но скрыть его содержимое от скринридеров. Это бывает нужно для улучшения юзабилити, например чтобы скрыть дублирующий текст или вспомогательные подсказки. Для таких целей можно использовать следующие способы.
Атрибут hidden
В HTML есть специальный boolean атрибут hidden, который скрывает элемент от скринридеров, но оставляет его видимым. Чтобы задействовать его, достаточно добавить в тег:
<div hidden>Скрытый текст</div>
Класс visually-hidden
Еще один распространенный способ - использовать специальный CSS класс .visually-hidden, который делает элемент доступным для скринридеров, но визуально скрывает его, обрезая размеры до нуля. Пример класса:
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; }
Преимуществом .visually-hidden является кроссбраузерная поддержка и возможность применить к любому элементу, в отличие от атрибута hidden.
Встраивание скрытого контента
Иногда нужно встроить в разметку скрытый по умолчанию контент, но предоставить пользователю возможность его развернуть. Давайте рассмотрим несколько способов реализации этого без использования тегов div, details и fieldset.
Заголовок с атрибутом tabindex
Можно сделать обычный заголовок, который будет скрыт по умолчанию, но станет видимым при фокусе (например, по табуляции с помощью клавиатуры). Для этого нужно добавить атрибут tabindex.
<h2 tabindex="0">Заголовок скрытого контента</h2> Скрытый контент
При наведении фокуса заголовок станет видимым.
Ссылка-заголовок
Можно также использовать ссылку в качестве заголовка для скрытого контента.
<a href="#">Заголовок скрытого контента</a> Скрытый контент
При клике на ссылку можно показать контент с помощью JavaScript.
Кнопка-переключатель
Еще вариант - кнопка, которая будет скрывать/показывать контент при клике.
<button>Показать контент</button> Скрытый контент
Таким образом, контент можно сделать скрытым по умолчанию, используя HTML-элементы вместо тегов div, details и fieldset.
Встраивание скрытого контента
Иногда нужно встроить в разметку скрытый по умолчанию контент, но предоставить пользователю возможность его развернуть. Давайте рассмотрим несколько способов реализации этого без использования тегов div, details и fieldset.
Заголовок с атрибутом tabindex
Можно сделать обычный заголовок, который будет скрыт по умолчанию, но станет видимым при фокусе (например, по табуляции с помощью клавиатуры). Для этого нужно добавить атрибут tabindex.
<h2 tabindex="0">Заголовок скрытого контента</h2> Скрытый контент
При наведении фокуса заголовок станет видимым.
Ссылка-заголовок
Можно также использовать ссылку в качестве заголовка для скрытого контента.
<a href="#">Заголовок скрытого контента</a> Скрытый контент
При клике на ссылку можно показать контент с помощью JavaScript.
Кнопка-переключатель
Еще вариант - кнопка, которая будет скрывать/показывать контент при клике.
<button>Показать контент</button> Скрытый контент\
Таким образом, контент можно сделать скрытым по умолчанию, используя HTML-элементы вместо тегов div, details и fieldset.
Скрытие на разных устройствах
При создании адаптивного дизайна часто возникает потребность скрывать или показывать элементы в зависимости от размера экрана устройства. Для этого используются CSS медиа-запросы.
Скрытие на мобильных
Элементы, неактуальные для мобильных, можно скрыть при помощи запроса:
@media (max-width: 767px) { .element { display: none; } }
Показ на планшетах
А для показа на планшетах в диапазоне 768-1023px:
@media (min-width: 768px) and (max-width: 1023px) { .element { display: block; } }
Скрытие на десктопах
Элементы, неуместные на больших экранах, можно скрыть при помощи запроса:
@media (min-width: 1024px) { .element { display: none; } }
Таким образом реализуется скрытие элементов для разных устройств.
Интерполяция
При анимации значения видимости интерполируются между видимыми и невидимыми.
Поэтому одно из начальных или конечных значений должно быть равно,visibleиначеинтерполяцияневозможна.
Значение интерполируется как дискретный шаг, где значения функции замедления между 0 и1сопоставляются с visible другими значениями функции замедления (которые возникают только в начале/конце перехода или в результате cubic-bezier() функций со значениями y за пределами [ 0, 1]) сопоставляются с ближайшей конечной точкой.
Примечания
- Поддержка
visibility: collapseотсутствует или частично неверна в некоторых современных браузерах. Он может обрабатываться неправильно, какvisibility: hiddenи элементы, отличные от строк и столбцов таблицы. visibility: collapseможет изменить макет таблицы, если в таблице есть вложенные таблицы внутри свернутых ячеек, если толькоvisibility: visibleэто не указано явно для вложенных таблиц.
