1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
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>
|
