prefers-reduced-motion

CSS медиа функция prefers-reduced-motion может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.

Синтаксис

no-preference
Указывает, что пользователь не сделал никаких предпочтений, известных системе.
reduce
Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.

Примеры

В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.

HTML

<div class="animation">animated box</div>

CSS

.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}

Результат

Спецификация

Specification Status Comment
Media Queries Level 5
Определение 'prefers-reduced-motion' в этой спецификации.
Редакторский черновик Изначальное определение.

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
prefers-reduced-motion media feature
Экспериментальная
Chrome Полная поддержка 74Edge Нет поддержки НетFirefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка 62Safari Полная поддержка 10.1WebView Android Полная поддержка 74Chrome Android Полная поддержка 74Firefox Android Полная поддержка 64Opera Android Полная поддержка 53Safari iOS Полная поддержка 10.3Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

Смотрите также