L’article aborde les difficultés rencontrées avec les Cross-Document View Transitions, une fonctionnalité permettant d’animer les transitions entre pages HTML classiques sans framework. L’auteur explique que les tutoriels obsolètes, utilisant une balise <meta> désormais dépréciée, induisent en erreur, tandis que les solutions pour Single-Page Applications (SPA) ne s’appliquent pas aux sites multi-pages. Les problèmes courants incluent des transitions silencieusement bloquées par un délai de 4 secondes, des distorsions d’images ou des styles CSS complexes pour gérer les noms de transitions.
L’auteur souligne l’absence de documentation claire et actualisée, rendant l’implémentation ardue malgré des démos prometteuses. Il annonce une série en deux parties pour clarifier les bonnes pratiques, comme l’utilisation de l’API @view-transition en CSS, la gestion des événements pagereveal et pageswap, ou encore l’optimisation des noms de transitions pour éviter des fichiers CSS surchargés. La seconde partie promet des solutions pour les projets à grande échelle, notamment la gestion des animations avec prefers-reduced-motion.
Josh W. Comeau explique comment la fonction CSS linear() permet de créer des animations avancées (ressorts, rebonds, etc.) directement en CSS, sans dépendre de bibliothèques JavaScript. Contrairement aux courbes de Bézier traditionnelles, linear() utilise une série de points pour dessiner une courbe d'animation personnalisée, offrant ainsi plus de flexibilité. L'article présente des outils comme Linear() Easing Generator et EasingWizard pour générer automatiquement ces valeurs, optimisant ainsi la création d'animations fluides et naturelles. Cependant, cette approche a des limites : elle reste basée sur le temps (contrairement aux animations physiques réelles), peut mal gérer les interruptions, et nécessite beaucoup de points pour un rendu réaliste. Malgré cela, les tests montrent un impact minimal sur les performances. L'auteur recommande d'utiliser des variables CSS pour stocker les fonctions linear() et de prévoir des alternatives pour les navigateurs non compatibles. Une méthode efficace pour enrichir les animations CSS tout en respectant les préférences utilisateur (comme prefers-reduced-motion).
Cet article explore l'importance de prendre en compte les préférences des utilisateurs en matière d'animations sur les sites web, notamment grâce à la propriété CSS prefers-reduced-motion. Intégrée dans les navigateurs entre 2018 et 2020, cette préférence permet aux utilisateurs de réduire ou de supprimer les animations non essentielles, améliorant ainsi l'accessibilité pour ceux qui peuvent être gênés par les mouvements à l'écran. L'article explique comment utiliser cette propriété en CSS et JavaScript pour adapter les interfaces en fonction des préférences des utilisateurs, tout en fournissant des exemples de code pratiques.
L'auteur présente 2 règles CSS "at-rule" (@media ...) très pratiques pour l'accessibilité : prefers-color-scheme et prefers-reduced-motion