Chrome 126 active les View Transitions entre pages, sans passer par une application monopage

2024-06-11 · Éditeur : Google Chrome · Domaine : Design, UX et UI

Avec Chrome 126, les transitions animées entre deux pages d'un même site deviennent possibles en CSS, sans réécrire le site en application monopage.

### Contexte Chrome 126 sort en version stable le **11 juin 2024**. Sa note de version met en avant les **View Transitions entre documents** pour les navigations de même origine. Jusque-là, l'API View Transitions n'était utilisable que dans une architecture d'application monopage (SPA). ### Caractéristiques - Transitions activées par défaut pour les navigations **de même origine**. - Inscription explicite des deux pages, celle qu'on quitte et celle qu'on ouvre, avec la règle `@view-transition { navigation: auto; }`. - Mêmes briques que les transitions au sein d'un document : pseudo-éléments `::view-transition-*` et `view-transition-name` pour animer un élément d'une page à l'autre. - La même version réactive l'API CloseWatcher, utile pour fermer proprement `<dialog>` et `popover` (touche Échap, geste retour sur Android). ### Pourquoi c'est important Les transitions entre écrans servent la compréhension : l'utilisateur voit d'où vient et où va un élément. Elles imposaient jusqu'ici un routeur JavaScript côté client. Un site de contenu, un catalogue ou une application rendue côté serveur peut désormais les obtenir avec quelques lignes de CSS, en amélioration progressive : les navigateurs qui ne les gèrent pas affichent simplement la page suivante. ### À retenir C'est le point de départ d'un chantier inter-navigateurs : les View Transitions figurent dans Interop 2025, et la version entre documents devient un domaine prioritaire d'Interop 2026.

Tags : CSS, Animation, Navigateurs