скрытый

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

Атрибут hidden используется для указания того, что содержимое элемента не должно отображаться пользователю. Этот атрибут может принимать следующие значения:

• пустая строка
• ключевое слово hidden
• ключевое слово until-found

С атрибутом hidden связаны два состояния: состояние скрытый и состояние скрытый до обнаружения.

• Пустая строка или ключевое слово hidden, устанавливают элемент в состояние скрытый. Кроме того, некорректные значения устанавливают элемент в состояние скрытый.
• Ключевое слово until-found устанавливает элемент в состояние скрытый до обнаружения.

Следующие значения устанавливают элемент в состояние скрытый:

<span hidden>I'm hidden</span>
<span hidden="">I'm also hidden</span>
<span hidden="hidden">I'm hidden too!</span>

Следующее значение устанавливает элемент в состояние скрытый до обнаружения:

<span hidden="until-found">I'm hidden until found</span>

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

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

Однако можно использовать атрибут ARIA aria-describedby для ссылки на описания, которые сами по себе скрыты. Хотя скрытие описаний подразумевает, что они бесполезны сами по себе, их можно написать таким образом, чтобы они были полезны в конкретном контексте ссылки из элемента, который они описывают.

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

Элементы, являющиеся потомками скрытого элемента, всё ещё активны, что означает, что скриптовые элементы всё ещё могут выполняться, а элементы форм всё ещё могут отправлять данные.

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

Веб-браузеры могут реализовывать состояние скрытый с помощью display: none, в этом случае элемент не участвует в выкладке страницы. Это также означает, что изменение значения свойства CSS display элемента в состоянии скрытый перекроет состояние. Например, элементы со стилем display: block будут отображаться, несмотря на наличие атрибута hidden.

В состоянии скрытый до обнаружения элемент скрыт, но его содержимое будет доступно для функции «поиск на странице» браузера или для навигации по фрагментам. Когда эти функции вызывают прокрутку к элементу в поддереве скрытый до обнаружения, браузер будет:

• вызывать событие beforematch для скрытого элемента
• удалять атрибут hidden из элемента
• прокручивать к элементу

Это позволяет разработчику свернуть часть содержимого, но сделать её подлежащей поиску и доступной через навигацию по фрагментам.

Обратите внимание, что браузеры обычно реализуют состояние скрытый до обнаружения с помощью content-visibility: hidden. Это означает, что в отличие от элементов в состоянии скрытый, элементы в состоянии скрытый до обнаружения будут иметь сгенерированные блоки, что означает, что:

• элемент будет участвовать в выкладке страницы
• отступы, границы, отступы и фон элемента будут отображаться.

Кроме того, для отображения элемента требуется, чтобы он был затронут содержанием выкладки. Это означает, что если элемент в состоянии скрытый до обнаружения имеет значение display none, contents, или inline, то элемент не будет отображаться функциями поиска на странице или навигации по фрагментам.

В этом примере у нас есть:

• Три элемента <div>. Первый и третий не скрыты, а второй имеет атрибуты hidden="until-found" и id="until-found-box".
• Ссылка, целевой фрагмент которой — "until-found-box".

У скрытого элемента до обнаружения пунктирная красная рамка и серый фон.

У нас также есть JavaScript, который отслеживает срабатывание события beforematch для скрытого элемента до обнаружения. Обработчик событий меняет текстовое содержимое блока.

HTML

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

CSS

div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

div#until-found-box {
  color: red;
  border: 5px dotted red;
  background-color: lightgray;
}

JavaScript

const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);

Результат

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

Нажатие кнопки «Перейти к скрытому содержимому» переходит к элементу скрытому до обнаружения. Срабатывает событие beforematch , текстовое содержимое обновляется, и содержимое элемента отображается.

Чтобы запустить пример снова, нажмите «Сбросить».

• HTMLElement.hidden
• Все глобальные атрибуты
• Атрибут aria-hidden
• Событие beforematch