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

Una Kravets

Bramus

Adam Argyle

Ces derniers mois ont marqué le début d'une ère dorée pour l'interface utilisateur Web. De nouvelles fonctionnalités de la plate-forme ont été lancées avec une adoption étroite entre les navigateurs, qui prennent en charge plus de fonctionnalités Web et de personnalisation que jamais.

Voici 20 des fonctionnalités les plus intéressantes et les plus efficaces lancées récemment ou bientôt disponibles:

• Requêtes de conteneur
• Requêtes de style
• Sélecteur :has()
• Microsyntaxe nth-of
• text-wrap: balance
• initial-letter
• Unités de vue dynamique
• Espaces colorimétriques à large gamme
• color-mix()
• Imbriquer
• Couche en cascade
• Styles à portée limitée
• Fonctions trigonométriques
• Propriétés de transformation individuelles
• popover
• positionnement des ancres
• selectmenu
• Transitions de propriété discrètes
• Animations déclenchées par le défilement
• Afficher les transitions

La nouvelle responsive

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

Requêtes de conteneur

Navigateurs pris en charge

• 105
• 105
• 110
• 16

Source

Les requêtes de conteneur sont récemment devenues stables dans 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 à ses enfants. Les requêtes multimédias ne peuvent accéder qu'aux informations de la fenêtre d'affichage et les exploiter, ce qui signifie qu'elles ne peuvent fonctionner que sur une vue macro d'une mise en page de page. Les requêtes de conteneur, en revanche, 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 la barre latérale Favoris sont toutes deux des conteneurs. Les e-mails qu'ils contiennent ajustent leur mise en page en grille et affichent ou masquent le code temporel en fonction de l'espace disponible. Il s'agit du même composant exact sur la page, qui s'affiche simplement dans différentes vues.

Étant donné que 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 alloué 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. Lorsque l'espace est limité, les deux éléments s'affichent dans un format condensé.

Découvrez-en davantage sur les requêtes de conteneur et la création de composants logiques dans cet article.

Requêtes de style

Navigateurs pris en charge

• 111
• 111
• x
• 18

Source

La spécification de requête 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 CSS personnalisées pour appliquer des styles de conteneur.

L'exemple suivant utilise des caractéristiques météorologiques stockées dans des valeurs de propriété personnalisées, telles que "pluie", "soleil" et "nuageux", pour styliser l'arrière-plan et l'icône de l'indicateur de la fiche.

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

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

Les requêtes de style ne sont qu'un début. À l'avenir, nous proposerons des 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 étudions actuellement les requêtes de plage afin d'appliquer des styles en fonction d'une plage de valeurs. Cela permettrait d'appliquer les styles présentés ici en utilisant une valeur en pourcentage pour la probabilité de pluie ou d'ensoleillement.

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

:has()

Navigateurs pris en charge

• 105
• 105
• 121
• 15.4

Source

En parlant de fonctionnalités dynamiques et puissantes, le sélecteur:has() est l'une des nouvelles fonctionnalités CSS les plus puissantes disponibles 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 se trouvent dans un état spécifique. Cela signifie que nous disposons désormais d'un sélecteur parent.

En partant de l'exemple de requête de conteneur, vous pouvez utiliser :has() pour rendre les composants encore plus dynamiques. Un élément avec un élément "étoile" est associé à un arrière-plan gris, et un élément avec une case à cocher cochée à un arrière-plan bleu.

Toutefois, cette API n'est pas limitée à la sélection des parents. Vous pouvez également styliser tous les enfants du parent. Par exemple, le titre est en gras lorsque l'élément étoile est présent. Pour ce faire, utilisez .item:has(.star) .title. Le sélecteur :has() vous permet d'accéder aux éléments parents, aux éléments enfants et même aux éléments frères. Il s'agit donc d'une API très flexible, avec de nouveaux cas d'utilisation qui apparaissent chaque jour.

Remarque:Pour éviter les ralentissements de performances de rendu dans les grands arbres DOM, nous vous recommandons de limiter la portée de ce sélecteur le plus possible. Par exemple, utiliser :has() pour rechercher des correspondances dans l'élément HTML racine serait plus lent que de rechercher des correspondances dans une barre de navigation ou dans un élément de carte avec un arbre plus petit.

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

Syntaxe nth-of

Navigateurs pris en charge

• 111
• 111
• 113
• 9

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

Si vous utilisez un nth-child standard, 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. Contrairement à :nth-child(2 of .special), qui préfiltre d'abord tous les éléments .special, puis sélectionne 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 utiliser l'équilibrage du retour à la ligne pour les titres à l'aide de la propriété text-wrap avec la valeur balance.

Essayer une démonstration

Pour équilibrer le texte, le navigateur effectue une recherche binaire de la largeur la plus petite qui ne génère aucune ligne supplémentaire, en s'arrêtant à un pixel CSS (et non à un pixel d'affichage). Pour réduire davantage les étapes de la recherche binaire, le navigateur commence avec 80% de la largeur de ligne moyenne.

Essayer une démo

Remarque:Bien qu'il s'agisse d'une excellente amélioration progressive que vous pouvez essayer dès aujourd'hui, il est important de noter que cette API ne fonctionne que sur quatre lignes de texte. Elle est donc idéale pour les titres et les titres, mais probablement pas ce que vous recherchez pour des contenus plus longs.

Pour en savoir plus, consultez cet article.

initial-letter

Navigateurs pris en charge

• 110
• 110
• x
• 9

Source

initial-letter est une autre amélioration intéressante de la typographie Web. Cette propriété CSS vous permet de mieux contrôler le style des initiales en exergue intégré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éplacement du bloc de la lettre, ou "dépression", qui indique l'emplacement de la lettre.

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

Unités de vue dynamique

Navigateurs pris en charge

• 108
• 108
• 101
• 15.4

Les développeurs Web sont souvent confrontés à un problème courant : comment dimensionner précisément et de manière cohérente l'intégralité de la vue, 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 de certains éléments, comme le rétractement des barres de navigation sur mobile. Il arrive donc parfois qu'elle soit trop longue et provoque le défilement.

Pour résoudre ce problème, nous avons désormais 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 de grande taille (lvh et lvw), qui représentent la plus grande taille. - Hauteur et largeur dynamiques de la fenêtre d'affichage (dvh et dvw)

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

Remarque:Notez que les unités de vue dynamique ne tiennent pas compte de la présence du clavier virtuel. À partir de Chrome 108, vous pouvez définir une méta-balise pour modifier ce comportement.

Pour en savoir plus sur ces nouvelles unités, consultez Unités de vue d'ensemble grandes, petites et dynamiques.

Espaces colorimétriques à large gamme

Navigateurs pris en charge

• 111
• 111
• 113
• 15.4

Source

Les espaces de couleurs à large gamme sont un autre ajout important à 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 obtenir de bouton, de couleur de texte ou d'arrière-plan correspondant à ces valeurs vives.

Une série d'images montre la transition entre des gammes de couleurs larges et étroites, illustrant la vivacité des couleurs et ses effets.
Essayez-le vous-même

Nous proposons désormais une gamme de nouveaux espaces de couleurs sur la plate-forme Web, y compris REC2020, P3, XYZ, LAB, OKLAB, LCH et OKLCH. Découvrez les nouveaux espaces de couleurs Web et plus encore dans le guide des couleurs HD.

Vous pouvez immédiatement voir dans les outils pour les développeurs que la plage de couleurs s'est élargie, avec cette ligne blanche qui délimite la fin de la plage sRGB et le début de la plage de couleurs à plage plus large.

Beaucoup plus d'outils disponibles pour la couleur ! 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 à tester un nouveau sélecteur de couleurs Web et un outil de création de dégradés. Pour l'essayer, rendez-vous sur gradient.style.

color-mix()

Navigateurs pris en charge

• 111
• 111
• 113
• 16.2

Source

La fonction color-mix() permet d'étendre les espaces colorimétriques développés. 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 de couleurs dans lequel vous effectuez le mélange a une incidence sur les résultats. Travailler dans un espace colorimétrique plus perceptif comme oklch permet d'utiliser une plage de couleurs différente de celle de sRVB, 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);

Essayer la démo

