4. Écouter la préférence de mouvement
Tu ajoutes du mouvement a PulsaConf sans voler l'attention ni ignorer les préférences utilisateur. Détecte la demande système afin de supprimer les animations non essentielles susceptibles de gêner. Applique ce choix à .card, puis vérifie que la transition est courte, ciblée et desactivee avec prefers-reduced-motion.
Objectifs de la leçon
- Implémenter 4. Écouter la préférence de mouvement sans perdre le scenario PulsaConf.
- Relier prefers-reduced-motion au risque : une animation gratuite peut ralentir, distraire ou rendre l'interface inconfortable.
- Prouver que la transition est courte, ciblée et desactivee avec prefers-reduced-motion.
Intention
Tu ajoutes du mouvement a PulsaConf sans voler l'attention ni ignorer les préférences utilisateur. Détecte la demande système afin de supprimer les animations non essentielles susceptibles de gêner. Applique ce choix à .card, puis vérifie que la transition est courte, ciblée et desactivee avec prefers-reduced-motion.
prefers-reduced-motion doit repondre à une contrainte visible, pas décorer au hasard.
Méthode
Cible .card, ajoute une declaration utile, puis inspecte la règle active.
Le risque a éviter est : une animation gratuite peut ralentir, distraire ou rendre l'interface inconfortable.
Validation
4. Écouter la préférence de mouvement est termine quand les tests passent et que la transition est courte, ciblée et desactivee avec prefers-reduced-motion.
Relis aussi le focus, les textes longs et le petit écran.
Vocabulaire lié
- prefers-reduced-motion — Propriété ou motif CSS valide dans cette étape.
- .card — Sélecteur cible pour limiter les effets de bord.
- responsive — Capacité à rester utilisable selon les contraintes d'écran et de contenu.
Validation
- Je sais appliquer prefers-reduced-motion.
- Je prouve que la transition est courte, ciblée et desactivee avec prefers-reduced-motion.
- Je peux expliquer le choix.