Aucun mouvement n'est toujours préfère le mouvement réduit

De nombreux développeurs utilisent un extrait CSS commun lors de la lutte contre la requête multimédia prefers-reduced-motion . Cet extrait vise à éliminer tous les mouvements sur un site Web si l'utilisateur a activé des paramètres de mouvement réduits dans son système d'exploitation. Cependant, cette approche n'est pas toujours idéale.

 @Media (préfert-réduisant le mouvement: réduire) {
  * {
    Durée d'animation: 0,01 ms! IMPORTANT;
    Count d'atelier d'animation: 1! IMPORTANT;
    Durée de transition: 0,01 ms! IMPORTANT;
    Scroll-Behavior: Auto! IMPORTANT;
  }
}

L'importance du prefers-reduced-motion

Le paramètre prefers-reduced-motion répond aux problèmes d'accessibilité liés au mouvement à l'écran. Pour les personnes atteintes de troubles vestibulaires, de migraines ou de déclencheurs de crise, l'animation excessive peut être débilitante. Comme le note Eric Bailey, la navigation sur le Web peut devenir un champ de mines d'animations inattendues.

Subtilité sur la suppression

Bien que l'envie de supprimer complètement toute l'animation soit forte, cela est souvent contre-productif. L'animation peut améliorer l'accessibilité, par exemple, en clarifiant les interactions complexes ou les relations entre les éléments. L'animation complètement invalidante supprime ces aspects bénéfiques. Une approche plus nuancée est préférable; Réduire, ralentir ou modifier les animations plutôt que de les éliminer entièrement.

Ben Nadel a démontré une méthode supérieure, en utilisant plusieurs @keyframes pour offrir à la fois une animation complète et une version en mouvement réduit. Un modal, par exemple, peut utiliser à la fois le fondu et l'échelle par défaut, mais ne se fonde que lorsque prefers-reduced-motion est actif.

 / * Par défaut: animation de mouvement réduite * /
@keyframes modal-enter {
  de {opacité: 0; }
  à {opacité: 1; }
}

/ * Remplacer la non-préférence: animation complète * /
@Media (préfert-réduction du mouvement: sans préférence) {
  @keyframes modal-enter {
    de {opacité: 0; transformée: échelle (0,7); }
    à {opacité: 1; transformée: échelle (1.0); }
  }
}

Cette approche priorise une solution réfléchie et réduite sur une interdiction générale de tous les mouvements.

Au-delà de CSS: Animations JavaScript

L'extrait CSS initial ne gère que efficacement les animations pilotées par CSS. Les animations JavaScript peuvent se comporter de manière imprévisible, ce qui entraîne potentiellement des conséquences involontaires, telles que les animations extrêmement rapides et désorientantes, comme l'a observé Josh Comeau. Par conséquent, une stratégie complète doit considérer les animations CSS et JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!