Урок 12. Варианты: состояния, group, peer, has
⚡ Кратко
Вариант — это приставка, которая ограничивает применение утилиты условием:
hover:, focus-visible:, disabled:.
Реакция на родителя — group + group-hover:,
на соседа — peer + peer-checked:, на содержимое —
has-[…]. Состояния компонентов читаются из атрибутов:
data-[state=open]: и aria-expanded:.
О чём этот урок
Всё, что делает интерфейс живым, описывается вариантами: подсветка при
наведении, видимый фокус, выключенные кнопки, открытые меню, выбранные
чекбоксы. Разберём базовые состояния, зависимости между элементами
(group, peer, has), варианты по
атрибутам и позиции в списке, а также правило «состояние должно быть
заметно не только цветом».
Структура урока
Теория
Как устроены варианты и как они комбинируются.
Справочник
Полный список вариантов по группам.
Примеры
Кнопки, карточки, переключатели, аккордеон.
Старый vs Новый
Классы состояний на JS против вариантов.
Задания
Собрать интерактивные элементы без JavaScript.
Решения
Готовые решения с разбором.
Ошибки
hover на мобильных, забытый focus, состояние только цветом.
Домашнее задание
Интерактивная форма и список.
Ресурсы
Документация по состояниям.
Практика
- Сделайте карточку, у которой при наведении меняется вложенная кнопка.
- Соберите переключатель на чекбоксе без единой строки JavaScript.
- Подсветите поле формы, если внутри него есть заполненный ввод.