Nouveautés CSS et UI: édition Google I/O 2023

Una Kravets

Bramus

Adam Argyle

Les derniers mois ont marqué l'âge d'or de l'UI Web. De nouvelles fonctionnalités de plate-forme sont disponibles avec une adoption multi-navigateur étroite. Elles offrent plus de fonctionnalités Web et de personnalisation que jamais.

Voici 20 des fonctionnalités les plus intéressantes et les plus utiles qui ont été lancées récemment ou qui le seront bientôt :

• Requêtes de conteneur
• Requêtes de style
• sélecteur :has()
• Microsyntaxe nth-of
• text-wrap: balance
• initial-letter
• Unités de fenêtre d'affichage dynamiques
• Espaces colorimétriques à large gamme
• color-mix()
• Imbrication
• Calques en cascade
• Styles limités
• Fonctions trigonométriques
• Propriétés de transformation individuelles
• popover
• positionnement de l'ancre
• selectmenu
• Transitions de propriétés discrètes
• Animations déclenchées par le défilement
• Transitions de vue

Le nouveau format responsif

Commençons par découvrir quelques nouvelles fonctionnalités de conception responsives. Les nouvelles fonctionnalités de la plate-forme vous permettent de créer des interfaces logiques avec des composants qui possèdent leurs propres informations de style responsives, de créer des interfaces qui exploitent les capacités du système pour offrir des UI plus natives et de permettre à l'utilisateur de participer au processus de conception grâce à des requêtes de préférences utilisateur pour une personnalisation complète.

Requêtes de conteneur

Les requêtes de conteneur sont récemment devenues stables sur tous les navigateurs modernes. Ils vous permettent d'interroger la taille et le style d'un élément parent pour déterminer les styles à appliquer à l'un de ses enfants. Les requêtes média ne peuvent accéder aux informations de la fenêtre d'affichage et les exploiter. Cela signifie qu'elles ne peuvent fonctionner que sur une vue macro de la mise en page. Les requêtes de conteneur, quant à elles, sont un outil plus précis qui peut prendre en charge n'importe quel nombre de mises en page ou de mises en page dans des mises en page.

Dans l'exemple de boîte de réception suivant, la barre latérale Boîte de réception principale et Favoris sont toutes deux des conteneurs. La mise en page en grille des e-mails s'ajuste et l'horodatage des e-mails s'affiche ou se masque en fonction de l'espace disponible. Il s'agit exactement du même composant sur la page, mais il apparaît dans différentes vues.

Comme nous avons une requête de conteneur, les styles de ces composants sont dynamiques. Si vous ajustez la taille et la mise en page de la page, les composants s'adaptent à l'espace qui leur est attribué individuellement. La barre latérale devient une barre supérieure avec plus d'espace, et la mise en page ressemble davantage à la boîte de réception principale. Lorsqu'il y a moins d'espace, ils s'affichent tous les deux dans un format condensé.

Pour en savoir plus sur les requêtes de conteneur et la création de composants logiques, consultez cet article.

Requêtes de style

La spécification des requêtes de conteneur vous permet également d'interroger les valeurs de style d'un conteneur parent. Cette fonctionnalité est actuellement partiellement implémentée dans Chrome 111, où vous pouvez utiliser des propriétés personnalisées CSS pour appliquer des styles de conteneur.

L'exemple suivant utilise des caractéristiques météorologiques stockées dans des valeurs de propriétés personnalisées (pluie, soleil et nuages, par exemple) pour définir le style de l'arrière-plan et de l'icône d'indicateur de la carte.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Ce n'est que le début pour les requêtes de style. À l'avenir, nous disposerons de requêtes booléennes pour déterminer si une valeur de propriété personnalisée existe et réduire la répétition du code. Nous discutons actuellement des requêtes de plage pour appliquer des styles en fonction d'une plage de valeurs. Cela permettrait d'appliquer les styles affichés ici en utilisant une valeur en pourcentage pour la probabilité de pluie ou la couverture nuageuse.

