Abr@X@bra.ru
Элементы details и summary

Элементы details и summary

04.10.2018
52

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

Вот что о нём написано в спецификации:

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

Спецификация WHATWG HTML5

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

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

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


Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения. Без JavaScript! Атрибут 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> для сворачивания и разворачивания блока комментариев в блоге, для профиля пользователя, для описания загружаемого файла, для сложных форм.




Источник: web-standards

вёрстка, html
Читайте также:
Расширенный CSS для элементов форм

Расширенный CSS для элементов форм

Стилизовать формы с помощью CSS всегда то еще занятие, но есть ряд малоиспользуемых селекторов, которые дают нам значите...
Читать
Мастер-класс: верстаем обложку для известного журнала

Мастер-класс: верстаем обложку для известного журнала

Хочу поделиться как можно сделать очень красивую, интерактивную обложку, которая реагирует на движение мыши.
Читать
Курс по ES6 #2. Использование let

Курс по ES6 #2. Использование let

Как вы знаете в JavaScript, а именно в ES5, есть две области видимости. Глобальная и в приделал функции. В ES6 теперь ес...
Читать