Подробности и резюме

Узнайте, как работают очень полезные элементы подробностей и резюме, и где их использовать.

Стрелка-расширитель, иногда называемая виджетом раскрытия, — это элемент управления пользовательского интерфейса, который скрывает и отображает контент. Если вы читаете это на сайте web.dev и ширина вашей области просмотра меньше 106 em, нажатие кнопки «На этой странице» открывает оглавление этого раздела. Если оно не отображается, сверните окно браузера, чтобы увидеть навигацию по оглавлению на этой странице в виде стрелки-расширителя.

Графический пользовательский интерфейс «аккордеон» представляет собой ряд вертикально расположенных виджетов раскрытия информации. Аккордеон часто используется на странице часто задаваемых вопросов (FAQ). В этом случае FAQ-аккордеон содержит список видимых вопросов. При нажатии на вопрос раскрывается, или «раскрывается», ответ на него.

jQuery поддерживает шаблон пользовательского интерфейса «аккордеон» как минимум с 2009 года. Оригинальное решение «аккордеон» без JavaScript заключалось в том, чтобы каждый вопрос часто задаваемого вопроса был оформлен как <label> , за которым следовал соответствующий ему флажок, а затем отображался ответ <div> при установке флажка. CSS выглядел примерно так:

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

Почему история? Виджеты раскрытия информации, такие как аккордеоны, без JavaScript или хаков управления формами, появились относительно недавно. Элементы <details> и <summary> получили полную поддержку в современных браузерах только с января 2020 года. Теперь вы можете создавать функциональные, хотя и не слишком привлекательные, виджеты раскрытия информации с помощью семантического HTML.

Элементы <details> и <summary> — это всё, что вам нужно: они представляют собой встроенный способ управления развёртыванием и свёртыванием контента. Когда пользователь щёлкает по элементу <summary> или нажимает на него, или отпускает клавишу Enter , когда элемент <summary> находится в фокусе, содержимое родительского элемента <details> становится видимым.

Как и любой семантический контент, вы можете постепенно улучшать стандартные функции и внешний вид. В данном случае был добавлен лишь небольшой фрагмент CSS:

Это означает, что этот CodePen (и все примеры CodePen) не содержит JavaScript.

Переключить видимость с помощью атрибута open

Элемент <details> представляет собой контейнер виджета-раскрытия. Элемент <summary> представляет собой краткое содержание или легенду для родительского элемента <details> . Краткое содержание отображается всегда, действуя как кнопка, которая переключает отображение остального содержимого родительского элемента. Взаимодействие с элементом <summary> включает/выключает отображение самомаркированных элементов-сестёр путём переключения атрибута open элемента <details> .

Атрибут open — это логический атрибут. Его наличие, независимо от его значения или отсутствия, означает, что пользователю показано всё содержимое раздела <details> . Если атрибут open отсутствует, отображается только содержимое раздела <summary> .

Поскольку атрибут open добавляется и удаляется автоматически при взаимодействии пользователя с элементом управления, его можно использовать в CSS для стилизации элемента по-разному в зависимости от его состояния.

Вы можете создать аккордеон со списком из нескольких элементов <details> , каждый из которых имеет дочерний элемент <summary> . Отсутствие атрибута open в HTML-коде означает, что все элементы <details> будут свёрнуты или закрыты, и при загрузке страницы будут видны только заголовки с кратким описанием; каждый заголовок будет открывающим для остального содержимого родительского элемента <details> . Если вы добавите атрибут open в HTML-код, элемент <details> будет отображаться развёрнутым, а его содержимое — видимым при загрузке страницы.

Скрытый контент в свёрнутом состоянии доступен для поиска в некоторых браузерах, но не в других, даже если свёрнутый контент не является частью DOM. При поиске в Edge или Chrome информация, содержащая поисковый запрос, раскрывается, отображая его вхождение. В Firefox и Safari это поведение не реализовано.

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

