prefers-reduced-motion

La caractéristique média prefers-reduced-motion détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.

Syntaxe

no-preference
Cette valeur indique que l'utilisateur n'a rien indiqué au système.
reduce
Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.

Gestion des préférences

Dans Firefox, la valeur reduce est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :

  • Pour GTK/Gnome, si gtk-enable-animation vaut false. Cela peut être configuré par le menu « Ajustements » de Gnome.
  • Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows
  • Pour macOS (NDT : libellés à vérifier) : Préférences système > Accessibilité > Affichage > Réduction de mouvement.

Exemples

Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.

HTML

<div class="animation">boîte animée</div>

CSS

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

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

Résultat

Spécifications

Spécification État Commentaires
Media Queries Level 5
La définition de 'prefers-reduced-motion' dans cette spécification.
Brouillon de l'éditeur Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
prefers-reduced-motion media feature
Expérimentale
Chrome Support complet 74Edge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Support complet 62Safari Support complet 10.1WebView Android Support complet 74Chrome Android Support complet 74Firefox Android Support complet 64Opera Android Support complet 53Safari iOS Support complet 10.3Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi