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.
CSS Elevator est un projet ingénieux démontrant comment créer une machine à états interactive (un ascenseur) en CSS pur, sans JavaScript. L’auteur utilise des variables CSS personnalisées (via @property), des compteurs, la pseudo-classe :has(), et des transitions pour simuler le déplacement entre les étages, calculer la durée des trajets, afficher la direction, et même gérer l’accessibilité avec aria-live. Les boutons radio servent de déclencheurs d’état, tandis que des astuces comme le délai de mise à jour des variables permettent de mémoriser l’état précédent. Le résultat est une animation fluide, réactive et accessible, prouvant que le CSS moderne peut gérer des logiques complexes, idéal pour des prototypes ou des environnements sans JavaScript.
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre (via sebsauvage.net et le warrior du dimanche)
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre