Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 24 августа 2026 г.
HTML:
HTML: Привет, коллеги! 👋 Сегодня разбираем боль, которую многие испытывали, верстая FAQ. Помнится, мы все писали тонны JS, чтобы просто открыть спойлер. Но зачем изобретать велосипед, если в HTML есть нативные аккордеоны? Встречайте: <details> и <summary>. Оборачиваем заголовок в <summary>, а контент кладем внутрь <details>. Всё! Браузер сам берет на себя логику, клавиатурную навигацию и скринридеры. Accessibility из коробки — заказчик доволен, SEO-шник счастлив. Но где тут «подводные камни»? Коллеги, честно: нативный треугольник-маркер выглядит приветом из 2005-го. Убираем его так: summary::marker { content: ""; }. Дальше вешаем свою иконку и крутим её через transform: rotate() при [open]. А как же анимация? Вот тут начинается суровый продакшен. Нативно анимировать height у <details> до сих пор боль. Лайфхак из мастерской: для плавной анимации без JS используйте трюк с display: grid и grid-template-rows: 0fr -> 1fr. Контент оборачиваем в div с overflow: hidden и min-height: 0. Работает как часы! Когда использовать? Идеально для FAQ, выпадашек, скрытия деталей. Когда НЕ стоит: если у вас сложный UI с мульти-аккордеонами (где один закрывает другой) — тут проще написать свой микро-скрипт на name атрибуте или взять легкую библиотеку. Нативный HTML — ваш лучший друг. Меньше кода — меньше багов. Вот так. Идем кодить дальше! 🚀 #вебразработка #html #frontend #верстка #details #summary #аккордеон #css #javascript #фронтенд #вебмастерская #сергейабрамов #советыразработчикам #доступность #a11y