CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 9 · Exercice de TD
Le bandeau qui défile
Responsive design · niveau 1 (application)
Énoncé
Un bandeau fait défiler en continu le titre des nouveautés avec l'animation animation: defiler 12s linear infinite (les animations sont l'objet du chapitre 10 ; l'animation defiler est fournie). Modifier la feuille pour que le texte reste immobile chez les visiteurs qui ont demandé à réduire les animations. Pourquoi est-ce important pour un mouvement continu ?
Corrigé
On ne déclare l'animation que si le visiteur n'a rien demandé :
@media (prefers-reduced-motion: no-preference) {
.bandeau p {
animation: defiler 12s linear infinite;
}
}En simulant reduce, Chromium calcule animation-name: none ; sans préférence, defiler (page code/ch9/exercices/bandeau.html). Un mouvement continu, qui ne s'arrête jamais, est le plus gênant pour les personnes sensibles : il occupe le champ de vision en permanence. Les règles d'accessibilité (WCAG) demandent d'ailleurs qu'un contenu qui bouge plus de cinq secondes puisse être mis en pause ; le chapitre 10 y reviendra.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.