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 délimités
• Fonctions trigonométriques
• Propriétés des transformations individuelles
• popover
• positionnement de l'ancre
• selectmenu
• Transitions de propriétés discrètes
• Animations déclenchées par le défilement
• Afficher les transitions

Le nouveau format

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 concevoir des interfaces qui exploitent les fonctionnalités du système pour proposer des interfaces utilisateur plus natives, et de permettre à l'utilisateur de prendre part 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 la disposition de leur grille et affichent ou masquent l'horodatage de l'e-mail 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.

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 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. S'il y a moins d'espace, ils s'affichent tous deux dans un format condensé.

Pour en savoir plus sur les requêtes de conteneurs et sur la création de composants logiques, consultez 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 que le 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 pour 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émos, 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 puissantes et dynamiques, le sélecteur:has() est l'une des nouvelles fonctionnalités CSS les plus performantes disponibles sur les navigateurs récents. 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 avons maintenant 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. 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 donne accès aux éléments parents, aux éléments enfants et même aux éléments frères. Cette API est donc très flexible, et de nouveaux cas d'utilisation apparaissent chaque jour.

Remarque:Pour éviter que les performances de rendu soient ralenties dans les arborescences DOM volumineuses, nous vous recommandons de restreindre le plus possible la portée de ce sélecteur. 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 consacré à :has().

Syntaxe nth-of

Navigateurs pris en charge

• 111
• 111
• 113
• 9

La plate-forme Web dispose désormais d'une sélection plus avancée des nièmes enfants. La syntaxe avancée de l'enfant n permet d'obtenir 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 la 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 automatique à la ligne pour les en-têtes, en utilisant 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 moyenne de la ligne.

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 disposons désormais de nouvelles valeurs unitaires sur la plate-forme Web, y compris les suivantes : - La hauteur et la largeur de la fenêtre d'affichage sont faibles (ou svh et svw), qui représentent la plus petite taille de fenêtre d'affichage active. - Une hauteur et une largeur élevées pour la fenêtre d'affichage (lvh et lvw), qui représentent la plus grande taille possible. - 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 nouveaux blocs, consultez l'article Grands, petits et blocs d'affichage dynamiques.

Espaces de couleurs à 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 est affichée passant d'une gamme de couleurs large à une palette de couleurs étroite, pour illustrer la vivacité des couleurs et ses effets.
Essayez-le vous-même

Aujourd'hui, nous proposons 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.

Dans les outils de développement, vous pouvez voir immédiatement que la gamme de couleurs s'est étendue, avec une ligne blanche indiquant où se termine la gamme s rgb et où commence la gamme de couleurs à plus large gamme.

Beaucoup plus d'outils disponibles pour la couleur ! Ne passez pas non plus à côté des améliorations apportées au dégradé. 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 colorimétrique dans lequel vous mélangez affecte 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 version de démonstration

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 voir cela 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 des 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 concis 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 en mode portrait à une mise en page en mode paysage si la largeur du 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.

Découvrez 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 s'appuyaient sur des scripts tiers pour renommer les classes, ou sur des conventions d'attribution de noms spécifiques pour éviter les conflits de styles. Bientôt, vous pourrez utiliser @scope.

Ici, nous définissons le champ d'application d'un élément .title sur un .card. Cela permet d'éviter que cet élément de titre n'entre 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 champ d'application avec @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 grâce aux 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;
}

Ainsi, des changements de translation, de rotation ou d'échelle peuvent se produire simultanément à différentes fréquences 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 des fonctionnalités intégrées compatibles avec les navigateurs, comme :

• 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 pour le pop-up est déclarative et peut être écrite aussi clairement qu'en attribuant à l'élément de pop-over 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". Elles se ferment via un bouton d'activation ou une autre action de fermeture.

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

Positionnement des ancrages

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 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 la positionner à 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 positionne 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>

Le positionnement du pop-up et de l'ancre vous permet de créer des menus de sélection entièrement personnalisables. La communauté OpenUI a étudié la structure fondamentale de ces menus et cherche des moyens de personnaliser le contenu qu'ils contiennent. 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 faire en sorte que les pop-overs entrent et sortent en douceur, le Web a besoin d'un moyen d'animer des propriétés discrètes. Il s'agit de propriétés qui ne pouvaient généralement pas être animées par le passé, telles que l'animation vers et depuis la couche supérieure, et vers et depuis display: none.

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 Web Animations et CSS 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

Tenez-vous informé des dernières nouveautés en CSS et HTML directement sur developer.chrome.com, et regardez les vidéos I/O pour découvrir d'autres pages de destination sur le Web.