Пояснение элементов “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> работает как элемент выпадающего виджета, в котором контент изначально скрыт. Кликнув по стрелке, вы можете открыть скрытый контент. Также можно выделить его с помощью клавиш Tab, Space или клавиши Enter:
Открытое состояние
После того, как откроете данные элемента, если просматриваете исходный код с помощью инструментов для разработчиков, вы увидите, что, когда элемент находится в открытом состоянии, браузер добавляет к нему атрибут 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> может содержать другие вложенные элементы <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> с помощью 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;
}
Примеры применения
Вы уже встречались с этим элементом. Например, некоторые интернет-магазины «упаковывают» с помощью него списки желаний. Или используют его в сайдбаре, чтобы отфильтровать результаты:
<details> и <summary> также прекрасно подходят для организации справочных разделов. Они часто встречаются на страницах, где результаты можно отфильтровать по различным критериям, например, по цене. Я создал демо-версию, которой вы можете свободно пользоваться.
Заключение
Новый элемент становится все более важен. Когда-нибудь разработка сайтов или веб-приложений с помощью простых виджетов будет меньше зависеть от библиотек JavaScript.