details и summary

Вероятно вам приходилось использовать JavaScript или jQuery для создания блока, показывающего и скрывающего какое-то содержимое? HTML5 позволяет создавать подобное всего лишь парой строчек кода, без применения JavaScript. Представляем вам элемент <details>. Над данный момент только Chrome поддерживает элемент <details>. Возможно, скоро к нему присоединится Opera.

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

Мы можем использовать <details> для создания «виджетов-аккордеонов», которые пользователь может разворачивать и сворачивать. Внутри этого элемента можно разместить любое содержимое.

Использование <details>

Имеются два элемента: <details> и необязательный <summary>. Элемент<details> — это обёртка для содержимого, которое мы хотим показать и скрыть, а <summary> содержит описание и заголовок этой группы. Формально <summary> нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «details» в Chrome. Давайте взглянем на код:

<details>
 <summary>Покажи-скрой меня</summary>
 <p>Бурное развитие внутреннего туризма привело Томаса Кука.</p>
</details>

Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения.

Атрибут open

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

<details open>
    <summary>Покажи-скрой меня</summary>
    <p>Бурное развитие внутреннего туризма привело Томаса Кука.</p>
    </details>

Атрибута closed не существует. Поэтому, опуская open, вы по умолчанию подразумеваете closed.

Элемент <summary>

Мы бегло взглянули на <summary> в действии, теперь остановимся на нём подробнее.

Внутри <summary> могут использоваться строчные элементы, такие как<span> или <strong>. Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использования<label> для элемента формы. По крайней мере, было бы удобно, если бы подобная конструкция работала корректно:

<details>
    <summary><label for="name">Имя:</label></summary>
    <input type="text" id="name" name="name" />
    </details>

Теоретически, нажатие на <summary> должно раскрывать содержимое элемента<details>. Но в этом примере содержимое не будет развернуто, потому что вы, фактически, взаимодействуете с <label>, который переводит фокус на соответствующий <input> — даже если он скрыт с помощью <details>.

Честно говоря, этот момент еще требует прояснения. А что по вашему мнению должно происходить? Возможно, у разработчиков браузеров есть какие-то идеи?

Вложенность <details>

Вы можете помещать <details> друг в друга, если хотите, как это сделано в следующем, вполне валидном примере:

<details>
    <summary>Вопрос 1</summary>
    <p>Население превышает широкий кристаллический фундамент.</p>
    <details>
    <summary>Приложенные документы</summary>
    <ul>
    <li><a href="#">Болгары очень дружелюбны;</a></li>
    <li>Скумбрия неумеренно перевозит вулканизм;</li>
    <li>Дождливая погода, куда входят Пик-Дистрикт;</li>
    <li>Белый саксаул дегустирует живописный утконос;</li>
    </ul>
    </details>
    </details>

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

Так в каких же случаях вы можете использовать <details>? Первое, что приходит в голову — FAQ. Разработчики часто используют для них «аккордеоны», поэтому<details> замечательно подходит.

Также не забывайте о навигации по странице. Это может быть закрепленный блок, передвигающаяся одновременно с прокруткой. Возможно, что-то вроде этого?

Вы можете использовать <details> для сворачивания и разворачивания блока комментариев в блоге, для профиля пользователя, для описания загружаемого файла, для сложных форм или в веб-приложениях, как показано в этом примере из спецификации:

Пример использования <details> из спецификации

Пример использования <details> из спецификации.

Оформление

Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдо-элемент ::-webkit-details-marker.

Небольшой пример:


details summary::-webkit-details-marker {
    background: red;
    color: #fff;
    font-size: 500%;

Мы также можем позиционировать этот элемент по отношению к родителю. Здесь, например, он прижат к правому краю.

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

Мы делаем примерно то же самое в этом примере, за исключением того, что вместо фонового изображения мы используем псевдо-элемент :after:


summary::-webkit-details-marker {
    display: none
    }
    summary:after {
    background: red;
    border-radius: 5px;
    content: "+";
    color: #fff;
    float: left;
    font-size: 1.5em;
    font-weight: bold;
    margin: -5px 10px 0 0;
    padding: 0;
    text-align: center;
    width: 20px;
}
details[open] summary:after {
    content: "-";
}

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

Выборка по атрибуту details[open] скрывает в себе некоторые интересные возможности. Как хорошие HTML5-доктора, мы создали доработанный пример, показанный на этом скриншоте:

Элемент <details> в Chrome

Оформленный <details> в Chrome.

Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания <details>, но пока это невозможно.

Доступность

К сожалению, на момент написания статьи отсутствует возможность управления<details> с помощью клавиатуры.

Если вы раскроете элемент <details> с помощью мыши, тогда вы сможете использовать клавиатуру для навигации по вложенным элементам, но вы также должны иметь возможность открывать и закрывать <details> с клавиатуры.

Обратная совместимость

В этой очень полезной коллекции всевозможных кроссбраузерных костылей я нашел два решения, оба они требуют jQuery:

Обратная совместимость для <details> с помощью jQueryот Матиаса Байненса;
Еще одна альтернатива <details>, также основанная на jQueryот Мануэля Бье.

Зачем вообще это использовать?

Многие из вас захотят использовать Modernizr для определения возможностей браузера, но на данный момент в Modernizr отсутствует проверка поддержки<details>. Матиас, автор приведенного выше решения для обратной совместимости, предлагает использовать этот Modernizr-сниппет.

В заключение

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

На текущий момент <details> работает только в Chrome, но, надеюсь, эта ситуация в скором времени изменится. Пока что мы можем использовать в CSS только ::-webkit-details-marker, но есть и множество других CSS-техник.

Источник: Элементы details и summary — Веб-стандарты