diff options
Diffstat (limited to 'files/fr/web/css/@media/prefers-reduced-motion/index.html')
| -rw-r--r-- | files/fr/web/css/@media/prefers-reduced-motion/index.html | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..32e0c2bcd8 --- /dev/null +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,135 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - Accessibilité + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>Cette valeur indique que l'utilisateur n'a rien indiqué au système.</dd> + <dt><code><dfn>reduce</dfn></code></dt> + <dd>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é.</dd> +</dl> + +<h2 id="Gestion_des_préférences">Gestion des préférences</h2> + +<p>Dans Firefox, la valeur <code>reduce</code> est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :</p> + +<ul> + <li>Pour GTK/Gnome, si <code>gtk-enable-animation</code> vaut <code>false</code>. Cela peut être configuré par le menu « Ajustements » de Gnome.</li> + <li>Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows</li> + <li>Pour macOS (NDT : libellés à vérifier) : Préférences système > Accessibilité > Affichage > Réduction de mouvement.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<p>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é.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="animation">boîte animée</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.animation { + animation: vibrate 0.3s linear infinite both; +} + +@media (prefers-reduced-motion: reduce) { + .animation { + animation: none; + } +} +</pre> + +<div class="hidden"> +<pre class="brush: css">.animation { + background-color: rebeccapurple; + color: #fff; + font: 1.2em Helvetica, arial, sans-serif; + width: 200px; + padding: 1em; + border-radius: 1em; + text-align: center; +} + +/* ---------------------------------------------- + * Generated by Animista on 2018-9-2 13:47:0 + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation vibrate-1 + * ---------------------------------------- + */ + +@keyframes vibrate { + 0% { + transform: translate(0); + } + 20% { + transform: translate(-2px, 2px); + } + 40% { + transform: translate(-2px, -2px); + } + 60% { + transform: translate(2px, 2px); + } + 80% { + transform: translate(2px, -2px); + } + 100% { + transform: translate(0); + } +} +</pre> +</div> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Une introduction aux requêtes média pour la réduction de mouvement</a></li> +</ul> |