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 featureChrome Полная поддержка 74Edge Полная поддержка 79Firefox Полная поддержка 63IE Нет поддержки НетOpera Полная поддержка 62Safari Полная поддержка 10.1WebView Android Полная поддержка 74Chrome Android Полная поддержка 74Firefox Android Полная поддержка 64Opera Android Полная поддержка 53Safari iOS Полная поддержка 10.3Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

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