Pour en savoir plus et voir d'autres démonstrations, consultez notre article de blog sur les requêtes de style.

:has()

En parlant de fonctionnalités dynamiques et puissantes, le sélecteur :has() est l'une des nouvelles fonctionnalités CSS les plus puissantes qui arrivent dans les navigateurs modernes. Avec :has(), vous pouvez appliquer des styles en vérifiant si un élément parent contient des enfants spécifiques ou si ces enfants sont dans un état spécifique. Cela signifie que nous disposons désormais d'un sélecteur parent.

En vous appuyant sur l'exemple de requête de conteneur, vous pouvez utiliser :has() pour rendre les composants encore plus dynamiques. Dans cet exemple, un arrière-plan gris est appliqué à un élément comportant un élément "star", et un arrière-plan bleu à un élément comportant une case à cocher cochée.

Toutefois, cette API ne se limite pas à la sélection de parents. Vous pouvez également styliser les enfants dans le parent. Par exemple, le titre est en gras lorsque l'élément comporte l'élément étoile. Pour ce faire, utilisez .item:has(.star) .title. L'utilisation du sélecteur :has() vous donne accès aux éléments parents, aux éléments enfants et même aux éléments frères. Cela en fait une API très flexible, avec de nouveaux cas d'utilisation qui apparaissent chaque jour.

Pour en savoir plus et découvrir d'autres démos, consultez cet article de blog sur :has().

Syntaxe nth-of

La plate-forme Web propose désormais une sélection nth-child plus avancée. La syntaxe avancée nth-child fournit un nouveau mot clé ("of"), qui vous permet d'utiliser la microsyntaxe existante An+B, avec un sous-ensemble plus spécifique dans lequel effectuer la recherche.

Si vous utilisez nth-child normal, tel que :nth-child(2) sur la classe spéciale, le navigateur sélectionnera l'élément auquel la classe spéciale est appliquée et qui est également le deuxième enfant. Cela contraste avec :nth-child(2 of .special), qui préfiltrera d'abord tous les éléments .special, puis sélectionnera le deuxième de cette liste.

Pour en savoir plus sur cette fonctionnalité, consultez notre article sur la syntaxe nth-of.

text-wrap: balance

Les sélecteurs et les requêtes de style ne sont pas les seuls endroits où nous pouvons intégrer de la logique dans nos styles. La typographie en est un autre. À partir de Chrome 114, vous pouvez équilibrer l'habillage du texte pour les titres à l'aide de la propriété text-wrap avec la valeur balance.

Pour équilibrer le texte, le navigateur effectue une recherche binaire de la largeur la plus petite qui ne provoque pas de lignes supplémentaires, en s'arrêtant à un pixel CSS (et non un pixel d'affichage). Pour minimiser davantage les étapes de la recherche binaire, le navigateur commence par 80 % de la largeur de ligne moyenne.

Pour en savoir plus, consultez cet article.

initial-letter

initial-letter est une autre amélioration intéressante pour la typographie Web. Cette propriété CSS vous permet de mieux contrôler le style des lettrines insérées.

Vous utilisez initial-letter sur le pseudo-élément :first-letter pour spécifier : la taille de la lettre en fonction du nombre de lignes qu'elle occupe. Décalage de bloc ou "sink" de la lettre, qui indique où elle se trouve.

Pour en savoir plus sur l'utilisation de intial-letter, cliquez ici.

Unités de fenêtre d'affichage dynamiques

Les développeurs Web sont souvent confrontés à un problème : le dimensionnement précis et cohérent de la fenêtre d'affichage complète, en particulier sur les appareils mobiles. En tant que développeur, vous souhaitez que 100vh (100 % de la hauteur de la fenêtre d'affichage) signifie "être aussi haut que la fenêtre d'affichage". Toutefois, l'unité vh ne tient pas compte d'éléments tels que les barres de navigation rétractables sur mobile. Elle est donc parfois trop longue et provoque un défilement.

