Что такое медиа-запрос prefers-reduced-motion и для чего он используется?

Что такое prefers-reduced-motion?

Медиа-запрос prefers-reduced-motion — это CSS-функция, которая проверяет системную настройку пользователя на уменьшение анимаций. Она возвращает одно из двух значений: no-preference (по умолчанию) или reduce (пользователь запросил минимизацию движения). Этот запрос является частью спецификации CSS Media Queries Level 5 и направлен на улучшение доступности веб-контента.

Зачем это нужно?

Многие люди испытывают дискомфорт, головокружение или тошноту при просмотре интенсивных анимаций, особенно те, у кого есть вестибулярные расстройства или мигрени. Используя prefers-reduced-motion, разработчики могут отключать или заменять анимации, делая сайт более комфортным для таких пользователей. Это также соответствует рекомендациям WCAG (Web Content Accessibility Guidelines).

Как использовать?

Запрос применяется в CSS или JavaScript. В CSS вы можете переопределить анимации для пользователей, которые предпочитают уменьшение движения. Пример:

/* Обычная анимация */
.element {
  animation: spin 2s infinite;
}

/* Отключаем анимацию для пользователей с настройкой reduce */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

В JavaScript можно проверить настройку через window.matchMedia:

const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (motionQuery.matches) {
  // Отключаем анимации
}

Где применять?

Этот медиа-запрос полезен на любых сайтах с анимациями: параллакс-эффекты, вращающиеся элементы, мигающие баннеры, переходы между страницами. Особенно важен для сайтов с большим количеством движения, например, портфолио или лендингов.

Вывод: Используйте prefers-reduced-motion для создания инклюзивного интерфейса, который уважает потребности пользователей с чувствительностью к движению. Это повышает доступность и улучшает пользовательский опыт.