La requête média "Preferreds-reduced-motion" détecte si l'utilisateur a demandé ou non le système d'exploitation afin de minimiser la quantité d'animation ou de mouvement qu'il utilise.
Tout le monde n'aime pas les animations ou les transitions décoratives, et certains utilisateurs expérimentent directement le mouvement
en cas de déficience parallaxe, d'effets de zoom, etc. Contenu multimédia des préférences de l'utilisateur
La requête prefers-reduced-motion
vous permet de concevoir une variante de votre site avec réduction de l'animation, pour les utilisateurs qui
ont exprimé cette préférence.
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Trop de mouvements dans la vie réelle et sur le Web
L'autre jour, je faisais du patin à glace avec mes enfants. C'était une belle journée, le soleil brillait et la glace la patinoire était remplie de personnes ⛸. Le seul problème: je ne gère pas bien la foule. Ainsi, avec un grand nombre de cibles mobiles, je ne me concentre sur rien, et je me retrouve perdu et j'ai le sentiment d'être complet. une surcharge visuelle, presque comme regarder une fourmilier 🐜.
<ph type="x-smartling-placeholder">La même chose peut parfois se produire sur le Web: annonces clignotantes, effets de parallaxe fantaisistes, effets surprenants
révéler des animations, des vidéos en lecture automatique, etc., le Web peut parfois être assez lourd...
Heureusement, contrairement à la réalité, il existe une solution à cela. Requête média CSS
prefers-reduced-motion
permet aux développeurs de créer une variante d'une page pour les utilisateurs qui préfèrent
les mouvements ont été réduits. Cela peut aller de l'absence de lecture automatique des vidéos,
désactiver certains effets purement décoratifs, à la refonte complète d'une page pour certains utilisateurs.
Avant de plonger dans le détail de cette fonctionnalité, je vais prendre un peu de recul et réfléchir à la façon dont les animations sont utilisées. sur le Web. Si vous le souhaitez, vous pouvez également ignorer les informations générales accéder directement aux détails techniques.
Animation sur le Web
Les animations sont souvent utilisées pour fournir des commentaires à l'utilisateur, par exemple pour lui indiquer que une action a été reçue et est en cours de traitement. Par exemple, sur un site marchand, un produit peut être animé pour "voler" ; dans un panier d'achat virtuel, représenté sous la forme d'une icône dans le coin supérieur droit le site.
Un autre cas d'utilisation implique l'utilisation du mouvement pour pirater la perception des utilisateurs en utilisant un mélange d'écrans de squelette, de métadonnées contextuelles et d'aperçus d'images de faible qualité pour occupent beaucoup de temps de l'utilisateur et rendent l'ensemble de l'expérience plus rapide. L'idée est de donner le contexte à l'utilisateur de ce qui va suivre et en attendant, charger les choses le plus rapidement possible.
Enfin, il existe des effets décoratifs : dégradés animés, défilement en parallaxe, arrière-plan, etc. des vidéos et plusieurs autres. Si de nombreux utilisateurs apprécient ces animations, certains les détestent parce que ils se sentent distraits ou ralentis par eux. Dans le pire des cas, les utilisateurs peuvent même souffrir de mouvements comme s'il s'agissait d'une expérience de la vie réelle. Pour ces utilisateurs, réduire les animations est donc nécessaire.
Trouble du spectre vestibulaire déclenché par un mouvement
Certains utilisateurs la distraction ou la nausée d'un contenu animé. Par exemple, les animations de défilement peuvent provoquer des troubles vestibulaires lorsque des éléments autres que le associé au défilement se déplacent beaucoup. Par exemple, les animations de défilement parallaxe peut provoquer des troubles vestibulaires, car les éléments en arrière-plan se déplacent à une vitesse différente de celle du premier plan éléments. Les réactions associées au trouble vestibulaire (oreille interne) incluent des vertiges, des nausées et des migraines des maux de tête et peuvent nécessiter de se reposer pour récupérer.
Supprimer les mouvements sur les systèmes d'exploitation
De nombreux systèmes d'exploitation disposent de paramètres d'accessibilité permettant de spécifier une préférence pour la réduction pendant longtemps. Les captures d'écran suivantes montrent la préférence Réduire le mouvement de macOS Mojave et Préférence Supprimer les animations d'Android Pie. Lorsque ces préférences sont cochées, le système d'exploitation de ne pas utiliser d'effets décoratifs comme les animations de lancement de l'appli. Les applications elles-mêmes peuvent et doit également respecter ce paramètre et supprimer toutes les animations inutiles.
Supprimer l'animation sur le Web
Dans Requêtes média de niveau 5, l'animation réduite
des préférences de l'utilisateur sur le Web également. Les requêtes média permettent aux auteurs de tester et d'interroger des valeurs ou des caractéristiques
du user-agent ou de l'appareil d'affichage indépendamment du document affiché. La requête média
prefers-reduced-motion
est utilisé
pour détecter si l'utilisateur a défini une préférence pour le système d'exploitation afin de réduire la quantité d'animation ou
le mouvement qu'il utilise. Deux valeurs sont possibles:
no-preference
: indique que l'utilisateur n'a fait aucune préférence dans le système d'exploitation sous-jacent du système d'exploitation. Cette valeur de mot clé est évaluée commefalse
dans le contexte booléen.reduce
: indique que l'utilisateur a défini une préférence de système d'exploitation pour indiquer que les interfaces doivent minimiser les mouvements ou les animations, de préférence au point où tous les éléments non essentiels le mouvement est supprimé.
Utiliser la requête média à partir de contextes CSS et JavaScript
Comme pour toutes les requêtes média, prefers-reduced-motion
peut être vérifié à partir d'un contexte CSS et d'un
Contexte JavaScript.
Prenons l'exemple d'un bouton d'inscription important sur lequel je souhaite que l'utilisateur clique. Je vous pouvez définir un "vibreur" qui attire l'attention mais en tant que citoyen du Web, je ne jouerai pour les utilisateurs qui sont explicitement d’accord avec les animations, mais pas tous les autres, qui peuvent être des utilisateurs qui ont désactivé les animations ou qui consultent des navigateurs qui ne comprennent pas la requête média.
/*
If the user has expressed their preference for
reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
button {
/* `vibrate` keyframes are defined elsewhere */
animation: vibrate 0.3s linear infinite both;
}
}
Pour illustrer l'utilisation de prefers-reduced-motion
avec JavaScript, imaginez que j'ai
défini une animation complexe avec
API Web Animations : Alors que les règles CSS
est déclenchée dynamiquement par le navigateur lorsque les préférences de l'utilisateur changent, pour JavaScript
animations. Je dois écouter moi-même les modifications, puis arrêter manuellement ce qui est potentiellement en cours de transfert.
animations (ou les redémarrer si l'utilisateur me le permet):
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
console.log(mediaQuery.media, mediaQuery.matches);
// Stop JavaScript-based animations.
});
Notez que les parenthèses autour de la requête média sont obligatoires:
window.matchMedia('prefers-reduced-motion: reduce');
window.matchMedia('(prefers-reduced-motion: reduce)');
Utiliser la requête média à partir de contextes <picture>
Un cas d'utilisation intéressant consiste à faire en sorte que la lecture d'un fichier AVIF, WebP ou GIF animé dépende
media
. Si (prefers-reduced-motion: no-preference)
renvoie true
, vous pouvez
afficher la version animée, sinon la version statique:
<picture>
<!-- Animated versions. -->
<source
srcset="nyancat.avifs"
type="image/avif"
media="(prefers-reduced-motion: no-preference)"
/>
<source
srcset="nyancat.gif"
type="image/gif"
media="(prefers-reduced-motion: no-preference)"
/>
<!-- Static versions. -->
<img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>
Vous pouvez voir l'exemple suivant. Essayez de modifier les préférences de mouvement de votre appareil pour voir la différence.
Découvrir les préférences de l'utilisateur au moment de la demande
En-tête d'indication du client Sec-CH-Prefers-Reduced-Motion
permet aux sites d'obtenir les préférences de mouvement de l'utilisateur au moment de la demande
permettant aux serveurs d'intégrer le code CSS approprié pour des raisons de performances.
Démo
J'ai créé une petite démo basée sur les incroyables histoires de Rogério Vicente
🐈 Chats à l'état HTTP : Tout d'abord, prenez un moment
pour apprécier cette blague,
hilarant et j’attendrai. Maintenant que vous êtes de retour, laissez-moi vous présenter
demo. Lorsque vous faites défiler l'écran, chaque catégorie d'état HTTP
apparaît en alternance
du côté droit ou du côté gauche. Elle est parfaitement fluide à 60 FPS
mais comme nous l'avons vu précédemment, certains utilisateurs peuvent ne l'aimer qu'une seule fois ou même tomber malade.
La démo est programmée pour respecter prefers-reduced-motion
. Cela fonctionne même dynamiquement, afin que les utilisateurs puissent
modifier leurs préférences à la volée, sans qu'il soit nécessaire d'actualiser la page. Si un utilisateur préfère les mouvements réduits,
les animations de révélation inutiles ont disparu et il ne reste que le mouvement de défilement normal. La
L'enregistrement d'écran suivant montre la démonstration en action:
Conclusions
Respecter les préférences des utilisateurs est essentiel pour les sites Web modernes, et les navigateurs exposent de plus en plus
pour permettre aux
développeurs Web de le faire. Autre exemple lancé :
prefers-color-scheme
, qui
détecte si l'utilisateur préfère un jeu de couleurs clair ou sombre. Vous pouvez lire
tout sur
prefers-color-scheme
dans mon article Hello Darkness, My Old Friend 🌒.
Le groupe de travail CSS standardise davantage
requêtes média de préférences utilisateur telles que
prefers-reduced-transparency
(détecte si l'utilisateur préfère une transparence réduite)
prefers-contrast
(détecte si l'utilisateur
a demandé au système d'augmenter ou de réduire le contraste entre les couleurs adjacentes).
et inverted-colors
(détecte si l'utilisateur
préfère les couleurs inversées).
(Bonus) Forcer la réduction des mouvements sur tous les sites Web
Tous les sites n'utiliseront pas prefers-reduced-motion
, ou ce n'est peut-être pas assez important pour vous.
Si vous souhaitez, pour une raison quelconque, arrêter l'animation sur tous les sites Web, c'est possible. Une façon de faire
cela se produit consiste à injecter une feuille de style avec le CSS suivant dans chaque page Web que vous consultez. Il y
plusieurs
extensions de navigateur
(vous l'utilisez à vos propres risques !),
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
transition-delay: -1ms !important;
}
}
Son fonctionnement est le suivant : le CSS précédent remplace la durée de toutes les animations et transitions.
sur une durée si courte
qu’ils ne sont plus perceptibles. Certains sites Web dépendent d'une animation
doit s'exécuter correctement pour fonctionner correctement (peut-être parce qu'une certaine étape dépend du déclenchement de la
événement animationend
),
l'approche plus radicale animation: none !important;
ne fonctionnerait pas. Même le hack
précédent n’est pas
de réussir sur tous les sites Web (par exemple, il ne peut pas interrompre le mouvement initié à l'aide du
API Web Animations).
le désactiver lorsque vous
remarquez un dysfonctionnement.
Liens associés
- Dernier brouillon de l'éditeur de Requêtes média niveau 5 .
prefers-reduced-motion
activé État de la plate-forme Chromeprefers-reduced-motion
Bug Chromium.- Clignotement Projet d'implémentation de la publication.
Remerciements
Un grand merci à Stephen McGruer qui a mis en œuvre
prefers-reduced-motion
dans Chrome et, avec
Rob Dodson, a également lu ce document.
Image héros par Hannah Cauhepe sur Unsplash.