Руководство по сокрытию элементов в CSS
Сокрытие элементов веб-сайта может быть полезно по разным причинам, например для защиты конфиденциальной информации, ограничения доступа к премиум-контенту или персонализации контента для определённых групп пользователей. Например, мы можем захотеть скрыть определённые рекламные акции или предложения от пользователей, которые уже совершили покупку, или персонализировать контент на основе географического местоположения пользователя или истории просмотров. Мы можем использовать CSS для выборочного сокрытия или отображения определённых элементов на основе пользовательских атрибутов.
Долгое время популярным методом сокрытия элементов было использование display: none, но теперь доступны более универсальные и анимируемые варианты. В этой статье мы рассмотрим шесть дополнительных свойств CSS, которые можно использовать для сокрытия элементов, и проанализируем каждый подход. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство предоставит вам рекомендации по сокрытию элементов на ваших веб-страницах.
Компромиссы, которые следует учитывать при использовании CSS для сокрытия элемента
Существует несколько способов скрыть элемент с помощью CSS, но они различаются тем, как влияют на макет, анимацию, обработку событий, производительность и доступность. Вот информация, о которой следует помнить, если вы планируете скрывать элементы на веб-странице:
Анимация: Некоторые CSS свойства можно анимировать в промежутках между состояниями; однако другие не могут быть анимированы и просто переходя от видимого к невидимому состоянию без постепенно затухания или другой анимации.
Обратите внимание: у некоторых людей анимация может вызывать дискомфорт, мигрень, судороги или дезориентацию. В результате рекомендуется использовать медиа запрос
prefers-reduced-motion, для отключения анимации, когда пользователи указали это предпочтение.Обработка событий: Некоторые CSS свойства не позволяют запускать события для скрытого элемента. Другие не имеют такого эффекта, то есть можно кликнуть по невидимому элементу и вызвать событие.
Производительность: Многие из подходов, обсуждаемых в этой статье, могут негативно влиять на производительность веб-страниц, особенно те, которые влияют на макет, а не только на композицию. Это имеет смысл, если мы рассмотрим, как отображается веб-страница. После того как HTML DOM и объектная модель CSS загружены и проанализированы браузером, веб-страница проходит три этапа рендеринга:
- Макет/Layout: определяются размер и положение каждого элемента.
- Рисование/Paint: рисуются пиксели каждого элемента.
- Композиция/Composition: слои элементов располагаются в правильном порядке.
Доступность: Техники рассмотренные в этой статье, могут сделать элемент невидимым на экране, но не всегда скрывают его содержимое от вспомогательных технологий. Например, программы чтения с экрана могут читать прозрачный текст. Возможно, потребуется добавить атрибуты ARIA, такие, как
aria-hidden="true", чтобы правильно описать текущее состояние элемента.
CSS свойство display
CSS свойство display определяет, следует ли рассматривать элемент как block или inline элемент, а также устанавливает макет для его дочерних элементов, таких как flex или grid.
Мы можем использовать свойство display со значением none, чтобы скрыть элемент и его потомков на веб-странице:
.hide-element{
display:none;
}Установка display значения none для элемента полностью удаляет его из макета, создавая впечатление, что он не существует в документе. Это также относится к дочерним элементам.
В приведённом ниже примере мы скрываем элемент div, и элемент button немедленно перемещается на прежнее место div. Мы видим, что div полностью удаляется из макета, когда для его свойства display установлено значение none:
Анимация
Невозможно анимировать свойство display напрямую, поскольку display принимает только определённые значения (например, block, inline, inline-block) и не может быть преобразовано или анимировано, как другие свойства, принимающие числовые или цветовые значения.
Триггер событий
Когда элемент скрыт с помощью display: none, он удаляется из макета страницы, и браузер не выделяет этому элементу ни каких ресурсов. Это означает, что события не могут быть инициализированы для этого элемента.
Производительность
Установка свойству display элемента значения none может привести к перезагрузке макета или задержке рендеринга контента.
Доступность
Сокрытие элемента с помощью display: none исключает его из дерева доступности, желая недоступным для вспомогательных технологий. Следовательно, этот элемент и его дочерние элементы не будут прочитаны программами чтения с экрана.
CSS свойство visibility
CSS свойство visibility позволяет скрыть или показать элемент без изменения макета документа. Это свойство также можно использовать для сокрытия строк или столбцов <table>:
.hide-element{
visibility: hidden;
}В приведённом ниже примере мы скрываем элемент div используя свойство visibility. Этот подход только визуально скрывает элемент, он не удаляется и документа и макет документа не изменяется:
Анимация
Свойство visibility можно анимировать, но результат выглядит ужасно и даёт резкий эффект. Это связано с тем, что свойство видимости имеет бинарное значение visible и hidden. При переходе между этими двумя состояниями элемент будет появляться или исчезать резко, без каких-либо промежуточных состояний.
Триггер событий
Когда элемент скрыт с использованием подхода visibility: hidden, он по-прежнему присутствует в DOM страницы и может получать такие события, как клики, наведение мыши или события клавиатуры. Однако поскольку элемент не виден, пользователю сложно с ним взаимодействовать.
Производительность
Установка для свойства элемента visibility значения hidden оказывает незначительное влияние на производительность, поскольку влияет только на визуальный рендеринг элемента, а не на его макет или размер.
Однако, если элемент имеет сложную визуализацию или содержит много дочерних элементов, установка visibility в hidden по-прежнему может влиять на производительность из-за того, что механизму визуализации браузера необходимо вычислять и обрабатывать стили и свойства элемента.
Доступность
Когда элемент скрыт параметром visibility: hidden, он по-прежнему присутствует в HTML коде и по-прежнему доступен программам для чтения с экрана. Однако содержимое скрытого элемента не отображается на экране, что может вызвать проблемы у пользователей полагающихся на визуальные подсказки для навигации по странице.
CSS свойства opacity и filter
CSS свойство opacity определяет уровень прозрачности элемента, контролируя степень, в которой содержимое, расположенное за элементом, скрыто. opacity, по сути, обратно прозрачности.
Мы можем добиться такого же эффекта с помощью свойства filter: opacity(), но, как правило, предпочтительнее использовать свойство opacity и использовать filter для других целей (например, для применения эффектов blur, contrast или grayscale к элементам). Выбор остаётся за вами.
.hide-element{
opacity: 0.3;
// или
opacity: 30%;
// или
filter: opacity(0.3);
// или
filter: blur(100px);
}Значение свойства opacity представлено числом от 0.0 до 1.0 или процентом от 0% до 100%. Это означает непрозрачность канала или значение его альфа-канала. Значения за пределами этого диапазона по-прежнему приемлемы, но будут ограничены ближайшей границей указанного диапазона.
opacity влияет на весь элемент, включая его содержимое. Это означает, что элемент и его дочерние элементы будут иметь одинаковый уровень opacity по отношению к фону элемента, независимо от их индивидуальных значений opacity по отношению друг к другу.
Обратите внимание: Если используется значение opacity, отличное от 1, для элемента создаётся новый контекст наложения.
В приведённом ниже примере мы скрываем элемент div, используя свойство opacity:
Анимация
Любой элемент, скрытый с помощью свойства opacity, по-прежнему можно анимировать. Постепенно изменяя значение opacity от 1 (полностью видимый) до 0 (полностью прозрачный), элемент постепенно исчезнет и станет скрытым. Точно также, постепенно изменяя значение opacity от 0 до 1, элемент постепенно проявится и станет видимым.
Триггер событий
Когда элемент скрыт с использованием подхода opacity, события по-прежнему могут запускаться для этого элемента. Это связано с тем, что элемент по-прежнему присутствует в документе и по-прежнему занимает место в макете, даже если он не виден.
Производительность
Скрытие элемент с помощью opacity не оказывает существенного влияния на производительность.
Доступность
Когда элемент скрыт с помощью opacity, он по-прежнему присутствует в документе и по-прежнему занимает место в макете, а это означает, что он по по-прежнему может быть обнаружен программами чтения с экрана и другими вспомогательными технологиями. Однако, если скрытый элемент не помечен должным образом или если он недоступен с помощью навигации с помощью клавиатуры, пользователям с нарушением зрения может быть сложно получить доступ и понять содержимое на странице.
CSS свойство clip-path
CSS свойство clip-path позволяет определять конкретную область элемента, которая должна отображаться, скрывая остальные части. Область отсечения определяет, какая часть элемента видна, а части, выходящие за пределы области, скрыты от просмотра:
.hide-element{
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
//или
clip-path: circle(0);
}В приведённом выше коде свойство clip-path установлено на polygon с четырьмя точками, все из которых находятся в начале координат (0,0), эффективно скрывая элемент.
В приведённом ниже примере мы скрываем элемент div, используя свойство clip-path, установленное на circle:
Анимация
Свойство clip-path может быть анимировано с использованием CSS анимации и переходов для создания интересных визуальных эффектов.
Триггер событий
События могут быть инициированы для элемента скрытого с помощью CSS свойства clip-path. Несмотря на то, что элемент невидим, он всё ещё существует в документе и может реагировать на такие события, как клики, наведение и нажатие клавиш.
Производительность
Использование clip-path для сокрытия элементов может повлиять на производительность, особенно когда свойство анимировано.
Анимация свойства clip-path элемент требует, чтобы браузер пересчитывал макет и перерисовывал элемент для каждого кадра анимации. Это может быть очень ресурсоёмким процессом и привести к тому, что анимация будет прерывистой или запаздывающей на более медленных устройствах. Особенно если несколько элементов одновременно анимируются с помощью clip-path.
Сокрытие элемента с помощью метода clip-path также может влиять на общий макет страницы; другие элементы веб-страницы могут смещаться или изменяться в размере по мере того, как обрезанные элементы скрываются или показываются. Это может привести к снижению качества и предсказуемости взаимодействия с пользователем.
Доступность
Когда контент скрыт с помощью clip-path, он по-прежнему присутствует в документе и может быть доступен для программ чтения с экрана и других вспомогательных технологий. Однако, если скрытый контент не помечен или не описан должным образом, пользователи с ослабленным зрением могут не знать о его наличии и могут упустить важную информацию или функции.
CSS свойства height, width и overflow
CSS свойства height, width и overflow могут использоваться для сокрытия элементов. Например, установка свойств height: 0, width: 0 и overflow: hidden для элемента эффективно скроют его от просмотра. Поскольку это указывает, что элемент не будет иметь видимой высоты или ширины, любое содержимое, превышающее эти размеры, будет скрыто.
Установка для свойства overflow значения hidden гарантирует, что любой контент, превышающий размеры элемента, не будет виден — вместо этого он обрезается или скрывается из поля зрения:
.hide-element{
width:0;
height:0;
overflow:hidden;
}Обратите внимание: Важно помнить, что другие CSS свойства, такие как padding, border и margin, по-прежнему могут влиять на макет и положение элемента.
Когда height и width родительского элемента установлены равными 0, а его overflow установлено в hidden — дочерние элементы будут скрыты и не будут занимать место на странице. Это связано с тем, что дочерние элементы содержатся внутри родительского элемента.
Анимация
Элемент, скрытый из-за того, что его height и width равны 0, по-прежнему можно анимировать. Постепенно изменяя значения от 0 до желаемой ширины и высоты, элемент станет видимым и будет постепенно увеличиваться в размерах. Затем, уменьшая значения обратно до 0, элемент будет постепенно уменьшаться и станет невидимым.
Триггер событий
События не могут быть запущены для элементов скрытых с использованием height, width и overflow.
Производительность
Использование height, width и overflow для сокрытия элементов может негативно сказаться на производительности веб-страницы, особенно если внутри скрытых элементов есть сложный и ресурсоёмкий контент.
Доступность
Когда элементы скрыты с использованием height, width и overflow, их содержимое всё ещё может быть прочитано программами чтения с экрана.
CSS свойство transform
CSS свойство transform имеет несколько функций, включая перемещение, масштабирование, вращение или наклон элемента. Элемент можно скрыть используя свойство transform, либо масштабируя его до 0, либо переводя за пределы экрана, используя такие значения, как -999px для горизонтальной оси и 0px для вертикальной оси:
.hide-element{
transform: scale(0);
// или
transform: translate(-999px, 0);
}Сокрытие элемент с помощью свойства transform: scale(0) аналогично подходу с height и width. Разница в том, что на свойство transform не влияют border, padding или margin, поэтому элемент полностью исчезнет с экрана.
transform: translate(), с другой стороны, может использоваться для перемещения элемента как по горизонтальной, так и по вертикальной осям. Используя отрицательные значения с функцией translate, мы можем переместить элемент за пределы контейнера, эффективно скрыв его от просмотра. Мы можем добиться аналогичных результатов с помощью свойства position (будет описано далее в статье).
Стоит отметить, что этот приём скрывая элемент, фактически не удаляет его со страницы и не меняет его положение в макете.
В приведённом ниже примере мы скрываем div, используя свойство transform:
Анимация
Элемент, скрытый с помощью свойства transform, может быть анимирован. Свойство transform обеспечивает высокую производительность и аппаратное ускорение, поскольку оно позволяет перемещать элемент в отдельный слой, который можно анимировать как в 2D, так и в 3D. Этот подход не влияет на исходное пространство макета.
Мы можем использовать CSS трансформации и анимации для создания плавных и постепенных изменений масштаба элемента, заставляя его растворяться или исчезать
, или заставляя его появляться где-то за пределами веб-страницы.
Триггер событий
События не могут быть запущены для элементов скрытых с помощью подхода transform.
Производительность
Использование transform: scale() или transform: translate() для сокрытия элемента в небольшой степени отрицательно влияет на производительность, но в некоторых случаях это можно улучшить с помощью аппаратного ускорения.
Доступность
Когда элементы скрыты с помощью свойства transform, их содержимое по-прежнему может быть прочитано программами чтения с экрана.
CSS свойство position
CSS свойство position может использоваться для смещения элемента в макете веб-страницы с использованием значений top, bottom, left и right. Например, абсолютно позиционированный элемент можно переместить за пределы экрана, указав значение, например, left: -9999px:
.hide-element{
position: absolute;
left: -9999px;
}В приведённом ниже примере мы скрываем элемент div, используя свойство position:
Анимация
Элемент скрытый с помощью свойства position, может быть анимирован. Мы можем анимировать его значения его свойства top, left, right и bottom.
Триггер событий
Технически, события могут запускаться для элемента, скрытого с помощью подхода position, но это невозможно сделать, когда position элемента полностью смещена за пределы экрана.
Производительность
Использование position для сокрытия элементов может повлиять на производительность веб-страницы. Даже если элемент был смещён за пределы экрана, браузеры всё равно необходимо рассчитать макет и пространство для этого элемента, что приводит к ненужным расчётам рендеринга и макета. Если таким образом скрыть большое количество элементов веб-страницы, это может увеличить время загрузки страницы и сделает её менее отзывчивой.
Доступность
Когда элементы скрыты с помощью свойства position, их содержимое по-прежнему может быть прочитано программами чтения с экрана, даже если они были перемещены за пределы экрана.
Заключение
CSS предоставляет широкий спектр методов для сокрытия элементов на веб-странице. В этой статье мы рассмотрели шесть CSS-альтернатив традиционному display: none подходу. Хотя display: none по-прежнему является допустимым подходом к постоянному сокрытию содержимого, использование transform или opacity может быть лучшим выбором с точки зрения производительности.
Может возникнуть соблазн использовать эти методы для создания интерактивных функций или удаления ненужного контента, но всегда важно учитывать влияние на пользовательский опыт и доступность. Следуя рекомендациям и тщательно тестируя свой код, вы можете убедиться, что ваш веб-сайт функционален и удобен для пользователя. Я надеюсь, что техники и советы, представленные в этом руководстве, помогут вам максимально эффективно использовать мощные возможности CSS для сокрытия элементов на веб-сайте.