От автора: как вы, наверное, знаете, существует несколько атрибутов HTML, которые считаются глобальными, поскольку они могут применяться к любому элементу HTML. В качестве примеров можно привести class, id, style и tabindex. Атрибут hidden HTML5, который был добавлен несколько лет назад, и о котором вы, возможно, забыли, используется для двух элементах в следующем коде.
| 1 2 | <p hidden>Example text. Nothing to see here.</p> <textarea hidden>More example text.</textarea> |
Атрибут 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 нет.
Как вы можете видеть, браузер использует селектор атрибутов для указания на элемент. Поэтому, чтобы переопределить это, вы должны убедиться, что используете селектор, который является более специфичным. В следующей демо-версии я переопределяю hidden для двух элементов с помощью CSS. В одном случае это работает, во втором - нет:
Элемент textarea по-прежнему скрыт, потому что селектор типа элемента недостаточно специфичен, чтобы переопределить CSS браузера. Однако элемент абзаца отображается, потому что я использую селектор классов, который переопределяет селектор атрибутов браузера.
Атрибут hidden поддерживается во всех современных браузерах и даже в IE11, поэтому его можно использовать в большинстве проектов.
Автор: Louis Lazaris
Источник: https://www.impressivewebs.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
