Как скрыть элемент в html

Как скрыть элемент страницы на JavaScript

Довольно часто при вёрстке страниц сайта требуется скрыть элемент от просмотра клиентом. В принципе существуют несколько способов решения задачи: например, с помощью CSS поместить содержимое в блок нулевых размеров или спрятать блок под видимый слой. Подобную задачу можно с лёгкостью решить и на javascript используя стиливое свойство display .

//Для установки блокировки элемента document.getElementById(id).style.display = "block" //Для снятия блокировки элемента document.getElementById(id).style.display == "none"

Переключатель скрыть — показать блок или элемент.

При вызове приведённой ниже функции и передачей в неё имя идентификатора элемента, проверяется статус его блокировки и в зависимости от этого устанавливается значение свойства display — «block» или «none».

Дата публикации: 2019-04-24

Как скрыть содержимое от скринридеров

Как скрыть содержимое страницы от скринридеров и других вспомогательных технологий.

Время чтения: 6 мин

Открыть/закрыть навигацию по статье

Кратко
ARIA-атрибут aria-hidden
Классы .visually-hidden, .sr-only, .off-screen
Свойства display: none и visibility: hidden
Атрибут hidden
Дополнительные ссылки

На практике

Татьяна Фокина советует

Какая разница между hidden, aria-hidden=»true», role=»presentation» и role=»none»?
Опишите методы, с помощью которых можно скрыть контент: от всех пользователей, только от пользователей скринридеров, только от зрячих пользователей.

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Когда может понадобиться скрыть контент только для пользователей скринридеров? К примеру, когда на странице сайта часто повторяются декоративные элементы — логотип, иконки и подобное. Повторяющийся контент не помогает пользователям программ чтения с экрана, так что его можно не показывать им.

Бывают ситуации, когда информация или функции элемента понятны визуально, но могут быть неочевидны для пользователей программ чтения с экрана. В этом случае можно сделать так, чтобы скринридер читал содержимое, но при этом оно оставалось невидимым для зрячих пользователей. Например, название кнопки со значком лупы рядом со строкой поиска.

Существует несколько способов скрытия содержимого в зависимости от целей.

ARIA-атрибут aria — hidden

Скопировать ссылку «ARIA-атрибут aria-hidden» Скопировано

Можно использовать атрибут aria — hidden со значением true , чтобы скрыть содержимое от программ чтения с экрана, но оставить его видимым на странице.

 Этот текст виден на странице, но скрыт от скринридера. p aria-hidden="true">Этот текст виден на странице, но скрыт от скринридера.p>

Будьте осторожны с role = «presentation» и aria — hidden = «true» . Избегайте использования этих атрибутов на видимых элементах, которые находятся в порядке фокуса. Роль presentation удаляет семантику элемента. Интерактивный элемент останется в порядке фокуса даже со сброшенной семантикой. В этом случае пользователи скринридеров смогут на нём сфокусироваться, но не узнают роль элемента.

Свойство aria — hidden скрывает элемент от скринридеров и других вспомогательных технологий, но не скрывает его визуально. Если используете этот ARIA-атрибут на неинтерактивном элементе с вложенным интерактивным, то вложенный элемент унаследует этот атрибут. Это тоже приведёт к проблемам с доступностью для вспомогательных устройств.

Классы .visually — hidden , .sr — only , .off — screen

Скопировать ссылку «Классы .visually-hidden, .sr-only, .off-screen» Скопировано

Чтобы скрыть контент визуально, но оставить к нему доступ для вспомогательных технологий, можно использовать специальные CSS-стили для визуального скрытия содержимого, которое прочтёт программа чтения с экрана. Для таких стилей обычно используют классы .visually — hidden , .vh или .sr — only . Так как контент с такими стилями по-прежнему является частью содержимого страницы, скринридеры будут его читать.

.sr — only означает «только для чтения с экрана», хотя имя класса на самом деле не имеет значения.

  clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;

 Этот текст скрыт визуально, но доступен для скринридеров. p class="sr-only">Этот текст скрыт визуально, но доступен для скринридеров.p>

Свойство clip устарело, но его можно использовать для браузеров, которые не поддерживают более новое свойство clip — path .
Для класса, который скрывает содержимое визуально, используют набор свойств для сжатия элемента до квадрата размером 1 пиксель и абсолютное позиционирование, чтобы удалить элемент из обычного потока документа.

Давайте используем .sr — only в реальном примере с кнопкой, у которой вместо текста иконка.

 Поиск:   Искать на странице  aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 17 17">  label for="search">Поиск:label> input id="search" type="text"> button class="button"> span class="sr-only">Искать на страницеspan> svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 17 17"> svg> button>

В демке aria — hidden : true добавлен для того, чтобы скринридер не озвучивал код SVG и не запутывал пользователя.

Обратите внимание на то, что свойства width : 0px и height : 0px удаляют элементы из потока страницы, поэтому скринридеры их не прочитают.

Чтобы предоставить скринридеру доступ к элементу, но оставить его скрытым визуально, можно так же использовать атрибут aria — label . Атрибут подойдёт для интерактивных элементов, таких как ссылки, кнопки, а ещё для элементов форм, например input . Однако aria — label не всегда хорошо поддерживается скринридерами для статических элементов. Не забывайте переводить содержимое атрибута, если поддерживаете на сайте несколько языков.

Другой способ скрыть содержимое от просмотра — вывести его за пределы видимой области просмотра браузера.

 .off-screen  left: -100vw; position: absolute;> .off-screen  left: -100vw; position: absolute; >

Свойство position : absolute сообщает браузеру, что нужно удалить элемент из потока страницы и расположить по заданным координатам. Свойство left : — 100vw перемещает содержимое на одну ширину экрана влево.

Свойства display : none и visibility : hidden

Скопировать ссылку «Свойства display: none и visibility: hidden» Скопировано

Эти стили можно применить, если нужно скрыть контент от всех пользователей. Содержимое визуально удаляется со страницы и игнорируется программами чтения с экрана. Хотя оба свойства применяются для одной цели, они ведут себя немного по-разному:

visibility : hidden скрывает содержимое тега, но оставляет элемент в обычном потоке страницы таким образом, что он по-прежнему занимает место.
display : none полностью удаляет элемент из документа. Он не занимает места, хотя всё ещё находится в исходном HTML-коде.

Не используйте эти стили CSS, если хотите, чтобы содержимое читалось программой чтения с экрана.

   Этот текст виден всем пользователям. Этот текст скрыт, но элемент занимает место в потоке. Этот текст снова скрыт и не занимает место на странице.  article> p class="visibility-visible">Этот текст виден всем пользователям.p> p class="visibility-hidden">Этот текст скрыт, но элемент занимает место в потоке.p> p class="visibility-none">Этот текст снова скрыт и не занимает место на странице.p> article>

 .visibility-hidden  visibility: hidden;> .visibility-none  display: none;> .visibility-hidden  visibility: hidden; > .visibility-none  display: none; >

Атрибут hidden

Скопировать ссылку «Атрибут hidden» Скопировано

HTML-атрибут hidden работает как display : none . Если добавить атрибут к элементу, он визуально скроется со страницы и не будет занимать место, как-будто его совсем нет.

 Этот текст не виден на странице и не виден для скринридера. p hidden>Этот текст не виден на странице и не виден для скринридера.p>

Не используйте атрибут hidden , если хотите скрыть контент только визуально. Элемент с hidden будет скрыт от всех, включая скринридеры.

Дополнительные ссылки

Скопировать ссылку «Дополнительные ссылки» Скопировано

Hiding content for screen readers, WebAIM.
Hide and show items inclusively, W3C.

На практике

Скопировать ссылку «На практике» Скопировано

Татьяна Фокина советует

Скопировать ссылку «Татьяна Фокина советует» Скопировано

�� По идее, скрытый контент с помощью класса .visually — hidden не влияет на поисковую выдачу в Google и не нарушает правила, если делаете это для улучшения доступности. Однако наверняка знать не может никто кроме самого Google.

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Какая разница между hidden , aria — hidden = «true» , role = «presentation» и role = «none» ?

Скопировать ссылку «Какая разница между hidden, aria-hidden=»true», role=»presentation» и role=»none»?» Скопировано

Скопировать ссылку «Матвей Романов отвечает» Скопировано

hidden — это HTML-атрибут, который предназначен для скрытия элемента на странице. Это означает, что элемент не будет отображаться в пользовательском интерфейсе и скроется от вспомогательных технологий, но он все ещё существует в DOM.
aria — hidden = «true» — это атрибут ARIA (Accessible Rich Internet Applications), который используется для указания, что элемент должен быть скрыт от вспомогательных технологий, таких как скринридеры. Это означает, что элемент не будет доступен для слушателей событий или считывания содержимого вспомогательными технологиями, но он все ещё виден в пользовательском интерфейсе.
role = «presentation» — это ARIA-атрибут, который указывает, что элемент является частью представления или дизайна и не имеет никакой роли в вспомогательных технологиях. Это означает, что роль элемента будет игнорироваться такими технологиями.
role = «none» — это синоним role = «presentation» , который тоже указывает, что элемент не имеет роли для вспомогательных технологий. Это означает, что роль элемента не будет доступна для слушателей событий или механизмов навигации вспомогательными технологиями.

Опишите методы, с помощью которых можно скрыть контент: от всех пользователей, только от пользователей скринридеров, только от зрячих пользователей.

Скопировать ссылку «Опишите методы, с помощью которых можно скрыть контент: от всех пользователей, только от пользователей скринридеров, только от зрячих пользователей.» Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

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 .