Пояснение элементов “Details” и “Summary”

Многие библиотеки JavaScript были разработаны для того, чтобы размещать на сайтах дополнительные интерактивные виджеты. Аналогичными средствами обладает и HTML5. В этой статье мы рассмотрим один из таких элементов под названием <details> (а значит автоматически и элемент <summary>), который дает возможность создавать интерактивные виджеты, похожие на аккордеон.

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

<details> может использоваться в любом месте в пределах тега . Вот простой пример его использования:

<details>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

В приведенном выше примере использован элемент <details>, содержащий абзац, что подчеркивает его сходство с другими элементами секционирования HTML. Он определяет семантический раздел, который может содержать дочерние элементы, такие как изображения с элементами <figure>, элементы форм, такие как <input> и <textarea>, и даже вложенные массивы других элементов <details>.

Единственное отличие заключается в том, как браузеры отображают этот элемент. Поддерживающие его браузеры, такие как Google Chrome, Safari и последняя версия Opera выводят его с небольшим треугольником сбоку:

details-simplest-example

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

details-keyboard-navigation

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

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

<details open >
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

Элемент <summary>

<details> применяется вместе с тегом <summary>; два элемента предназначены для совместного использования, но <summary> является необязательным.

Так что же происходит, когда вы используете его?

<details open>
    <summary>Hello World</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

В приведенном выше примере надпись «Подробнее» будет заменена на «Hello World»:

details-summary-example

Вложенные элементы

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

<details>
    <summary>Hello World</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    <details>
        <summary>Hi, How are you?</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    </details>
</details>

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

details-nested

Но данную проблему можно легко решить, добавив некоторые простые стили.

Назначение стилей для <details> с помощью CSS

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

details {
    padding: 15px;
    background-color: #f6f7f8;
    margin-bottom: 20px;
}

Также можно использовать селектор атрибута, чтобы указать стили для открытого состояния:

details[open] {
    /* здесь сами  стили */
}

Также вы можете задать стили для элемента <summary>. Например, если вы наводите курсор мыши на кнопку или ссылку, то курсор обычно приобретает вид указателя (ладонь с вытянутым указательным пальцем).

Но для элемента <summary>, который также является кликабельным, курсор приобретает вид текстового курсора, что выглядит немного неестественно. Можно отобразить курсор в виде указателя:

summary {
    cursor: pointer;
  }

Стили маркера

А можно ли задать стили для стандартного маркера в виде маленького треугольника? Webkit использует для этой цели псевдо-элемент ::-webkit-details-marker. Благодаря этому мы можем задать для треугольника стили по умолчанию, такие как цвет, цвет фона, а также размер:

summary::-webkit-details-marker {
    color: #fff;
    background-color: #000;
}

К сожалению, заменить треугольник непосредственно через ::-webkit-details-marker невозможно. Единственное работающее решение — это изменить его с помощью ::before или ::after:

summary::-webkit-details-marker {
    display: none;
}
summary:before {
    content: "2714"; /* новая иконка */
    color: #696f7c;
    margin-right: 5px;
}

Поддержка браузерами

Поддержка браузерами этих двух элементов значительно улучшилась в последние два года. В 2011 и 2012 годах единственным браузером, который мог отображать <details> и <summary>, был Google Chrome. Safari и Opera только недавно начали поддерживать эти элементы.

Так как поддержка в Firefox и Internet Explorer до сих пор оставляет желать лучшего, появилось несколько вариантов универсализации, которые имитируют нужный функционал, например, jQuery Details. Хотя это решение и опирается на JQuery, но размер его файла намного меньше, чем аналог библиотеки JQuery UI.

После его реализации, стили треугольника задаются обычным способом:

summary:before {
    content: "25B8"; /* Символ unicode маленького треугольника  */
    color: #000;
    margin-right: 5px;
}
caniuse

Примеры применения

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

details-in-ecommerce

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

Заключение

Новый элемент становится все более важен. Когда-нибудь разработка сайтов или веб-приложений с помощью простых виджетов будет меньше зависеть от библиотек JavaScript.

Перевод статьи «Explaining the “Details” and “Summary” Elements» был подготовлен дружной командой проекта Сайтостроение от А до Я.