La fonction color-mix() offre une fonctionnalité attendue depuis longtemps: la possibilité de conserver les valeurs de couleur opaques tout en leur ajoutant une certaine transparence. Vous pouvez désormais utiliser les variables de couleur de votre marque lorsque vous créez des variantes de ces couleurs avec différentes opacités. Pour ce faire, mélangez une couleur avec du transparent. Si vous mélangez la couleur bleue 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 icône de diagramme de Venn d'aperçu très pratique dans le panneau des styles.

Pour en savoir plus et voir d'autres exemples, consultez notre article de blog sur color-mix ou essayez cet espace de jeu color-mix().

Principes de base du CSS

Créer de nouvelles fonctionnalités qui offrent un avantage clair 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 de portée, les fonctions trigonométriques et les propriétés de transformation individuelles.

Imbrication

Navigateurs pris en charge

• 120
• 120
• 117
• 17.2

Source

L'imbrication CSS, une fonctionnalité 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 groupé plus succinct qui réduit la redondance.

.card {}
.card:hover {}

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

  }
}

Vous pouvez également imbriquer des requêtes multimédias, ce qui signifie que vous pouvez également imbriquer des requêtes de conteneur. Dans l'exemple suivant, la mise en page d'une carte passe du mode Portrait au mode Paysage 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

Navigateurs pris en charge

• 99
• 99
• 97
• 15.4

Source

Un autre problème que nous avons identifié concerne la cohérence des styles qui prévalent sur les autres. Pour y remédier, nous devons mieux contrôler la cascade CSS.

Les calques en cascade permettent aux utilisateurs de contrôler les calques qui ont une priorité plus élevée que d'autres, ce qui leur permet de mieux contrôler le moment où vos styles sont appliqués.

Explorez le projet sur Codepen.

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

CSS avec portée

Navigateurs pris en charge

• 118
• 118
• 
• 17,4

Source

Les styles de portée CSS permettent aux développeurs de spécifier les limites auxquelles des styles spécifiques s'appliquent, créant ainsi essentiellement un espace de noms natif en CSS. Auparavant, les développeurs devaient utiliser des scripts tiers pour renommer des classes ou des conventions de nommage spécifiques pour éviter les conflits de style. Vous pourrez bientôt utiliser @scope.

Ici, nous définissons le champ d'application d'un élément .title sur un .card. Cela évite que cet élément de titre ne soit en conflit avec d'autres éléments .title de 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 champ d'application 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

Navigateurs pris en charge

• 111
• 111
• 108
• 15.4

Source

Les fonctions trigonométriques sont ajoutées aux fonctions mathématiques CSS existantes. 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, que vous pouvez désormais concevoir et animer à l'aide des fonctions sin() et cos().

Dans la démonstration 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 traduit sur les axes X et Y. Les distances sur les axes X et Y sont déterminées en tenant compte de la cos() et, respectivement, de la sin() de la --angle.

.

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

Propriétés de transformation individuelles

Navigateurs pris en charge

• 104
• 104
• 72
• 14.1

Source

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

Auparavant, vous deviez utiliser la fonction transform pour appliquer des sous-fonctions afin de redimensionner, faire pivoter et traduire un élément d'interface utilisateur. Cela impliquait beaucoup de répétitions, et était particulièrement frustrant lorsque vous appliquiez 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;
}

Les changements de translation, de rotation ou d'échelle peuvent ainsi se produire simultanément à différents taux de changement à 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 principaux besoins des développeurs via la plate-forme Web, nous collaborons avec le groupe de la communauté OpenUI et avons identifié trois solutions pour commencer:

1. Fonctionnalité de 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'associer deux éléments pour activer le positionnement des ancres.
3. Composant de menu déroulant personnalisable, à utiliser lorsque vous souhaitez styliser le contenu d'une sélection.

Pop-over

L'API popover offre aux éléments une compatibilité intégrée avec les navigateurs, par exemple:

• Compatibilité avec la couche supérieure, ce qui vous évite de gérer z-index. Lorsque vous ouvrez un pop-up ou une boîte de dialogue, vous promouvez cet élément vers une couche spéciale au-dessus de la page.
• Comportement de fermeture légère sans frais dans les popovers auto. Ainsi, lorsque vous cliquez en dehors d'un élément, le popover est fermé, supprimé de l'arborescence d'accessibilité et la sélection est correctement gérée.
• Accessibilité par défaut pour le tissu conjonctif de la cible du popover et du popover lui-même.