Pour résoudre ce problème, nous avons ajouté de nouvelles valeurs d'unité sur la plate-forme Web, y compris : - la hauteur et la largeur de la petite fenêtre d'affichage (ou svh et svw), qui représentent la plus petite taille de fenêtre d'affichage active. - Hauteur et largeur de la fenêtre d'affichage élevées (lvh et lvw), qui représentent la taille la plus grande. - Hauteur et largeur dynamiques de la fenêtre d'affichage (dvh et dvw).

La valeur des unités de fenêtre d'affichage dynamiques change lorsque les barres d'outils dynamiques supplémentaires du navigateur, telles que la barre d'adresse en haut ou la barre d'onglets en bas, sont visibles ou non.

Pour en savoir plus sur ces nouvelles unités, consultez Unités de fenêtre d'affichage grandes, petites et dynamiques.

Espaces colorimétriques à large gamme

Les espaces colorimétriques à large gamme sont une autre nouveauté clé de la plate-forme Web. Avant que les couleurs à large gamme ne soient disponibles sur la plate-forme Web, vous pouviez prendre une photo avec des couleurs vives, visibles sur les appareils modernes, mais vous ne pouviez pas faire correspondre un bouton, une couleur de texte ou un arrière-plan à ces valeurs vives.

Mais nous disposons désormais d'une gamme de nouveaux espaces colorimétriques sur la plate-forme Web, y compris REC2020, P3, XYZ, LAB, OKLAB, LCH et OKLCH. Découvrez les nouveaux espaces colorimétriques Web et bien plus encore dans le Guide des couleurs HD.

Dans les outils de développement, vous pouvez immédiatement voir comment la gamme de couleurs s'est étendue, avec cette ligne blanche qui délimite la fin de la gamme sRGB et le début de la gamme de couleurs à gamut étendu.

De nombreux outils supplémentaires sont disponibles pour les couleurs. Ne manquez pas non plus toutes les améliorations apportées aux dégradés. Adam Argyle a même créé un tout nouvel outil pour vous aider à essayer un nouveau sélecteur de couleurs Web et un générateur de dégradés. Essayez-le sur gradient.style.

color-mix()

La fonction color-mix() permet d'étendre les espaces colorimétriques. Cette fonction permet de mélanger deux valeurs de couleur pour créer de nouvelles valeurs en fonction des canaux des couleurs mélangées. L'espace colorimétrique dans lequel vous effectuez le mélange a une incidence sur les résultats. Travailler dans un espace colorimétrique plus perceptuel comme oklch utilisera une gamme de couleurs différente de celle de srgb, par exemple.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

La fonction color-mix() offre une fonctionnalité très demandée : la possibilité de conserver les valeurs de couleur opaque tout en leur ajoutant de la transparence. Vous pouvez désormais utiliser les variables de couleur de votre marque pour créer des variations de ces couleurs avec différentes opacités. Pour ce faire, mélangez une couleur avec du transparent. Si vous mélangez le bleu de votre marque avec 10 % de transparence, vous obtenez une couleur de marque opaque à 90 %. Vous pouvez voir comment cela vous permet de créer rapidement des systèmes de couleurs.

Vous pouvez le voir en action dans les outils pour les développeurs Chrome dès aujourd'hui, avec une très belle icône d'aperçu de diagramme de Venn dans le volet "Styles".

Pour obtenir plus d'exemples et d'informations, consultez notre article de blog sur color-mix ou essayez cet atelier color-mix().

Principes de base du CSS

Développer de nouvelles fonctionnalités qui offrent des avantages évidents aux utilisateurs est une partie de l'équation, mais de nombreuses fonctionnalités de Chrome visent à améliorer l'expérience des développeurs et à créer une architecture CSS plus fiable et organisée. Ces fonctionnalités incluent l'imbrication CSS, les calques en cascade, les styles limités, les fonctions trigonométriques et les propriétés de transformation individuelles.

Imbrication

