HTML элемент <details>: Встроенный аккордеон, который вы не используете

HTML элемент <details>, возможно, один из самых недооценённых встроенных элементов. Меня постоянно удивляет, как много разработчиков прибегают к использованию JavaScript, когда им нужно показать/скрыть содержимое, совершенно не обращая внимания на эту встроенную возможность.

Элемент <details> создаёт разворачиваемый виджет, который пользователи могут открывать и закрывать. Подумайте о нём, как о встроенном аккордеоне — никакого JavaScript не требуется. Вот базовый синтаксис:

<section>
  <details>
    <summary>How do I return an item?</summary>
    <p>Visit our returns portal and follow the instructions...</p>
  </details>

  <details>
    <summary>Where do you ship?</summary>
    <p>We currently ship to the following countries...</p>
  </details>
</section>

See the Pen

Вот и всё. Никакого JavaScript. Никакого CSS. Никаких атрибутов aria, которыми нужно управлять. Все функции доступности, клавиатурной навигации и управления состоянием браузер выполняет за вас.

Встроенные возможности <details>

• Уведомления для устройств чтения с экрана о развёрнутом/ свёрнутом состоянии
• Клавиатурная навигация с помощью клавиш Enter и Space
• Правильное управление фокусом
• Семантическая структура HTML
• Управление состояниями без JavaScript

See the Pen

Хотя элемент <details> прекрасно работает из коробки, стилизованная версия демонстрирует, как его можно улучшить с помощью CSS, сохранив встроенную функциональность. Красота заключается в прогрессивном улучшении — начиная с семантического HTML, добавляя продуманный стиль и сохраняя все встроенные функции доступности.

В следующий раз, когда соберётесь использовать JavaScript аккордеон, подумайте, не может ли этот встроенный HTML элемент лучше подойти для решения поставленной задачи. Иногда лучшие решения уже встроены!

Комментарии