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 для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
prefers-reduced-motion media feature
Экспериментальная
Chrome Полная поддержка 74Edge Нет поддержки НетFirefox Полная поддержка 63IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 10.1WebView Android Полная поддержка 74Chrome Android Полная поддержка 74Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 64Opera Android Нет поддержки НетSafari iOS Полная поддержка 10.3Samsung Internet Android ?

Легенда

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

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, nikolai-shabalin
Обновлялась последний раз: mdnwebdocs-bot,