L'imbrication CSS, une fonctionnalité très appréciée de Sass et l'une des principales demandes des développeurs CSS depuis des années, arrive enfin sur la plate-forme Web. L'imbrication permet aux développeurs d'écrire dans un format plus concis et groupé qui réduit la redondance.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Vous pouvez également imbriquer des requêtes média, ce qui signifie que vous pouvez également imbriquer des requêtes de conteneur. Dans l'exemple suivant, une fiche passe d'une mise en page verticale à une mise en page horizontale si la largeur de son conteneur est suffisante :

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

L'ajustement de la mise en page à flex se produit lorsque le conteneur dispose d'un espace en ligne supérieur ou égal à 480px. Le navigateur appliquera simplement ce nouveau style d'affichage lorsque les conditions seront remplies.

Pour en savoir plus et obtenir des exemples, consultez notre article sur l'imbrication CSS.

Calques en cascade

Un autre point sensible pour les développeurs que nous avons identifié est d'assurer la cohérence des styles qui l'emportent sur les autres. Pour résoudre ce problème, il est nécessaire de mieux contrôler la cascade CSS.

Les calques en cascade résolvent ce problème en permettant aux utilisateurs de contrôler les calques qui ont une priorité plus élevée que les autres. Ils offrent ainsi un contrôle plus précis sur le moment où vos styles sont appliqués.

Pour en savoir plus sur l'utilisation des calques en cascade, consultez cet article.

CSS limité

Les styles CSS à portée limitée permettent aux développeurs de spécifier les limites d'application de styles spécifiques, ce qui crée essentiellement un espace de noms natif en CSS. Auparavant, les développeurs s'appuyaient sur des scripts tiers pour renommer les classes ou sur des conventions de nommage spécifiques pour éviter les conflits de style. Bientôt, vous pourrez utiliser @scope.

Ici, nous définissons la portée d'un élément .title sur un .card. Cela empêchera cet élément de titre d'entrer en conflit avec d'autres éléments .title sur la page, comme le titre d'un article de blog ou un autre titre.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Vous pouvez voir @scope avec des limites de portée ainsi que @layer dans cette démonstration en direct :

Pour en savoir plus sur @scope, consultez la spécification css-cascade-6.

Fonctions trigonométriques

Les fonctions trigonométriques ajoutées aux fonctions mathématiques CSS existantes constituent un autre élément de la nouvelle infrastructure CSS. Ces fonctions sont désormais stables dans tous les navigateurs modernes et vous permettent de créer des mises en page plus naturelles sur la plate-forme Web. Un excellent exemple est cette mise en page de menu radial, qu'il est désormais possible de concevoir et d'animer à l'aide des fonctions sin() et cos().

Dans la démo ci-dessous, les points tournent autour d'un point central. Au lieu de faire pivoter chaque point autour de son propre centre, puis de le déplacer vers l'extérieur, chaque point est translaté sur les axes X et Y. Les distances sur les axes X et Y sont déterminées en tenant compte respectivement de la cos() et de la sin() de --angle.

Pour en savoir plus, consultez notre article sur les fonctions trigonométriques.

Propriétés de transformation individuelles

L'ergonomie des développeurs continue de s'améliorer grâce aux fonctions de transformation individuelles. Depuis la dernière édition d'I/O, les transformations individuelles sont devenues stables dans tous les navigateurs modernes.

Auparavant, vous deviez utiliser la fonction de transformation pour appliquer des sous-fonctions afin de mettre à l'échelle, de faire pivoter et de traduire un élément d'interface utilisateur. Cela impliquait beaucoup de répétitions et était particulièrement frustrant lors de l'application de plusieurs transformations à différents moments de l'animation.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Vous pouvez désormais inclure tous ces détails dans vos animations CSS en séparant les types de transformations et en les appliquant individuellement.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Ainsi, les changements de translation, de rotation ou d'échelle peuvent se produire simultanément à des taux de variation différents à différents moments de l'animation.

Pour en savoir plus, consultez cet article sur les fonctions de transformation individuelles.

Composants personnalisables

Pour nous assurer de répondre à certains des besoins clés des développeurs via la plate-forme Web, nous collaborons avec le groupe communautaire OpenUI et avons identifié trois solutions pour commencer :

1. Fonctionnalité pop-up intégrée avec des gestionnaires d'événements, une structure DOM déclarative et des valeurs par défaut accessibles.
2. API CSS permettant d'ancrer deux éléments l'un à l'autre pour activer le positionnement des ancres.
3. Composant de menu déroulant personnalisable, pour styliser le contenu d'une sélection.

Pop-over

L'API Popover offre aux éléments une prise en charge intégrée par le navigateur, comme :

• Compatibilité avec la couche supérieure, ce qui vous évite de gérer z-index. Lorsque vous ouvrez un pop-over ou une boîte de dialogue, vous promouvez cet élément sur un calque spécial au-dessus de la page.
• Comportement de fermeture légère pour les pop-ups auto, de sorte que lorsque vous cliquez en dehors d'un élément, le pop-up est fermé, supprimé de l'arborescence d'accessibilité et la gestion de la mise au point est correcte.
• Accessibilité par défaut pour le tissu conjonctif de la cible du pop-over et du pop-over lui-même.

Tout cela signifie qu'il faut écrire moins de code JavaScript pour créer toutes ces fonctionnalités et suivre tous ces états.

La structure DOM du popover est déclarative et peut être écrite aussi clairement que si vous donniez à votre élément popover un id et l'attribut popover. Ensuite, vous synchronisez cet ID avec l'élément qui ouvrira le pop-up, tel qu'un bouton avec l'attribut popovertarget :

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover est un raccourci pour popover=auto. Un élément avec popover=auto forcera la fermeture des autres popovers lorsqu'il sera ouvert, recevra le focus lorsqu'il sera ouvert et pourra être fermé par un clic en dehors. À l'inverse, les éléments popover=manual ne forcent pas la fermeture d'autres types d'éléments, ne reçoivent pas immédiatement le focus et ne sont pas fermés par un clic en dehors. Ils se ferment à l'aide d'un bouton bascule ou d'une autre action de fermeture.

La documentation la plus récente sur les pop-ups est actuellement disponible sur MDN.

Positionnement de l'ancre

Les pop-overs sont également fréquemment utilisés dans des éléments tels que les boîtes de dialogue et les info-bulles, qui doivent généralement être ancrés à des éléments spécifiques. Prenons cet exemple d'événement. Lorsque vous cliquez sur un événement de l'agenda, une boîte de dialogue s'affiche à proximité de l'événement sur lequel vous avez cliqué. L'élément d'agenda est l'ancrage, et le pop-over est la boîte de dialogue qui affiche les détails de l'événement.

Vous pouvez créer un info-bulle centré avec la fonction anchor(), en utilisant la largeur de l'ancrage pour positionner l'info-bulle à 50 % de la position X de l'ancrage. Utilisez ensuite les valeurs de positionnement existantes pour appliquer le reste des styles d'emplacement.

Mais que se passe-t-il si le pop-over ne tient pas dans la fenêtre d'affichage en fonction de la façon dont vous l'avez positionné ?

Pour résoudre ce problème, l'API de positionnement d'ancrage inclut des positions de secours que vous pouvez personnaliser. L'exemple suivant crée une position de secours appelée "top-then-bottom". Le navigateur essaie d'abord de positionner l'info-bulle en haut. Si elle ne tient pas dans la fenêtre d'affichage, il la positionne ensuite en bas, sous l'élément d'ancrage.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Pour en savoir plus sur le positionnement des ancres, consultez cet article de blog.

<selectmenu>

Avec le positionnement du pop-over et de l'ancrage, vous pouvez créer des menus de sélection entièrement personnalisables. Le groupe de la communauté OpenUI a étudié la structure fondamentale de ces menus et cherché des moyens de personnaliser n'importe quel contenu qu'ils contiennent. Voici quelques exemples visuels :

Pour créer l'exemple selectmenu le plus à gauche, avec des points de couleur correspondant à la couleur qui s'afficherait dans un événement d'agenda, vous pouvez l'écrire comme suit :

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Transitions de propriété discrètes

