The HTMLDetailsElement interface #
Like all HTML elements, the inherits all properties, methods, and events from , and adds the instance property and a event. The property is a boolean value reflecting the HTML attribute, indicating whether or not the element’s contents (not counting the ) are to be shown to the user. The toggle event is fired when the element is toggled open or closed. You can listen to this event using .
If you want to write a script to close the opened details when the user opens any other details, remove the open attribute using :
This is the only example to use JavaScript. You probably don’t need JavaScript except for this functionality of closing other opened disclosure widgets.
Remember, and can be heavily styled and can even be used to create tool tips. But, if you’re going to use these semantic elements for use cases in which the native semantics are a mismatch, always ensure that you maintain accessibility. HTML for the most part is by default accessible. Our job as developers is to ensure our content stays accessible.
Использование Скопировать ссылку
Имеются два элемента: и необязательный . Элемент — это обёртка для содержимого, которое мы хотим показать и скрыть, а содержит описание и заголовок этой группы. Формально нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «details» в Chrome. Давайте взглянем на код:
Вы можете . Даже этот простой пример прекрасно демонстрирует эффект переключения. Без JavaScript!
Атрибут Скопировать ссылку
В вышеприведенном примере содержимое скрыто при загрузке страницы. Мы можем сделать его видимым по умолчанию, добавив одиночный атрибут для , :
Атрибута не существует. Поэтому, опуская , вы по умолчанию подразумеваете .
Элемент Скопировать ссылку
Мы бегло взглянули на в действии, теперь остановимся на нём подробнее. Внутри могут использоваться строчные элементы, такие как или . Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использования для элемента формы. По крайней мере, было бы удобно, если бы работала корректно:
Теоретически, нажатие на должно раскрывать содержимое элемента . Но в этом примере содержимое не будет развернуто, потому что вы, фактически, взаимодействуете с , который переводит фокус на соответствующий — даже если он скрыт с помощью .
Честно говоря, этот момент еще требует прояснения. А что по вашему мнению должно происходить? Возможно, у разработчиков браузеров, читающих эту статью, есть какие-то идеи? 
Тег | HTML справочник
Значение и применение
Тег <summary> определяет видимый заголовок для тега <details>. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок «Подробнее»).
Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в <details> отображается для пользователя только если атрибут open установлен.
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <summary></title> </head> <body> <details> <summary>Показать ? </summary> Пожалуйста <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> <details> <summary>Ещё? </summary> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> </details> </details> </body> </html>
В этом примере мы использовали два элемента <details>, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>.
Результат нашего примера:
| HTML | WebReference
Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации. Элемент <summary> должен идти первым внутри <details>.
Результат данного примера показан на рис. 1.
Рис. 1. Вид <summary> в браузере
![How to use the details and summary elements in html5 [article] | treehouse blog](https://rwvt.ru/wp-content/uploads/a/0/b/a0b3363b9ff0a5b2faabc9cd5735db68.jpeg)
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Toggling the summary marker #
In the two earlier Codepens, you’ll note the arrow to the inline-start side of the summary. A disclosure widget is typically presented on-screen using a small triangle that rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the element label the disclosure widget. The rotating arrow at the top of each section is a set on the element. Like list items, the element supports the shorthand property and its longhand properties, including . You can style the disclosure triangle with CSS, including changing the marker used from a triangle to any other bullet type, including an image with .
To apply other styles, use a selector similar to . The only accepts a limited number of styles. Removing the and replacing it with the easier-to-style is common practice, with CSS styles changing the style of the generated content slightly based on the presence (or absence) of the open attribute. You can remove the disclosure widget icon by setting or set the content of the marker to , but always include visual indicators to inform sighted users that the summary content is a toggle button that will show and hide content upon activation.
This example removes the default marker, and adds generated content to create a when the details are closed and a when the details are open.
If you want the details block open by default, include the attribute on the opening tag. You can also add space between each dialog and transition the rotation of the marker created with generated content to improve the appearance:
Обратная совместимостьСкопировать ссылку
Прежде чем кто-то начнет восклицать, что это не работает в IE6, хочу сказать: мы знаем. Тем не менее, благодаря некоторым умным людям, мы можем обеспечить изящную обратную совместимость. В этой очень полезной коллекции всевозможных кроссбраузерных костылей я нашел два решения, оба они требуют jQuery:
- Обратная совместимость для с помощью jQuery от Матиаса Байненса;
- Еще одна альтернатива , также основанная на jQuery от Мануэля Бье.
Многие из вас захотят использовать Modernizr для определения возможностей браузера, но на данный момент в Modernizr отсутствует проверка поддержки . Матиас, автор приведенного выше решения для обратной совместимости, предлагает использовать этот Modernizr-сниппет.
How errors are handled #
If you don’t include a , the browser will create one for you: with a marker and the word «details». This summary is part of a , and therefore will not have author CSS summary styles applied. Unfortunately, Safari does not include the details in the keyboard focus order.
If you do include a , but it is not the first element in the , the browser still displays the summary as it should. It will also not fail if you include a link, label, or other interactive element within the summary, but browsers handle interactive content within interactive content differently. For example, if you include a link in a summary, some browsers will add both the summary and the link to the default tabbing order, but other browsers will not focus on the link by default. If you click on a nested in a , some browsers will give focus to the associated form control; other browsers will give focus to the form control and toggle the open or closed.
Еще примеры
Пример
Используйте CSS для стилизации & lt;details> и <summary>:
<html><style>details > summary { padding: 4px;
width: 200px; background-color: #eeeeee; border: none;
box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer;}details > p {
background-color: #eeeeee; padding: 4px; margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;}</style><body><details>
<summary>Центр Эпкот</summary>
<p>Эпкот — это тематический парк на курорте Уолт Дисней с захватывающими аттракционами,
международными павильонами, отмеченными наградами фейерверками и сезонными специальными мероприятиями</p></details></body></html>
HTML Теги
<!—Комментарий—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Примеры использованияСкопировать ссылку
Так в каких же случаях вы можете использовать ? Первое, что приходит в голову — FAQ. Разработчики часто используют для них «аккордеоны», поэтому замечательно подходит.
Также не забывайте о навигации по странице. Это может быть закрепленный блок, передвигающаяся одновременно с прокруткой.
Вы можете использовать для сворачивания и разворачивания блока комментариев в блоге, для профиля пользователя, для описания загружаемого файла, для сложных форм или в веб-приложениях, как показано в этом примере из спецификации:
Пример использования из спецификации.
На самом деле, даже глядя сейчас на админку WordPress, я вижу множество возможностей использования . Если у вас есть ещё какие-то идеи и предложения — расскажите о них в комментариях.
Toggling visibility: the open attribute #
The element is the disclosure widget container. The is the summary or legend for its parent . The summary is always displayed, acting as a button that toggles the display of the rest of the parent’s contents. Interacting with the toggles the display of the self-labeled summary siblings by toggling the ‘ element’s attribute.
The attribute is a boolean attribute. If present, no matter the value or lack thereof, it indicates that all the contents are shown to the user. If the attribute is not present, only the contents of the are shown.
Because the attribute is added and removed automatically as the user interacts with the control, it can be used in CSS to style the element differently based on its state.
You can create an accordion with a list of multiple elements, each with a child. Omitting the attribute in your HTML means the will all be collapsed, or closed, with just the summary headings visible when the page loads; each heading being the opener for the rest of the contents in the parent . If you include the attribute in your HTML, the will render expanded, with the contents visible, when the page loads.
The hidden content in the collapsed state is searchable in some browsers but not others, even though the collapsed content is not part of the DOM. If you search in Edge or Chrome, the details containing a search term will expand to display the occurrence. This behavior is not replicated in Firefox or Safari.
The must be the first child of a element, representing a summary, caption, or legend for the rest of the contents of the parent element in which it is nested. The element’s contents can be any heading content, plain text, or HTML that can be used within a paragraph.
Пример CSS-спойлеров
В результате объединения всего SCSS и добавления соответствующей HTML-разметки получаются простые кроссбраузерные спойлеры без использования JS.
JSFiddle недоступен без JavaScript
В заключение
Не смотря на преимущество с точки зрения семантики и практичности использования, тег не рекомендуется применять там, где требуется поддержка «древних» Internet Explorer и устаревших мобильных браузеров. В этом случае стоит прибегнуть к традиционным способам создания спойлеров на CSS, работающих практически везде, или использовать решения на JavaScript, в том числе HTML5-полифиллы. Остается надеется, что со временем старые браузеры окончательно уйдут в небытие и уступят место их обновленным версиям, и тогда новые семантические теги станут повсеместной практикой.
ОформлениеСкопировать ссылку
Как же нам оформить эту штуку? Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдоэлемент . :
Мы также можем позиционировать этот элемент по отношению к родителю. . В общем-то, и все.
А как же заменить раскрывающий элемент своей иконкой? Используя выборку по атрибуту, вы можете определить, когда раскрыт, а когда закрыт, и применить соответствующее фоновое изображение. Мы делаем примерно то же самое в , за исключением того, что вместо фонового изображения мы используем псевдоэлемент :
В этом примере символы и используются в качестве раскрывающей ссылки. В зависимости от дизайна вы можете использовать вместо , но, в любом случае, оба псевдоэлемента позволяют использование изображения.
Выборка по атрибуту скрывает в себе некоторые интересные возможности. Как хорошие HTML5-доктора, мы создали , показанный на этом скриншоте:
Оформленный в Chrome.
Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания , но пока это невозможно.
Принцип работы тега «details»
Элемент представляет собой одно из многочисленных семантических нововведений HTML5 и предназначается для хранения контента, отображаемого или скрываемого по желанию пользователя. В отличие от традиционных методов разработки спойлера через и псевдокласса или посредством элемента и псевдокласса , для корректной работы элемента не требуется добавление стороннего HTML и CSS кода, что делает его использование простым и удобным.
Содержимое тега становится видимым, когда у него появляется атрибут , который автоматически добавляется или удаляется браузером при клике по — заголовку спойлера. В свою очередь, заголовок должен стоять первым среди дочерних элементов, но его наличие не является обязательным. В случае отсутствия заголовка браузер установит стандартное название «подробности» из Shadow DOM, однако такой тег не пройдет валидацию. Это аналогично ситуации, когда не имеет .
Элемент может содержать после своего заголовка блочный или строчный контент, принадлежащий к категории основной поточной информации (flow content). Содержимое, указанное после , как могло бы показаться, не будет отображаться и скрываться средствами CSS, а именно — переключением значения . Браузер переносит его в необходимое место за счёт манипуляций с Shadow DOM, что делает возможным применить к контенту эффекты перехода (). Иными словами, в примере выше при отсутствии у спойлера атрибута , для элемента правило не применяется.
Не смотря на кажущуюся практичность и тривиальность, элемент не лишён недостатков: отсутствие полной кроссбраузерной поддержки (речь идет об ограничениях в Internet Explorer, Edge и игнорирование Opera Mini) и непрезентабельное стандартное со (простой маркер перед заголовком , отсутствие анимации), поэтому при создании спойлеров необходимо учесть эти аспекты.
HTML Справочник
HTML по алфавитуHTML по категориямHTML Поддержка браузераHTML АтрибутыHTML Глобальные атрибутыHTML СобытияHTML ЦветаHTML CanvasHTML Аудио/видеоHTML Наборы символовHTML Типы документовHTML URL КодировкаHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКонвертер PX в EMКомбинации клавиш
HTML Теги
<!—Комментарий—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>