From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- .../web/css/@media/prefers-reduced-motion/index.md | 98 +++++++++------------- 1 file changed, 40 insertions(+), 58 deletions(-) (limited to 'files/fr/web/css/@media/prefers-reduced-motion') diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md index daf259477f..602abf4761 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -10,48 +10,44 @@ tags: - media feature translation_of: Web/CSS/@media/prefers-reduced-motion --- -
{{CSSRef}}
+{{CSSRef}} -

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

+La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) [CSS](/fr/docs/Web/CSS) **`prefers-reduced-motion`** détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement. -
-

Attention : Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.

-
+> **Attention :** Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation. -

Syntaxe

+## 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é.
-
+- `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

+## 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 :

+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 : Préférences système > Accessibilité > Affichage > Réduire les animations. +- Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations. +- Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations. +- Dans la page `about:config` de Firefox : Ajoutez une préférence numérique appelée `ui.prefersReducedMotion` et définissez sa valeur soit à `0` pour des animations complètes, soit à `1` pour indiquer une préférence pour des mouvements réduits. Les modifications apportées à cette préférence prennent effet immédiatement. -

Exemple

+## Exemple -

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é.

+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

+### HTML -
<div class="animation">boîte animée</div>
-
+```html +
boîte animée
+``` -

CSS

+### CSS -
.animation {
+```css
+.animation {
   animation: vibrate 0.3s linear infinite both;
 }
 
@@ -60,9 +56,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
   animation: none;
   }
 }
-
+``` - +``` -

Résultat

+### Résultat -

{{EmbedLiveSample("example")}}

+{{EmbedLiveSample("example")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+{{Compat("css.at-rules.media.prefers-reduced-motion")}} -

Voir aussi

+## Voir aussi - +- [Une introduction aux requêtes média pour la réduction de mouvement](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) comprend des exemples de déclencheurs de mouvements vestibulaires. -- cgit v1.2.3-54-g00ecf