Глобальный атрибут HTML5 hidden

Глобальный атрибут HTML5 hidden

От автора: как вы, наверное, знаете, существует несколько атрибутов HTML, которые считаются глобальными, поскольку они могут применяться к любому элементу HTML. В качестве примеров можно привести class, id, style и tabindex. Атрибут hidden HTML5, который был добавлен несколько лет назад, и о котором вы, возможно, забыли, используется для двух элементах в следующем коде.

Атрибут hidden — это логическое значение, которое, если задано для элемента: «указывает, что элемент еще не указан или больше не имеет прямого отношения к текущему состоянию страницы, или что он используется для объявления содержимого для повторного использования другими частями страницы, а не для прямого доступа пользователя».

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Для чего этот атрибут может использоваться?

Последняя часть определения в спецификации интересна тем, что она означает, что вы можете размещать контент на странице с атрибутом hidden, а затем обращаться к этому контенту через JavaScript для использования в другом месте. Я сделал это, прежде чем, например, использовать скрытый элемент textarea, но в стандартной ситуации я бы скрыл этот элемент с помощью CSS, используя что-то вроде display: none. С помощью hidden это сделать проще. Таким образом, элемент со атрибутом hidden является частью DOM, но недоступен для пользователя.

Вот пример, в котором я захватываю содержимое скрытого элемента innerHTML с помощью JavaScript:

Есть некоторые вещи, которые вы должны знать при использовании этого атрибута. Как объясняется в спецификации:

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Не следует использовать hidden, чтобы скрывать невидимые части компонента вкладок или аналогичного переключателя контента (Примечание: этот совет из спецификации является довольно небесспорным. См. эту тему)

Не скрытые элементы не должны содержать гиперссылок на скрытые элементы

Элементы, размеченные с использование hidden, по-прежнему потенциально активны. Например, элемент управления формой или даже элемент script по-прежнему будут работать.

Спецификация предоставляет информацию о допустимом использовании, и этот атрибут полностью поддерживается в браузерах при сопоставлении доступности. Он сопоставим с aria-hidden="true", но ведет себя иначе. В этой статье Стив Фолкнер описывает ряд различий между ними. Основным из них, конечно же, является тот факт, что элементы с aria-hidden="true" по прежнему отображаются в браузере, но не будут отображаться для вспомогательной технологии, тогда как элементы с hidden не отображаются ни там, ни там.

В той же статье Фолкнер также объясняет, как правильно использовать скрытый hidden: Если вы хотите скрыть контент от всех пользователей, используйте атрибут HTML5 hidden (наряду с CSS display:none для браузеров, которые еще не поддерживают hidden). Необходимости в использовании aria-hidden нет.

Глобальный атрибут HTML5 hidden

Как вы можете видеть, браузер использует селектор атрибутов для указания на элемент. Поэтому, чтобы переопределить это, вы должны убедиться, что используете селектор, который является более специфичным. В следующей демо-версии я переопределяю hidden для двух элементов с помощью CSS. В одном случае это работает, во втором - нет:

Элемент textarea по-прежнему скрыт, потому что селектор типа элемента недостаточно специфичен, чтобы переопределить CSS браузера. Однако элемент абзаца отображается, потому что я использую селектор классов, который переопределяет селектор атрибутов браузера.

Атрибут hidden поддерживается во всех современных браузерах и даже в IE11, поэтому его можно использовать в большинстве проектов.

Автор: Louis Lazaris

Источник: https://www.impressivewebs.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree