#без_javascript — Public Fediverse posts

<details name>: эксклюзивные аккордеоны на чистом HTML (+ стили через :has())

Привет, Хабр! За последний год HTML получил деталь, которая меняет привычные «аккордеоны». У <details> появился атрибут name , и этим всё сказано: теперь эксклюзивные аккордеоны можно сделать без строчек JavaScript, а стили и поведение дочистить через :has() . Поддержка стала широкой, а старые практики на дивчиках и ролях можно оставить для случаев, когда действительно нужна сложная логика. В HTML у нас давно есть пара <details>/<summary> . Браузер сам рисует disclosure-виджет, умеет разворачивать содержимое, бережно обращается с фокусом и клавиатурой. Сейчас поверх этого добавился name , который превращает набор из нескольких <details> в группу, открываешь одно и закрываются остальные из той же группы. Если в группе вы отметили несколько элементов open в исходнике, браузер оставит открытым первый по порядку.

https://habr.com/ru/companies/otus/articles/939362/

#html #css #атрибут_name #аккордеон #эксклюзивный_аккордеон #без_JavaScript #доступность #клавиатурная_навигация #кроссбраузерная_поддержка