Современный CSS: сложные UI-паттерны без единой строчки JavaScript

Разберём три таких паттерна, которые ещё недавно требовали тонн JS-кода, а теперь закрываются парой атрибутов и стилей.

Переключение цветовых тем через light-dark()

Функция light-dark() и свойство color-scheme позволяют организовать поддержку светлой и тёмной темы на уровне CSS без создания отдельных файлов стилей.

В корневом селекторе указывается color-scheme: light dark — браузер понимает, что страница готова работать в обеих темах, и подхватывает системные настройки пользователя. Все цвета определяются через кастомные свойства, куда передаётся light-dark(значение_для_светлой, значение_для_тёмной). Например, фон: background: light-dark(#f9f9f9, #1a1a1a).

Для ручного переключения достаточно скрипта из нескольких строк, меняющего color-scheme на light или darkна корневом элементе. Но сам рендеринг цветов, подстановка значений, реакция на медиа-запрос prefers-color-scheme — всё это уже встроено в CSS.

Модальные окна и всплывающие подсказки с Popover API

Раньше любой попап требовал управления классами, фокусом и z-index. Теперь достаточно добавить элементу атрибут popover и связать его с кнопкой через popovertarget.

По умолчанию поповер скрыт; при клике на кнопку он появляется поверх контента с автоматическим бэкдропом. Доступность зашита на уровне браузера — фокус автоматически перемещается внутрь, табуляция зацикливается, закрытие по Esc работает из коробки.

Бэкдроп стилизуется через псевдоэлемент ::backdrop. Псевдокласс :popover-open позволяет добавлять анимации и менять оформление именно в открытом состоянии. Никакого JavaScript, чистый HTML+CSS.

Аккордеоны с <details> и анимацией

Тег <details> существует давно, но его сложно было анимировать при раскрытии. Современные браузеры позволяют управлять видимостью контента через атрибут open и плавно менять opacity или height.

Достаточно скрыть содержимое по умолчанию (opacity: 0), а при наличии атрибута open сделать его видимым (opacity: 1) и добавить transition. Получается плавное появление/исчезание без единой строчки JS.

В будущем появится псевдоэлемент ::details-content, который даст ещё более гибкое управление анимацией раскрытия. Пока поддержка ограничена, но базовый вариант работает во всех современных браузерах.

Спойлеры и раскрывающиеся блоки через чекбокс

Классический приём, ставший ещё элегантнее. Блок с кратким и полным описанием управляется скрытым чекбоксом и привязанной к нему меткой.

По умолчанию длинный текст скрыт, виден только превью. При клике на метку чекбокс переходит в состояние :checked, через CSS-селектор :checked ~ .spoiler .spoiler-content длинный текст становится видимым, а превью скрывается.

Текст самой кнопки меняется через псевдоэлемент ::after с content. Если чекбокс выбран, у метки прописывается content: "Скрыть", иначе — "Читать дальше". Никакого JavaScript, полная адаптивность.

Итог Современные CSS и HTML закрывают огромный пласт интерфейсных задач, которые раньше считались прерогативой JavaScript. Светлые/тёмные темы, модальные окна, аккордеоны, спойлеры — всё это реализуется нативными средствами с лучшей производительностью и встроенной доступностью.