Tout cela signifie que moins de code JavaScript doit être écrit 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 attribuiez à votre élément popover un id et l'attribut popover. Vous devez ensuite synchroniser 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 ferme de force les autres popovers lorsqu'il est ouvert, reçoit le focus lorsqu'il est ouvert et peut être fermé en mode "light". À l'inverse, les éléments popover=manual ne ferment pas de force d'autres types d'éléments, ne reçoivent pas immédiatement la sélection et ne sont pas fermés en mode "light dismiss". Ils se ferment à l'aide d'un bouton d'activation/de désactivation ou d'une autre action de fermeture.

La documentation la plus récente sur les popovers est actuellement disponible sur MDN.

Positionnement des ancrages

Les pop-ups 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 l'exemple d'un événement. Lorsque vous cliquez sur un événement dans l'agenda, une boîte de dialogue s'affiche à côté de celui-ci. L'élément d'agenda est l'ancre, et le pop-up est la boîte de dialogue qui affiche les détails de l'événement.

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

Mais que se passe-t-il si le popover ne tient pas dans le viewport en fonction de la façon dont vous l'avez positionné ?

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

.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);
  }
}

Remarque:Vous pouvez être très précis ici, ce qui peut être long, mais c'est aussi l'occasion pour les bibliothèques et les systèmes de conception d'écrire la logique de positionnement et de la réutiliser partout.

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

<selectmenu>

Avec le positionnement du popover et de l'ancre, vous pouvez créer des menus déroulants entièrement personnalisables. Le groupe de la communauté OpenUI a étudié la structure fondamentale de ces menus et a cherché des moyens de permettre la personnalisation de tout contenu qui s'y trouve. Prenons ces 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é distinctes

Pour que les popovers puissent s'ouvrir et se fermer de manière fluide, le Web doit pouvoir animer des propriétés distinctes. Il s'agit de propriétés qui n'étaient généralement pas animables auparavant, comme l'animation entre la couche supérieure et la couche inférieure, et entre display: none et la couche supérieure.

Dans le cadre de l'activation de belles transitions pour les popovers, les menus déroulants et même les éléments existants tels que les boîtes de dialogue ou les composants personnalisés, les navigateurs permettent de nouvelles fonctionnalités pour prendre en charge ces animations.

La démonstration de popover suivante anime les popovers à l'ouverture et à la fermeture à l'aide de :popover-open pour l'état ouvert, de @starting-style pour l'état avant l'ouverture et applique directement une valeur de transformation à l'élément pour l'état après l'ouverture et la fermeture. Pour que tout cela fonctionne avec l'affichage, vous devez 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

Nous voici arrivés aux interactions, dernier arrêt de cette visite des fonctionnalités d'UI Web.

Nous avons déjà parlé de l'animation de propriétés distinctes, mais Chrome propose également des API très intéressantes pour les animations et les transitions de vue basées sur le défilement.

Animations basées sur le défilement

Navigateurs pris en charge

• 115
• 115
• 
• x

Source

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 créer facilement des animations déclaratives liées au défilement.

Pour piloter 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, basées sur le défilement, exécutées sur le thread principal, avec seulement quelques lignes de code supplémentaires. Que ne faut-il pas aimer ?

Pour obtenir un guide détaillé sur la création de ces animations basées sur le défilement, consultez cet article sur les animations basées sur le défilement.

Afficher les transitions

Navigateurs pris en charge

• 111
• 111
• x
• 18

Source

L'API View Transition 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 fondus entre les vues, mais vous pouvez également contrôler la transition de certaines parties de la page.

Les transitions de vue peuvent être utilisées comme amélioration progressive: prenez votre code qui met à jour le DOM par n'importe quelle méthode et encapsulez-le dans l'API de transition de vue avec un remplacement pour les navigateurs qui ne prennent pas en charge cette 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));
}

L'apparence de la transition est contrôlée via 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émonstration 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 (SPA) à partir de Chrome 111. Nous travaillons actuellement à la prise en charge des applications multipages. Pour en savoir plus, consultez notre guide complet sur les transitions de vue.

Conclusion

Pour vous tenir informé des dernières nouveautés en CSS et HTML, consultez developer.chrome.com et regardez les vidéos I/O pour découvrir d'autres pages Web.