Урок 38. Справочник: prefers-* media: доступность и тема

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~80 мин 🎯 Сложность: Средняя
#prefers-color-scheme #prefers-reduced-motion #prefers-contrast #prefers-reduced-data #color-scheme

⚡ Кратко

Четыре инструмента доступности: prefers-color-scheme (тема), prefers-reduced-motion (движение), prefers-contrast (контраст) и свойство color-scheme (системные элементы под тему).

Медиа-фичи prefers-* и их значения

Медиа-фичаЗначенияЗачем нужна
prefers-color-schemelight · darkСистемная светлая или тёмная тема
prefers-reduced-motionno-preference · reduceПросьба убрать анимации и движение
prefers-contrastno-preference · more · less · customЗапрос повышенного/пониженного контраста
prefers-reduced-datano-preference · reduceРежим экономии трафика

Свойство color-scheme

ЗначениеЧто делает
color-scheme: light dark;Страница поддерживает обе темы — браузер красит скроллбары, поля ввода, чекбоксы под активную
color-scheme: dark;Принудительно тёмные системные элементы
color-scheme: normal;Поведение по умолчанию (как было)

Короткие шаблоны

/* тёмная тема */
@media (prefers-color-scheme: dark) { :root { --bg:#111827; --text:#f8fafc; } }

/* меньше движения */
@media (prefers-reduced-motion: reduce) { *{ animation-duration:.01ms !important; } }

/* больше контраста */
@media (prefers-contrast: more) { .card{ border:2px solid currentColor; } }

/* системные элементы под тему */
:root { color-scheme: light dark; }

Палитра урока

light bg
light text
dark bg
dark text
Правило: адаптивность — это не только ширина viewport. Учитывайте тему, читаемость, движение и контраст, которые задаёт сам пользователь.

Навигация