Переключить маркер сводки

В двух предыдущих Codepens в начале краткого содержания была стрелка. На экране обычно отображается раскрывающаяся стрелка — небольшой треугольник, который вращается (или закручивается), указывая на открытое или закрытое состояние, и метка рядом с треугольником. Содержимое элемента <summary> обозначает виджет раскрытия.

Вращающаяся стрелка в верхней части каждого раздела — это ::marker установленный на элементе <summary> . Как и элементы списка, элемент <summary> поддерживает сокращённое свойство list-style и его полные свойства, включая list-style-type . Вы можете оформить раскрывающийся треугольник с помощью CSS, в том числе изменить используемый маркер с треугольника на любой другой тип маркера, включая изображение с помощью list-style-image .

Чтобы применить другие стили, используйте селектор, аналогичный селектору details summary::marker . Псевдоэлемент ::marker принимает лишь ограниченное количество стилей. Удаление ::marker и его замена на более простой в оформлении ::before — распространённая практика, поскольку стили CSS немного изменяют стиль генерируемого содержимого в зависимости от наличия (или отсутствия) атрибута open. Вы можете удалить значок виджета раскрытия, установив list-style: none или задав для содержимого маркера значение none , но всегда следует добавлять визуальные индикаторы, информирующие зрячих пользователей о том, что содержимое краткого содержания переключается для отображения и скрытия.

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

В этом примере удаляется маркер по умолчанию и добавляется сгенерированное содержимое для создания + когда детали закрыты, и - , когда детали открыты.

Если вы хотите, чтобы блок сведений открывался по умолчанию, добавьте атрибут open в открывающий тег <details> . Вы также можете добавить пробел между каждым диалоговым окном и изменить поворот маркера, созданного с помощью сгенерированного контента, для улучшения внешнего вида:

Как обрабатываются ошибки

Если вы не добавите тег <summary> , браузер создаст его автоматически с маркером и словом «details». Это резюме является частью теневого корневого элемента и, следовательно, к нему не применяются стили CSS автора.

Если вы включили элемент <summary> , но он не является первым элементом в <details> , браузер всё равно отобразит сводку как положено. Ссылка, метка или другой интерактивный элемент в сводке не повлияют на результат, но браузеры обрабатывают интерактивный контент внутри интерактивного контента по-разному.

Например, если вы добавляете ссылку в сводку, некоторые браузеры добавляют и сводку, и ссылку в порядок табуляции по умолчанию, но другие браузеры по умолчанию не фокусируются на ссылке. При щелчке по элементу <label> , вложенному в элемент <summary> , некоторые браузеры переводят фокус на соответствующий элемент управления формы. Другие браузеры переводят фокус на элемент управления формы и открывают или закрывают элемент <details> .

Интерфейс HTMLDetailsElement

Как и все HTML-элементы, элемент HTMLDetailsElement наследует все свойства, методы и события от HTMLElement и добавляет свойство экземпляра open и событие toggle . Свойство HTMLDetailsElement.open — это логическое значение, отражающее HTML-атрибут open , который указывает, будет ли содержимое элемента (за исключением <summary> ) отображаться пользователю. Событие toggle срабатывает при открытии или закрытии элемента <details> . Вы можете прослушивать это событие с помощью addEventListener() .

Если вы хотите написать скрипт для закрытия открытых данных, когда пользователь открывает какие-либо другие данные, удалите атрибут открытия с помощью removeAttribute("open") :

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

Помните, что <details> и <summary> можно стилизовать очень сложно, и их даже можно использовать для создания всплывающих подсказок . Но если вы собираетесь использовать эти семантические элементы в случаях, когда исходная семантика не соответствует их требованиям, всегда поддерживайте доступность . HTML по большей части доступен по умолчанию. Наша задача как разработчиков — обеспечить доступность нашего контента.

Проверьте свое понимание

Проверьте свои знания деталей и краткого содержания.