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
136
137
138
139
140
|
---
title: prefers-reduced-motion
slug: Web/CSS/@media/prefers-reduced-motion
tags:
- '@media'
- Accessibility
- CSS
- Media Queries
- Reference
- media feature
translation_of: Web/CSS/@media/prefers-reduced-motion
---
<div>{{CSSRef}}</div>
<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</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>
<div class="warning">
<p><strong>Attention :</strong> 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.</p>
</div>
<h2 id="syntax">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="user_preferences">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 : Préférences système > Accessibilité > Affichage > Réduire les animations.</li>
<li>Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations.</li>
<li>Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations.</li>
<li>Dans la page <code>about:config</code> de Firefox : Ajoutez une préférence numérique appelée <code>ui.prefersReducedMotion</code> et définissez sa valeur soit à <code>0</code> pour des animations complètes, soit à <code>1</code> pour indiquer une préférence pour des mouvements réduits. Les modifications apportées à cette préférence prennent effet immédiatement.</li>
</ul>
<h2 id="example">Exemple</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>
<pre class="brush: css hidden">.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>
<h3 id="result">Résultat</h3>
<p>{{EmbedLiveSample("example")}}</p>
<h2 id="specifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</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="browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
<h2 id="see_also">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>
<li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion (WebKit Blog)</a> comprend des exemples de déclencheurs de mouvements vestibulaires.</li>
</ul>
|
