Prefers-Color-Scheme и Prefers-Reduced-Motion
Учитывайте системные предпочтения пользователя для тёмного режима и уменьшенной интенсивности анимаций.
«Prefers-Color-Scheme и Prefers-Reduced-Motion» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Медиахарактеристики предпочтений пользователя
CSS может запрашивать системные предпочтения пользователя, не ограничиваясь размером экрана. Это позволяет автоматически включать режим dark и создавать анимации с учётом требований доступности без взаимодействия пользователя с сайтом.
prefers-color-scheme
Определяет, установил ли пользователь в своей системе светлый или dark-режим:
<p>This page follows your OS color-scheme preference.</p>
Реализация автоматического режима dark
Самый понятный вариант реализации использует переменные CSS, значения которых меняются в зависимости от предпочтения:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Некоторые пользователи испытывают тошноту или дискомфорт из-за анимации. Медиахарактеристика prefers-reduced-motion: reduce определяет это предпочтение доступности.
<div class="box spun"></div>
Учёт предпочтений по анимации
Вместо полного отключения анимации предложите альтернативные ненавязчивые варианты:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Определяет, предпочитает ли пользователь повышенную контрастность для доступности или пониженную контрастность. Соответственно изменяйте выбор цветов:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Некоторые пользователи с нарушениями зрения предпочитают меньшую прозрачность. Уменьшайте эффекты на основе backdrop-filter и opacity:
<div class="glass-card">Glass card</div>
Доступ к предпочтениям из JavaScript
Запрашивайте эти предпочтения из JavaScript с помощью window.matchMedia():
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
Системное предпочтение и ручное переопределение
По умолчанию учитывайте системное предпочтение, но позволяйте пользователям переопределять его с помощью переключателя toggle. Сохраняйте переопределение в localStorage и применяйте класс к <html>:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Определяет, включил ли пользователь режим экономии данных. Используйте изображения меньшего размера или пропускайте необязательные ресурсы:
<div class="hero">Hero banner</div>
Проверка в DevTools
В Chrome DevTools вкладка Отрисовка позволяет имитировать режим dark, уменьшенное движение и другие медиахарактеристики предпочтений, не изменяя настройки OS.
Быстрая проверка
Как лучше всего реализовать автоматический режим dark с поддержкой ручного переключателя пользователя?
Итоги
prefers-color-scheme включает автоматический режим dark. prefers-reduced-motion следует использовать для отключения или упрощения анимаций в целях доступности. Реализуйте оба варианта с помощью переменных CSS, чтобы код оставался понятным и удобным для поддержки. Всегда предоставляйте ручное переопределение, чтобы пользователи могли независимо от OS управлять своим предпочтением.
Часто задаваемые вопросы
Урок «Prefers-Color-Scheme и Prefers-Reduced-Motion» бесплатный?
Да — полный текст урока «Prefers-Color-Scheme и Prefers-Reduced-Motion» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Prefers-Color-Scheme и Prefers-Reduced-Motion»?
Учитывайте системные предпочтения пользователя для тёмного режима и уменьшенной интенсивности анимаций. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Prefers-Color-Scheme и Prefers-Reduced-Motion»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис и распространённые точки перелома
- Запросы ширины, высоты и ориентации
- Prefers-Color-Scheme и Prefers-Reduced-Motion
- Объединение нескольких медиазапросов