CSS стили: способы скрыть элемент CSS
Скрыть элементы в css можно, используя стили CSS множеством способов. Ты можешь скрыть при помощи установки opacity на 0, visibility на hidden, display на none или установить крайние значения до самого конца.
Вы когда-либо задавались вопросом, почему так много методов сокрытия элементов, хотя конечная цель у них одна?
Но на самом деле все методы различаются друг от друга, и их особенности подскажут нам когда использовать тот или иной метод. В данной статье будут рассмотрены лишь небольшие различия методов, которые Вы должны учесть при их использовании, когда хотите пользоваться стилями CSS скрыть элемент.
1 метод скрываем элемент с помощью: Opacity — (непрозрачность)
Данное свойство Opacity устанавливает прозрачность элемента. Он не предназначен изменять саму контурную рамку у элемента. Это значит, что установив Opacity до 0, визуально элемент скроется, но по прежнему буде занимать свое место на веб-странице и влиять ее макет. А также будет реагировать на действие пользователя.
Если собираетесь использовать свойство Opacity для скрытие элемента от чтения, то это неудачный метод, так как он будет доступен для чтения как и остальные элементы веб-страницы, другими словами вы не ощутите разницу с использованием Opacity и без него.
Хотелось бы отметить, что свойство opacity можно анимировать и использовать несколько отличных эффектов.
Взгляните на следующее html и css
При наведении курсора на скрытый второй блок, элемент переходит плавно от непрозрачности к полной прозрачности. Блок имеет cursor для pointer чтобы показать возможность взаимодействия.
2 метод скрытия элемента с помощью стилей CSS: Visibility — (видимость)
Следующим свойством нашего списка — Visibility , установив который поможет скрыть наш элемент. Данное свойство, как и opacity по прежнему влияет на макет нашей веб — страницы. Отличительной чертой является то, что он не будет фиксировать любое взаимодействие пользователя, когда на элементы установлено свойство — скрытое от пользователей. Элемент будет не доступен для чтения с экрана. Данное свойство можно настроить, задавая начальные и конечные значения, таким образом переход между различным состоянием видимости будет мягким, плавным, без резкости.
В примере можно наблюдать различия visibility от opacity
Обратите внимание, что будущие элементы с установленным visibility скрыты до их обнаружения. попробуйте навести через скрытый элемент, а не на содержание внутри, вы обнаружите, что курсор не изменился на указатель. Кроме того если вы попытаетесь щелкнуть на элементе, то клик не отменятся.
Через тег <p> , внутри тега <div> , по-прежнему улавливаются все события мыши.
Как только вы наведете курсор на текс в <div> то он сам становится видимым и начинает регистрировать на события.
3 метод, скрываем с помощью: Display — (отражение)
Свойство display скрывает элемент в прямом смысле этого слова. Установка display на none гарантирует, что box-model не формируется вовсе. Используя это свойство, при скрытии элемента, после не остается пустого пространства. Отличительным остается тот момент, что взаимодействие с пользователем невозможно пока стоит display на none , таким образом доступность для чтения будет невозможна, как — будто этот элемент и не существует.
Все будущие наши элементы также скрыты. Данное свойство не может быть анимировано, поэтому переходы между статусами всегда резкие.
Обратите внимание, что элемент доступен через DOM , Вы можете с ним работать как с любым другим элементом.
Посмотрите на CSS:
Вы увидите, что у второго блока есть пункт с набором свойств display , но он остается невидимым. Это еще одно отличие между visibility:hidden и display:none . В первом случае происходящее с установленным свойством visibility остается видимым, это не то что происходит с display . Все блоки остаются скрытыми независимо от определенного свойства display .
Теперь наведите курсор несколько раз для сравнение с первым блоком в демо. Задержались? Нажмите на первом блоке. Это должно сделать второй блок невидимым. Внутреннее значение это число отличное от нуля. Это происходит потому, что на элемент, несмотря на то, что он скрыт, можно влиять с помощью JavaScript .
4 метод, скроем при помощи: Position — (позиционирование)
Предположим, Вы хотите поработать с элементом, но не хотите чтобы это отразилось на макете веб-страницы. Никакое свойство, рассмотренное ранее, не могло справиться с этим должным образом. Единственное, что Вы можете сделать в этой ситуации — вынуть данный элемент их окна просмотра. Это действие не повлияет на макет веб — страницы и будет по прежнему активным.
Используя СSS можно сделать:
В предложенной демонстрации иллюстрируется как нужное перемещение скрывает элемент и работает в основном также как и в предыдущем примере:
Здесь основная задача — установить отрицательные крайние верхнее и нижнее значения максимально для долгого исчезновения с экрана нужного элемента. Одним из преимуществ (потенциальный недостаток) метода — это то, что содержимое — абсолютно позиционируемый элемент и читается с экрана.
Это вполне понятно, так как вы переместили элемент из окна просмотра и его не может увидеть пользователь.
Нельзя использовать данный метод на элементы, которые могли бы получить фокус, поскольку может привести неожиданным переходам, при фокусировании на данном элементе. Этот метод часто используется для создания пользовательских переключателей или кнопок радио.
5 метод, скрываем элемент с помощью: Clip-path — (скрепленный путь)
Eще одним из способов скрытие элементов — это скрепление их. Раньше это можно было сделать с помощью свойства clip , но это устаревшее свойство, гораздо современнее признано — clip-path .
Имейте ввиду, что свойство clip-path , которое используется ниже, сейчас может не поддерживаться в IE.
Если используете внешние файл SVG в ваших clip-path , поддерживание еще более ограничено (что не относится к нижеперечисленному). Свойство clip-path для скрытия элементов выглядит так:
Здесь можно посмотреть действие:
Если Вы наведете курсор на первый элемент, это повлияет на второй элемент, не смотря на то, что он скрыт свойством clip-path . Если Вы щелкните на элемент это выведет скрытый тип, чтобы показать наш элемент, которые были там вместе. Этот текст останется доступным для чтения с экрана и это свойство используется вместе с clip во многих сайтах на WordPress.
Даже, если скрытый элемент не видно, все элементы вокруг работают также и имеют первоначальные прямоугольные размеры. Имейте ввиду, что взаимодействие пользователя как при наведении так и при клике невозможно за пределами определенной области. В нашем случае это означает, что нет прямого взаимодействия пользователя со скрытым элементом. Это свойство может быть анимировано различными способами для создания новых эффектов.
Вывод:
В этой статье было рассмотрено 5 методов скрытия элементов с помощью CSS . Каждое свойство отличается друг от друга, и зная, что Вы хотите достичь, можете уже пользоваться конкретным свойством, что достаточно важно для веб — разработчиков.
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
- Некий элемент совершенно невидим и, более того, удалён из потока документа.
- Глазами элемент не увидеть, но он присутствует в документе и доступен для ассистивных технологий наподобие средств для чтения с экрана.
- Элемент видим, но скрыт от средств для чтения с экрана.
HTML5-атрибут hidden
Hidden — это логический HTML-атрибут, скрывающий элементы, которым он назначен. Когда браузер загружает страницу, он не выведет элементы с атрибутом hidden , за исключением тех случаев, когда видимость элементов будет включена вручную средствами CSS. Действие этого атрибута похоже на применение к элементу CSS-правила display: none .
Рассмотрим следующий пример:
Тут имеется разметка, задающая заголовок, изображение и описание. Изображение должно выводиться только в том случае, если ширина области просмотра превышает 400px . К элементу <img> я добавил атрибут hidden .
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Фрагмент веб-страницы
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
Тут у вас может появиться вопрос о том, почему бы просто не использовать display: none . Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden , мы можем быть уверены в том, что даже если CSS-код по какой-то причине не загрузился, элемент будет скрыт.
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Каждый элемент веб-страницы обладает неким значением свойства display , назначаемым ему по умолчанию. Это может быть inline-block , block , table и так далее. Для того чтобы скрыть элемент с помощью свойства display , мы можем воспользоваться конструкцией display: none . Если элемент скрыт с помощью этой конструкции, то вместе с ним будут скрыты и все его потомки.
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
«Поток документа» сравнивается здесь со стопкой книг. Если к синей книге будет применено свойство display: none , это будет означать, что её просто убрали из стопки. При этом пространство, которое раньше занимала эта книга, будет занято другими книгами. То же самое происходит и при скрытии HTML-элементов. Место, которое занимал бы скрытый элемент, занимают другие элементы, это влияет на расположение элементов в документе. В нашем примере это повлияло на положение книг в стопке.
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент <img> скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Здесь можно найти демонстрацию работы с изображением, скрытым средствами CSS. Если исследовать этот пример, открыв инструменты разработчика Chrome и посмотрев на вкладку Network , там можно увидеть соответствующий запрос.
Исследование страницы, содержащей скрытое изображение
▍Элемент style
Тут стоит упомянуть о том, что существуют HTML-элементы, свойство display которых по умолчанию установлено в значение none . Например, это элемент <style> , который может быть добавлен в тело HTML-страницы. Его свойство display можно изменить на block и сделать его видимым.
Вот HTML-код тела страницы:
Вот CSS, с помощью которого мы делаем элемент style видимым:
Подобный приём может быть полезен в том случае, если нужно, чтобы блок style был бы видимым и, кроме того, редактируемым. Для того чтобы сделать такой блок редактируемым, можно добавить к тегу style атрибут contenteditable=true .
Вот как это выглядит.
Видимый редактируемый блок style
→ Вот демо-версия этого примера
▍CSS-свойство display и доступность контента
При использовании свойства display: none элемент становится невидимым и, кроме того, недоступным для средств чтения с экрана.
CSS-свойство opacity
Установив CSS-свойство opacity в значение 0 , можно скрыть элемент и все вложенные в него элементы. Это свойство не наследуется. Однако это свойство скрывает элементы лишь от того, кто смотрит на страницу, а не от программ для чтения с экрана. Тут стоит сказать и о том, что элемент, значение opacity которого отличается от 1 , создаёт новый контекст наложения.
Синяя книга невидима, но место, которое она занимает, всё ещё зарезервировано
На предыдущем рисунке показано, что синяя книга становится невидимой для наблюдателя. Но место, которое она занимала, зарезервировано. Порядок расположения других книг в стопке не изменился. Сравните это с тем, к чему приводило использование display: none .
В CSS-коде использование свойства opacity выглядит так:
Если вернуться к нашему первому примеру и предположить, что мы хотим скрыть изображение с использованием свойства opacity , то результат будет таким, как показано ниже.
Изображение скрыто с использованием CSS-свойства opacity
Как видно, изображение всё ещё присутствует на странице, но его место ничем не занято. Оно скрыто лишь от наблюдателя, но никуда не девается со страницы. Мне, после публикации материала, подсказали, что свойство pointer-events: none | auto можно использовать для отключения событий мыши на элементах, скрытых с помощью свойства opacity: 0 . Это — важная идея, так как пользователя может запутать взаимодействие со скрытым элементом (щелчки по нему, наведение на него указателя мыши, выделение текста).
→ Вот демонстрация использования свойства opacity
▍CSS-свойство opacity и доступность контента
Элемент, скрытый с помощью opacity: 0 , остаётся доступным для средств чтения с экрана. Такой элемент может получить фокус при работе со страницей с помощью клавиатуры.
CSS-свойство visibility
Используя свойство visibility: hidden можно показывать или скрывать элементы, делая это так же, как мы делали с помощью opacity: 0 . Это не влияет на поток документа.
При использовании visibility: hidden книга исчезает, но её место остаётся незанятым
Обратите внимание на то, что синяя книга исчезла, но это не повлияло на расположение других книг в стопке.
Надо отметить, что когда visibility: hidden используется для родительского элемента, скрытыми оказываются и все его потомки, но если одному из потомков назначено свойство visibility: visible , то этот потомок будет видимым.
Стопка книг скрыта, но синяя книга сделана видимой
Вернёмся к нашему обычному примеру с заголовком, изображением и описанием. Перепишем его HTML-код так:
Стилизуем его с помощью следующего CSS-кода:
После этого посмотрим на то, чем страница, к которой подобная стилизация не применялась, будет отличаться от стилизованной страницы.
Вложенный элемент оказывается видимым
Здесь элементу <article> назначено CSS-свойство visibility: hidden . А если добавить свойство visibility: visible к элементу <img> — изображение окажется видимым. Опять же, дело тут в том, что рассматриваемое свойство применяется к потомкам элемента, но оно может быть переопределено в элементе-потомке.
→ Вот демонстрация работы со свойством visibility
▍CSS свойство visibility и доступность контента
При применении свойства visibility: hidden элемент оказывается скрытым. Он, кроме того, удаляется из дерева доступности и, в результате, его не замечают средства для чтения с экрана.
Скрытие элементов и позиционирование
Для того чтобы скрыть элемент, воздействовав на его позицию на странице, нужно вывести его за пределы видимой области страницы и установить его размеры (ширину и высоту) в 0 . В качестве примера использования подобной методики скрытия элементов можно привести ссылку, позволяющую быстро перейти к главному содержимому страницы. Рассмотрим следующее изображение.
Ссылка, скрытая за пределами области видимости страницы
Для того чтобы расположить элемент за пределами области видимости страницы, можно воспользоваться следующим CSS-кодом:
Значение top: -100% уведёт элемент из области просмотра на 100% её высоты. В результате элемент окажется совершенно невидимым. А вот если он получит фокус после того, как пользователь доберётся до него, используя клавиши на клавиатуре, этот элемент можно показать:
→ Вот демонстрация этой методики скрытия элементов
▍CSS-свойство position и доступность контента
Элемент, выведенный за пределы области просмотра, доступен для средств чтения с экрана, добраться до него можно и с помощью клавиатуры. Он лишь оказывается невидимым при обычной работе со страницей.
CSS-свойство clip-path
Если к элементу применяется CSS-свойство clip-path — оно позволяет описать область, определяющую то, какая часть элемента должна быть скрытой, а какая — видимой.
Область обрезки изображения
В предыдущем примере к тому, что в левой части рисунка затемнено, применено свойство clip-path . При применении этого свойства затемнённые фрагменты изображения исчезнут.
Для того чтобы посмотреть на это свойство в действии, воспользуемся инструментом clippy. Работа начинается со следующих значений clip-path , заданных в CSS и описывающих маску в виде многоугольника:
Эксперименты со свойством clip-path, область обрезки задаётся в виде многоугольника
Если все свойства polygon установлены в 0 — то изображение будет попросту скрыто. Область обрезки изображения можно задавать не только в виде многоугольника, но и в виде круга:
Вот как это выглядит.
Эксперименты со свойством clip-path, область обрезки задаётся в виде круга
Здесь можно поэкспериментировать с этим свойством.
▍CSS-свойство clip-path и доступность контента
Элемент, к которому применено свойство clip-path , скрыт лишь визуально. До него можно добраться с помощью клавиатуры, он доступен для программ чтения с экрана.
Манипуляции с цветом текста и с размером шрифта
Хотя скрытие текста путём изменения его цвета или размеров шрифта распространено не так широко, как ранее рассмотренные методики скрытия элементов, в некоторых случаях это может пригодиться.
▍Настройка прозрачности цвета
Если использовать для текста прозрачный цвет, то этот текст окажется невидимым. Это может оказаться полезным при создании кнопок, на которых используются только значки.
▍Настройка размера шрифта
Кроме того, если установить размер шрифта в значение 0 , это тоже позволит скрыть текст.
Рассмотрим следующий пример. Здесь имеется кнопка, структура которой задана следующим HTML-кодом:
Наша цель заключается в том, чтобы скрыть текст этой кнопки, но при этом оставить его доступным для ассистивных технологий. Для того чтобы это сделать я воспользовался следующим CSS-кодом:
Теперь текст оказывается скрытым. Надо отметить, что эта методика будет работать и без изменения цвета текста. Но я, для того, чтобы разобрать разные варианты скрытия текста, изменил тут и цвет.
1. Содержимое кнопки выровнено по центру. 2. Тексту назначен прозрачный цвет. 3. Размер шрифта установлен в 0
→ Вот демонстрация для этого примера
HTML-атрибут aria-hidden
При добавлении к элементу атрибута aria-hidden этот элемент удаляется из дерева доступности. Это позволяет облегчить работу со страницей пользователям, применяющим программы для чтения с экрана. Обратите внимание на то, что элемент с таким атрибутом видим на странице. Он невидим только для ассистивных технологий.
В этом примере имеется кнопка Menu со значком и меткой. Атрибут aria-hidden=»true» позволяет скрыть эту кнопку от программ для чтения с экрана.
Этот атрибут, в соответствии с материалами MDN, находит применение в следующих сценариях:
- Скрытие декоративных элементов наподобие значков и изображений.
- Скрытие дублирующегося текста.
- Скрытие свёрнутых элементов или элементов, находящихся за пределами экрана.
▍Атрибут aria-hidden и доступность контента
Этот атрибут создан специально для того, чтобы скрывать контент от ассистивных технологий. Но элементы при этом видны на странице, с ними можно взаимодействовать при помощи клавиатуры.
Анимация и интерактивность
| Метод скрытия элементов | Доступность | Возможность работы с помощью клавиатуры | Поддержка CSS-переходов |
| HTML-атрибут hidden | Нет | Нет | Нет |
| CSS-свойство display | Нет | Нет | Нет |
| CSS-свойство opacity | Да | Да | Да |
| CSS-свойство visibility | Нет | Нет | Да |
| CSS-свойство clip-path | Да | Да | Да |
Если нужно анимировать скрытый элемент, например, мобильную навигационную панель, этот элемент должен быть создан с учётом его доступности. Ниже мы рассмотрим неудачные и удачные примеры работы с элементами с точки зрения доступности. Это позволит нам избежать ошибок, которые усложняют работу с сайтами для пользователей, применяющих ассистивные технологии.
▍Анимация меню: неправильный подход
У нас имеется меню, которое, при раскрытии, должно выезжать из-за пределов экрана. Легче всего это сделать с помощью следующего CSS-кода:
Благодаря этому коду меню будет разворачиваться и сворачиваться, основываясь на классе .active , который будет добавлен с помощью следующего JavaScript-кода:
Вот как выглядит работа с таким меню.
Выезжающее меню в действии
Может показаться, что мы добились хороших результатов, создавая это меню, но тут допущена одна большая ошибка. Использование свойства opacity: 0 не уберёт навигационные элементы из дерева доступности. Даже если меню на странице не видно, до него можно добраться с помощью клавиатуры, с ним смогут работать средства для чтения с экрана. Для того чтобы не путать пользователей, пользующихся такими средствами, меню нужно скрыть и от этих средств.
Вот дерево доступности рассматриваемой страницы, построенное средствами вкладки Accessibility инструментов разработчика Chrome.
Дерево доступности неудачно спроектированного скрытого меню
Дерево доступности — это, в двух словах, список всего того, к чему могут получить доступ пользователи, применяющие средства для чтения с экрана. В нашем случае им доступны все пункты меню, невидимого на экране. Здесь можно обнаружить две проблемы, которые нам нужно решить:
- Нужно сделать так, чтобы до скрытых элементов меню нельзя было добраться с помощью клавиатуры.
- Нужно, чтобы средства для чтения с экрана не видели бы скрытое меню и не читали бы соответствующее содержимое.
Программа для чтения с экрана видит то, чего она видеть не должна
→ Вот рабочий вариант этого примера
Займёмся исправлением вышеозначенных ошибок.
▍Анимация меню: исправление ошибок
Для того чтобы улучшить работу меню и исправить ошибки, нужно воспользоваться CSS-свойством visibility: hidden . Это позволит и скрыть меню со страницы, и не дать работать с ним средствам для чтения с экрана. Вот CSS-код, исправляющий проблему:
После применения этого кода свёрнутое меню исчезнет с экрана и из «поля зрения» ассистивных технологий. Снова исследуем страницу с помощью VoiceOver.
Программа для чтения с экрана не видит ничего лишнего
→ Вот проект, иллюстрирующий пример
Элементы checkbox собственной разработки
Элемент checkbox
Стандартные флажки, элементы <input> типа checkbox , сложно настраивать. Если нам нужно их настраивать — это значит, что нам понадобится создать собственную реализацию подобного элемента. Взглянем на его базовый HTML-код:
Для настройки флажка требуется возможность скрывать элемент с учётом нужд ассистивных технологий. Для того чтобы это сделать, нужно пользоваться свойством position , а также и другими свойствами. Вот CSS-класс, который можно назвать sr-only или visually-hidden , который скрывает элемент лишь визуально, но оставляет доступным для средств чтения с экрана и для клавиатурной навигации.
Благодаря использованию подобного класса элемент checkbox собственной разработки не теряет доступности. Вот более подробный рассказ о таком элементе. А вот — демонстрация работы с подобным элементом.
Скрытие содержимого от программ для чтения с экрана
▍Скрытие некоторых символов
Заголовок, в котором нужно скрыть смайлик
В заголовке, показанном выше, использован смайлик. Если этот смайлик не скрыть от ассистивных технологий, то средство для чтения с экрана, читая заголовок, произнесёт следующее:
Разные смайлики имеют разные текстовые описания, озвучиваемые средствами для чтения с экрана. Представьте себе ощущения пользователя, который, заглянув на страницу, услышит нечто подобное. Он, наверняка, почувствует, что с этой страницей что-то не так. Для того чтобы не перегружать пользователей ненужной информацией, тут стоит воспользоваться атрибутом aria-hidden . А именно, я поместил смайлик в тег <span> с атрибутом aria-hidden=»true» и скрыл тем самым его от средств для чтения с экрана.
Код страницы изменился не сильно, но это маленькое изменение позволит сильно улучшить удобство работы со страницей для пользователей, применяющих ассистивные технологии.
▍Скрытие кнопок
Скрытие кнопки
В Twitter есть кнопка с меткой See New Tweets , которая скрыта от средств для чтения с экрана с помощью aria-hidden . Эта кнопка выводится на странице (оставаясь скрытой для ассистивных технологий) при появлении новых твитов.
▍Скрытие декоративных элементов
Скрытый декоративный элемент
Точка между именем пользователя и датой носит декоративный характер. В результате эта точка имеет атрибут aria-hidden=»true» , благодаря чему она не «озвучивается» средствами для чтения с экрана.
Итоги
Здесь мы рассмотрели различные методики скрытия элементов веб-страниц и проанализировали эти методики с точки зрения доступности контента. Надеемся, этот материал поможет вам в разработке проектов, с которыми будет удобно работать самым разным категориям пользователей.
Уважаемые читатели! Какими методами скрытия элементов веб-страниц вы пользуетесь?
visibility
Свойство visibility скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы <table> (en-US).
Интерактивный пример
Чтобы скрыть и удалить элемент из разметки, установите свойству display значение none , вместо использования visibility .
Синтаксис
Свойство visibility указывается в качестве одного из значений ниже.
Значения
Значение по умолчанию, элемент виден.
Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible . Элемент не может получить focus (например, при навигации с помощью tabindex).
* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью display : none применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.
- Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
- Для других элементов collapse обрабатывается также, как hidden
Синтаксис
Интерполяция
Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible , интерполируется как дискретный шаг, где значения временной функции от 0 до 1 для visible и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier() со значениями вне [0, 1]) ближе к конечной точке.
10 способов спрятать элементы на CSS
Существует множество способов скрыть элементы на странице — и все они по-разному влияют на доступность, разметку, анимации, производительность и обработку событий.
Анимации
Некоторые CSS-свойства принимают только два крайних значения — все или ничего. Элемент либо полностью видим, либо полностью невидим, а промежуточных значений не существует.
Другие свойства, например, прозрачность, могут принимать значения в определенном диапазоне. К таким свойствам можно применить CSS-анимации для плавного изменения.
Помните, что анимация может вызывать дезориентацию, мигрень, судороги или другой физический дискомфорт у некоторых людей. Поэтому всегда используйте медиа-запрос prefers-reduced-motion, для учета пользовательских предпочтений.
Доступность
Все описанные ниже приемы обеспечивают визуальное скрытие элемента на странице, но они не всегда прячут его от ассистивных технологий. Например, скринридеры продолжают читать текст, даже если вы уменьшите его размер до крошечного и сделаете цвет прозрачным.
Для изменения этого поведения могут потребоваться дополнительные CSS-свойства или ARIA-атрибуты, вроде aria-hidden=»true» .
Обработка событий
Сокрытие элемента не всегда означает, что он перестает быть интерактивным. Иногда на невидимые блоки можно кликнуть, а значит, будут срабатывать привязанные к ним обработчики событий.
Производительность
После того как браузер загрузит и распарсит HTML DOM и CSSOM, страница рендерится (и перерендеривается) в три этапа:
- Layout: генерируется геометрия и позиция каждого элемента;
- Paint: отрисовываются пиксели каждого элемента;
- Composition: слои элементов располагаются в правильном порядке друг над другом.
Эффекты, которые вызывают только композиционные изменения, определенно предпочтительнее всех других, так как требуют меньше действий. В некоторых случаях браузер также может использовать аппаратное ускорение.
Способ #1. opacity и filter: opacity()
Свойства opacity: N и filter: opacity(N) могут принимать значения в диапазоне от 0 до 1 (или от 0% до 100%), где 0 — это полная прозрачность элемента, а 1 — полная непрозрачность.
Между этими двумя свойствами в современных браузерах практически нет разницы. filter позволяет использовать сразу несколько эффектов, например, прозрачность одновременно с размытием или контрастностью.
Свойство opacity можно анимировать — и это очень хороший подход с точки зрения производительности.
Помните, что элементы с opacity: 0 остаются на странице и на них могут срабатывать пользовательские события.
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Хорошая. В IE свойство opacity поддерживает только значения в диапазоне от 0 до 1 |
| Доступность скрытого элемента | При значении 0 или 0% контент элемента недоступен |
| Вызывает изменение макета | Нет |
| Перерендеринг | Composition |
| Производительность | Хорошая, может использоваться аппаратное ускорение |
| Покадровая анимация | Возможна |
| Срабатывание событий на скрытом элементе | Да |
Способ #2. alpha-канал
Свойство opacity влияет на элемент целиком, но вы можете также изменять видимость отдельных свойств: цвета ( color ), фона ( background-color ) или рамки ( border-color ). Чтобы скрыть их, используйте цвет в формате rgba (или hsla) и установите значение альфа-канала равным нулю, например, rgba(0, 0, 0, 0) .
Каждое свойство можно анимировать отдельно для создания интересных эффектов.
Эту технику нельзя применить к фоновым изображения (кроме тех, которые созданы с помощью CSS-градиентов).
Способы управления альфа-каналом:
- Ключевое слово transparent . Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
- rgba(r, g, b,a) : красный, зеленый, синий и альфа-канал.
- hsla(h, s, l, a) : оттенок, насыщенность, светлота и альфа-канал.
- HEX-формат: #RRGGBBAA или #RGBA
Способ #3. transform
Свойство transform позволяет передвигать ( translate ), масштабировать ( scale ), вращать ( rotate ) или искажать ( skew ) элемент. Оно позволяет также его спрятать. Например, можно радикально уменьшить масштаб ( scale(0) ) или передвинуть блок за пределы вьюпорта ( translate(-999px, 0px) ).
CSS-трансформации предлагают великолепную производительность с использованием аппаратного ускорения. Трансформируемый элемент перемещается на отдельный слой и может изменяться, не затрагивая другие слои. Пространство, занимаемое блоком до изменения, остается на странице, но полностью скрытый элемент уже недоступен для взаимодействия.
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Хорошая |
| Доступность скрытого элемента | Контент остается доступным |
| Вызывает изменение макета | Нет, сохраняются оригинальные размеры блока |
| Перерендеринг | Composition |
| Производительность | Хорошая, может использоваться аппаратное ускорение |
| Покадровая анимация | Возможна |
| Срабатывание событий на скрытом элементе | Нет |
Способ #4. clip-path
Свойство clip-path определяет область обрезки — часть блока, которая будет видима на странице. Если эта область занимает 0 пикселей, элемент будет скрыт: clip-path: circle(0) .
С помощью этого свойства можно создавать интереснейшие анимации, но поддерживается оно только в современных браузерах.
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Только современные браузеры |
| Доступность скрытого элемента | Контент остается доступным для некоторых приложений |
| Вызывает изменение макета | Нет, сохраняются оригинальные размеры блока |
| Перерендеринг | Paint |
| Производительность | Допустимая |
| Покадровая анимация | Возможна в современных браузерах |
| Срабатывание событий на скрытом элементе | Нет |
Способ #5. visibility
Свойство visibility принимает одно из двух значений: visible или hidden . Для ячеек таблицы доступно также значение collapse .
Пространство, занимаемое элементом, остается на странице (кроме collapse ).
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Отличная |
| Доступность скрытого элемента | Контент элемента недоступен |
| Вызывает изменение макета | Нет (кроме collapse ) |
| Перерендеринг | Composition (кроме collapse ) |
| Производительность | Хорошая |
| Покадровая анимация | Невозможна |
| Срабатывание событий на скрытом элементе | Нет |
Способ #6. display
display , вероятно, самое популярное свойство для скрытия элементов на странице. Значение none эффективно удаляет блок, как будто его никогда и не существовало в DOM.
Однако в большинстве случаев display: none — самый плохой способ спрятать что-то. Это свойство нельзя анимировать, и оно вызывает перерисовку страницы (layout), если только элемент не вырван из общего потока документа ( position: absolute ) или если не используется новое свойство contain.
Кроме того, свойство display может принимать множество значений ( block , inline , flex , grid , table , …). Если вы сбрасываете его до значения none , то вернуть затем правильное отображение может быть затруднительно (может помочь значение unset).
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Отличная |
| Доступность скрытого элемента | Контент элемента недоступен |
| Вызывает изменение макета | Да |
| Перерендеринг | Layout |
| Производительность | Плохая |
| Покадровая анимация | Невозможна |
| Срабатывание событий на скрытом элементе | Нет |
Способ #7. Атрибут hidden
HTML-атрибут hidden можно добавить к любому элементу:
К нему будут применены дефолтные стили браузера:
Эта техника имеет те же преимущества и недостатки, что и предыдущая, но она может быть удобна для использования в различных CMS, где нет возможности влиять на стиль контента (но можно редактировать HTML-код).
Способ #8. Абсолютное позиционирование
Свойство position позволяет переместить элемент из его исходной ( static ) позиции в общем потоке документа с помощью свойств top , bottom , left и right . Абсолютно спозиционированный элемент ( position: absolute ) можно вынести за пределы вьюпорта, например, установив ему свойство left: -999px (значение может быть другим).
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Отличная, кроме position: sticky |
| Доступность скрытого элемента | Контент элемента остается доступным |
| Вызывает изменение макета | Да, при изменении позиционирования |
| Перерендеринг | Зависит от ситуации |
| Производительность | При правильном использовании неплохая |
| Покадровая анимация | Возможна для свойств top , bottom , left и right |
| Срабатывание событий на скрытом элементе | Да, но если элемент вынесен за пределы вьюпорта, взаимодействие с ним затруднительно |
Способ #9. Перекрытие другим элементом
Элемент можно спрятать, разместив поверх него другой элемент, совпадающий по цвету с фоном страницы. В примере для перекрытия используется псевдоэлемент ::after , который размещается поверх второго блока:
Эта техника требует большего количества кода, чем остальные. В некоторых случаях ее применение может быть невозможным (сложный или неизвестный фон).
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Отличная |
| Доступность скрытого элемента | Контент элемента остается доступным |
| Вызывает изменение макета | Нет, если используется абсолютное позиционирование |
| Перерендеринг | Paint |
| Производительность | При правильном использовании неплохая |
| Покадровая анимация | Возможна |
| Срабатывание событий на скрытом элементе | Да, если для перекрытия используется псевдоэлемент или дочерний элемент блока |
Способ #10. Уменьшение размеров
Элемент можно спрятать, уменьшив его размеры с помощью свойств width , height , padding , border-width и/или font-size . При необходимости также можно использовать свойство overflow: hidden , чтобы избежать переполнения уменьшенного элемента контентом.
Эта техника позволяет создавать интересные анимационные эффекты, но ее производительность существенно хуже, чем у свойства transform .
| Метрика | Влияние |
|---|---|
| Браузерная поддержка | Отличная |
| Доступность скрытого элемента | Контент элемента остается доступным |
| Вызывает изменение макета | Да |
| Перерендеринг | Layout |
| Производительность | Плохая |
| Покадровая анимация | Возможна |
| Срабатывание событий на скрытом элементе | Нет |
Выбор техники
Многие годы мы не раздумывая использовали display: none для скрытия элементов, однако у этого способа есть множество альтернатив — более гибких и производительных. Эта техника остается валидной, но в большинстве случаев лучше использовать другое решение. В первую очередь обратите особое внимание на максимально оптимизированные свойства opacity и transform .