Скрытие элементов средствами 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 . Например:
Логично предположить, что спрятать таким образом элемент от скрин-ридеров нельзя, да и в целом не рекомендуется применять этот вариант скрытия, поскольку есть более надежные и правильные способы, описанные выше. Однако в некоторых нетривиальных ситуациях веб-разработчики всё же используют его.
Далее в учебнике: CSS Grid Layout — будущее уже здесь.
Пять способов скрыть элементы в CSS
Есть несколько способов скрыть элемент в CSS. Вы можете скрыть его, установив opacity на 0 , visibility на hidden , display на none или установив крайние значения для абсолютного позиционирования.
Задумывались ли вы, почему у нас так много способов скрыть элемент, когда кажется, что все они делают одно и то же? Все эти методы на самом деле немного отличаются друг от друга, и это различие диктует, какой из них следует использовать в конкретной ситуации. В этом руководстве будут рассмотрены незначительные различия, которые необходимо учитывать при сокрытии элемента любым из перечисленных выше способов.
помутнение
opacity свойства предназначена для установки прозрачности элемента. Он не был разработан, чтобы каким-либо образом изменить ограничивающую рамку элемента. Это означает, что установка непрозрачности на ноль только скрывает элемент визуально. Элемент по-прежнему занимает свою позицию и влияет на макет веб-страницы. Он также будет реагировать на взаимодействие с пользователем.
.hide
Если вы намереваетесь использовать свойство opacity чтобы скрыть элемент от программ чтения с экрана — к сожалению, это невозможно. Элемент и весь его контент будут читаться программами чтения с экрана, как и все остальные элементы на веб-странице. Другими словами, элемент ведет себя так же, как если бы он был непрозрачным.
Следует также отметить, что свойство opacity можно анимировать и использовать для создания великолепных эффектов. Любой элемент с opacity меньше 1 также создаст новый контекст стека.
Взгляните на следующую демонстрацию:
Когда вы наводите курсор на скрытый второй блок, элемент плавно переходит из состояния полной прозрачности в состояние полностью непрозрачного. Блок также имеет cursor pointer чтобы показать, что с ним можно взаимодействовать.
видимость
Следующее свойство в нашем списке — visibility . Установка его hidden скрывает наш элемент. Как и свойство opacity , скрытый элемент будет по-прежнему влиять на макет нашей веб-страницы. Единственное отличие состоит в том, что на этот раз он не будет захватывать взаимодействие с пользователем, если он скрыт от пользователя. Кроме того, элемент также будет скрыт от программ чтения с экрана.
Это свойство также может анимироваться, если начальное и конечное состояния имеют разные значения. Это гарантирует, что переход между состояниями видимости может быть плавным, а не резким.
.hide
Эта демонстрация показывает, как visibility отличается от opacity :
Обратите внимание, что потомки элемента со hidden visibility все еще могут быть видимыми, если их свойство visibility явно установлено visible . Попробуйте навести курсор мыши только на скрытый элемент, а не на абзац внутри, вы увидите, что курсор не меняется на указатель. Более того, если вы попытаетесь нажать на элемент, ваши клики также не будут зарегистрированы.
Тег
внутри нашего прежнему будет захватывать все события мыши. Как только вы наводите курсор на текст, сам становится видимым и начинает регистрировать события.
дисплей
Свойство display скрывает элемент в истинном смысле слова. Если для параметра display значение none это гарантирует, что блочная модель не будет создана вообще. Используя это свойство, после скрытия элемента не остается пустого пространства. Не только это, но и любое прямое взаимодействие с пользователем будет невозможно, пока на display не установлено none . Более того, программы чтения с экрана также не будут читать содержимое элемента. Это как если бы элемент не существовал.
Все потомки нашего элемента тоже будут скрыты. Это свойство нельзя анимировать, поэтому переход между различными состояниями всегда будет резким.
Обратите внимание, что элемент по-прежнему доступен через DOM. Вы сможете манипулировать им, как и любым другим элементом.
.hide
Посмотрите на CSS этой демонстрации:
Вы увидите, что у второго блока есть абзац со свойством display установленным на block но этот абзац все еще невидим. Это еще одно различие между visibility: hidden и display: none . В первом случае любой потомок, который явно устанавливает visibility visible , станет видимым, но это не то, что происходит с display . Все потомки остаются скрытыми независимо от значения их собственного свойства отображения.
Теперь наведите несколько раз на первый блок в демоверсии. Готов завис? Нажмите на этот первый блок. Это должно сделать второй блок видимым. Число внутри теперь должно быть числом, отличным от нуля. Это связано с тем, что этот элемент, даже если он скрыт от пользователей, все же можно использовать с помощью JavaScript.
Позиция
Предположим, у вас есть элемент, с которым вы хотели бы взаимодействовать, но вы не хотите, чтобы он влиял на макет вашей веб-страницы. Никакое свойство до этого момента не может справиться с этой ситуацией должным образом. Единственное, что вы можете сделать в этой ситуации, это переместить элемент из области просмотра. Таким образом, это не повлияет на макет и все равно будет действовать. Вот CSS для этого:
.hide
Следующая демонстрация иллюстрирует, как абсолютное позиционирование скрывает элементы и работает так же, как и предыдущая демонстрация:
Основная идея здесь состоит в том, чтобы установить отрицательное верхнее и левое значения достаточно высоко, чтобы элемент больше не был виден на экране. Одно из преимуществ (или потенциального недостатка) этого метода заключается в том, что контент абсолютно позиционированного элемента может быть прочитан программами чтения с экрана. Это вполне понятно, потому что вы только переместили элемент из области просмотра, чтобы пользователи не могли его видеть.
Вы должны избегать использования этого метода, чтобы скрыть любые элементы, которые могут получить фокус, потому что это приводит к неожиданному переходу, когда пользователь фокусируется на этом элементе. Этот метод часто используется для создания пользовательских флажков или переключателей.
Clip-путь
Еще один способ скрыть элементы — это обрезать их. Раньше это можно было сделать с помощью свойства clip но оно устарело в пользу лучшего свойства, называемого clip-path . Нитиш Кумар недавно представил свойство clip-path здесь, в SitePoint, так что не стесняйтесь проверить его для более расширенного использования свойства!
Имейте в виду, что свойство clip-path используется ниже, еще не полностью поддерживается в IE или Edge . При использовании внешних файлов SVG для вашего clip-path , поддержка еще более ограничена (что не применимо ниже) . Свойство clip-path при использовании для скрытия элемента выглядит так:
.hide
Вот демонстрация, чтобы показать это в действии:
Если вы наведите курсор мыши на первый элемент, он все равно сможет воздействовать на второй элемент, даже если он скрыт через clip-path . Если вы щелкнете по элементу, он удалит скрытый класс, чтобы показать наш элемент, который был там все время. Этот текст по-прежнему читается программами чтения с экрана и является решением, используемым (наряду с clip ) на многих сайтах WordPress для чтения с экрана.
Даже если наш элемент больше не виден, элементы вокруг него ведут себя так, как если бы он имел свои первоначальные прямоугольные размеры. Имейте в виду, что взаимодействие с пользователем, например при наведении или щелчке, также невозможно за пределами области обрезки. В нашем случае это означает, что пользователи не смогут напрямую взаимодействовать со скрытым элементом. Кроме того, это свойство может быть анимировано различными способами для создания новых эффектов.
Вывод
В этом уроке мы рассмотрели пять различных способов скрытия элементов с помощью CSS. Каждый из них так или иначе отличается друг от друга. Знание того, чего вы хотите достичь, может помочь вам решить, какое свойство использовать, и со временем станет второстепенным для веб-разработчиков. Если у вас есть какие-либо вопросы относительно методов скрытия элементов, сообщите нам об этом в комментариях.
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 можно добавить к любому элементу:
Hidden content
К нему будут применены дефолтные стили браузера:
[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 .
visibility
Чтобы скрыть и удалить элемент из разметки, установите свойству display значение none , вместо использования visibility .
Синтаксис
/* Значения */ visibility: visible; visibility: hidden; visibility: collapse; /* Глобальные значения */ visibility: inherit; visibility: initial; visibility: unset;
Свойство visibility указывается в качестве одного из значений ниже.
Значения
Значение по умолчанию, элемент виден.
Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible . Элемент не может получить focus (например, при навигации с помощью tabindex).
* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью display : none применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.
- Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
- Для других элементов collapse обрабатывается также, как hidden
Синтаксис
visibility =
visible | (en-US)
hidden | (en-US)
collapse
Интерполяция
Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible , интерполируется как дискретный шаг, где значения временной функции от 0 до 1 для visible и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier() со значениями вне [0, 1]) ближе к конечной точке.
Примеры
Базовый пример
HTML
p class="visible">Первый параграф виден.p> p class="not-visible">Второй параграф не виден.p> p class="visible"> Третий параграф также виден. Заметь, второй параграф занимает место. p>
CSS
.visible visibility: visible; > .not-visible visibility: hidden; >
Пример с таблицей
HTML
table> tr> td>1.1td> td class="collapse">1.2td> td>1.3td> tr> tr class="collapse"> td>2.1td> td>2.2td> td>2.3td> tr> tr> td>3.1td> td>3.2td> td>3.3td> tr> table>
CSS
.collapse visibility: collapse; > table border: 1px solid red; > td border: 1px solid gray; >
Соображения доступности
Использование visibility со значением hidden на элементе удалит его из дерева доступности. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.
Примечания
- Поддержка visibility:collapse отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать visibility:hidden со столбцами и строками.
- visibility:collapse может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока visibility:visible не указан явно для вложенной таблицы.
Спецификация
| Specification |
|---|
| CSS Display Module Level 3 # visibility |
| Начальное значение | visible |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | видимость |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 18 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.