Pour que tout cela permette de faire apparaître et disparaître les pop-ups en douceur, le Web a besoin d'un moyen d'animer les propriétés discrètes. Il s'agit de propriétés qui n'étaient généralement pas animables auparavant, comme l'animation vers et depuis la couche supérieure, et l'animation vers et depuis display: none.

Pour permettre des transitions fluides pour les pop-ups, les menus de sélection et même les éléments existants tels que les boîtes de dialogue ou les composants personnalisés, les navigateurs activent de nouveaux mécanismes pour prendre en charge ces animations.

La démo de popover suivante anime les popovers en utilisant :popover-open pour l'état ouvert, @starting-style pour l'état avant ouverture et applique une valeur de transformation à l'élément directement pour l'état après ouverture et fermeture. Pour que tout cela fonctionne avec l'affichage, il faut l'ajouter à la propriété transition, comme suit :

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interactions

Ce qui nous amène aux interactions, la dernière étape de cette visite des fonctionnalités de l'UI Web.

Nous avons déjà parlé de l'animation de propriétés discrètes, mais il existe également des API très intéressantes qui arrivent dans Chrome concernant les animations basées sur le défilement et les transitions de vue.

Animations liées au défilement

Les animations liées au défilement vous permettent de contrôler la lecture d'une animation en fonction de la position de défilement d'un conteneur de défilement. Autrement dit, lorsque vous faites défiler la page vers le haut ou vers le bas, l'animation avance ou revient en arrière. En outre, grâce aux animations liées au défilement, vous pouvez contrôler une animation en fonction de la position d'un élément dans son conteneur de défilement. Cela vous permet de créer des effets intéressants, comme une image de fond se déplaçant en parallaxe, des barres de progression de défilement et des images qui sont dévoilées à mesure qu'elles s'affichent à l'écran.

Cette API est compatible avec un ensemble de classes JavaScript et de propriétés CSS qui vous permettent de facilement créer de façon déclarative des animations liées au défilement.

Pour contrôler une animation CSS par défilement, utilisez les nouvelles propriétés scroll-timeline, view-timeline et animation-timeline. Pour piloter une API Web Animations JavaScript, transmettez une instance ScrollTimeline ou ViewTimeline en tant qu'option timeline à Element.animate().

Ces nouvelles API fonctionnent conjointement avec les API CSS Animations et Web Animations existantes, ce qui signifie qu'elles bénéficient des avantages de ces API. Cela inclut la possibilité d'exécuter ces animations en dehors du thread principal. Oui, vous avez bien lu : vous pouvez désormais créer des animations fluides, déclenchées par le défilement et exécutées en dehors du thread principal, en ajoutant seulement quelques lignes de code. Que demander de plus ?

Pour obtenir un guide complet et détaillé sur la création de ces animations déclenchées par le défilement, veuillez consulter cet article sur les animations déclenchées par le défilement.

Transitions de vue

L'API View Transitions permet de modifier facilement le DOM en une seule étape, tout en créant une transition animée entre les deux états. Il peut s'agir de simples transitions entre les vues, mais vous pouvez également contrôler la façon dont les différentes parties de la page doivent effectuer la transition.

Les transitions de vue peuvent être utilisées comme une amélioration progressive : prenez votre code qui met à jour le DOM par n'importe quelle méthode et enveloppez-le dans l'API View Transitions avec une solution de repli pour les navigateurs qui ne prennent pas en charge la fonctionnalité.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

La transition doit être contrôlée par le CSS.

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Comme le montre cette superbe démo de Maxi Ferreira, les autres interactions sur la page, comme la lecture d'une vidéo, continuent de fonctionner pendant une transition de vue.

Les transitions de vue fonctionnent actuellement avec les applications monopages à partir de Chrome 111. Nous travaillons actuellement sur la compatibilité avec les applications multipages. Pour en savoir plus, consultez notre guide complet sur les transitions de vue.

Conclusion

Découvrez les dernières nouveautés en CSS et HTML sur developer.chrome.com, et consultez les vidéos de l'I/O pour en savoir plus sur les nouveautés Web.