#аккордеон — Public Fediverse posts

[Перевод] Заменяем JS обычным HTML

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS! Но время идёт, функции HTML и CSS расширяются , поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS. Я ничего не имею против JS , но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS. В этой статье я приведу несколько примеров; сможете придумать свои?

https://habr.com/ru/articles/981298/

#аккордеон #всплывающие_окна #модальные_окна #навигация #вёрстка

<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 #доступность #клавиатурная_навигация #кроссбраузерная_поддержка