hidden глобальный атрибут HTML

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

Попробуйте

<p>
  This content should be read right now, as it is important. I am so glad you
  are able to find it!
</p>

<p hidden>
  This content is not relevant to this page right now, so should not be seen.
  Nothing to see here. Nada.
</p>

p {
  background: #ffe8d4;
  border: 1px solid #f69d3c;
  padding: 5px;
  border-radius: 5px;
}

Описание

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

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

Недопустимые значения атрибута hidden также переводят элемент в скрытое состояние. Таким образом, все следующие элементы находятся в скрытом состоянии:

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

Ключевое слово until-found переводит элемент в состояние скрыто до обнаружения:

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

Скрытое состояние

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

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

Состояние «скрыто до обнаружения»

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

1. Отправит событие beforematch для скрытого элемента
2. Удалит атрибут hidden у элемента
3. Прокрутит страницу к элементу

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

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

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

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

Примечания по использованию

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

На скрытые элементы не следует ссылаться из видимых элементов, кроме случаев использования hidden="until-found". Например, было бы неправильно использовать атрибут href для ссылки на раздел с атрибутом hidden. Если содержимое неприменимо или не имеет отношения к делу, на него не следует ссылаться.

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

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

Наконец, обратите внимание: элементы, являющиеся потомками скрытого элемента, остаются активными. Это означает, что скриптовые элементы по-прежнему могут выполняться, а элементы формы — отправлять данные:

<div hidden>
  <script>
    console.warn("Boo! I'm hidden *and* running!");
  </script>
</div>

Примеры

Использование атрибута hidden

В этом примере представлены три элемента <div>. Первый и третий не скрыты, а у второго есть атрибут hidden. Обратите внимание, что для скрытого элемента не создаётся блок.

<div>I'm not hidden</div>
<div hidden>I'm hiding!</div>
<div>I'm not hidden, either</div>

Использование значения until-found

В этом примере представлены три элемента <div>. Первый и третий видны, а у второго есть атрибуты hidden="until-found" и id="until-found-box". Элемент с идентификатором 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, either</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