Nouveautés CSS et UI Web: récapitulatif I/O 2024

Una Kravets

La plate-forme Web est en pleine effervescence, avec des fonctionnalités CSS et d'interface utilisateur Web à l'avant-garde de cette évolution passionnante. Nous vivons un âge d'or pour l'UI Web, avec de nouvelles fonctionnalités CSS qui arrivent dans les navigateurs à un rythme sans précédent. Cela ouvre un monde de possibilités pour créer des expériences Web attrayantes et captivantes. Cet article de blog se penche en détail sur l'état actuel du CSS, en explorant certaines des nouvelles fonctionnalités les plus révolutionnaires qui redéfinissent la façon dont nous créons des applications Web, présentées en direct lors de Google I/O 2024.

Nouvelles expériences interactives

Une expérience Web est fondamentalement un échange entre vous et vos utilisateurs. C'est pourquoi il est si important d'investir dans des interactions utilisateur de qualité. Nous avons travaillé sur des améliorations majeures qui nous permettent de naviguer dans les pages Web et entre elles, ce que nous n'avions jamais pu faire auparavant sur le Web.

Animations liées au défilement

Comme son nom l'indique, l'API Scroll-driven Animations vous permet de créer des animations dynamiques basées sur le défilement sans avoir recours à des observateurs de défilement ni à d'autres scripts lourds.

Créer des animations liées au défilement

Comme pour les animations basées sur le temps sur la plate-forme, vous pouvez désormais utiliser la progression de défilement d'un élément de défilement pour démarrer, mettre en pause et inverser une animation. Ainsi, lorsque vous faites défiler la page vers l'avant, la progression de l'animation s'affiche, et lorsque vous faites défiler la page vers l'arrière, elle s'inverse. Cela vous permet de créer des visuels partiels ou en pleine page avec des éléments qui s'animent dans et à l'intérieur de la fenêtre d'affichage, également appelés scrollytelling, pour un impact visuel dynamique.

Les animations déclenchées par le défilement peuvent être utilisées pour mettre en avant des contenus importants, guider les utilisateurs à travers une histoire ou simplement ajouter une touche dynamique à vos pages Web.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Le code précédent définit une animation simple qui apparaît dans la fenêtre d'affichage en modifiant l'opacité et l'échelle d'une image. L'animation est pilotée par la position de défilement. Pour créer cet effet, configurez d'abord l'animation CSS, puis définissez animation-timeline. Dans ce cas, la fonction view() avec ses valeurs par défaut suit l'image par rapport à la fenêtre de défilement (qui, dans ce cas, est également la fenêtre d'affichage).

Il est important de tenir compte de la compatibilité avec les navigateurs et des préférences des utilisateurs, en particulier en ce qui concerne les besoins d'accessibilité. Par conséquent, utilisez la règle @supports pour vérifier si le navigateur est compatible avec les animations déclenchées par le défilement, et enveloppez votre animation déclenchée par le défilement dans une requête de préférence utilisateur telle que @media (prefers-reduced-motion: no-preference) pour respecter les préférences de mouvement des utilisateurs. Après avoir effectué ces vérifications, vous savez que vos styles fonctionneront et que l'animation ne posera pas de problème à l'utilisateur.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Les animations basées sur le défilement peuvent être des expériences de narration visuelle en pleine page, mais aussi des animations plus subtiles, comme une barre d'en-tête qui se réduit et affiche une ombre lorsque vous faites défiler une application Web.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Cette démo utilise plusieurs animations d'images clés différentes (en-tête, texte, barre de navigation et arrière-plan), puis applique l'animation basée sur le défilement correspondante à chacune d'elles. Bien que leur style d'animation soit différent, elles ont toutes la même timeline d'animation, le même élément de défilement le plus proche et la même plage d'animation (du haut de la page à 150 pixels).

Avantages en termes de performances des animations liées au défilement

Cette API intégrée réduit la charge de code que vous devriez gérer, qu'il s'agisse d'un script personnalisé que vous avez écrit ou de l'inclusion d'une dépendance tierce supplémentaire. Cela évite également d'avoir à expédier différents observateurs de défilement, ce qui offre des avantages considérables en termes de performances. En effet, les animations basées sur le défilement fonctionnent sur le thread principal lors de l'animation de propriétés qui peuvent être animées sur le compositeur, comme les transformations et l'opacité, que vous utilisiez la nouvelle API directement dans CSS ou les hooks JavaScript.

Tokopedia a récemment utilisé des animations basées sur le défilement pour faire apparaître la barre de navigation des produits lorsque vous faisiez défiler la page. L'utilisation de cette API a eu des avantages considérables, à la fois pour la gestion du code et pour les performances.

"Nous avons réussi à réduire jusqu'à 80 % de nos lignes de code par rapport à l'utilisation d'événements de défilement JS conventionnels. Nous avons également observé que l'utilisation moyenne du processeur est passée de 50 % à 2 % lors du défilement. Andy Wihalim, ingénieur logiciel senior chez Tokopedia

L'avenir des effets de défilement

Nous savons que ces effets continueront de rendre le Web plus attrayant, et nous réfléchissons déjà à ce qui pourrait suivre. Cela inclut la possibilité d'utiliser non seulement de nouvelles timelines d'animation, mais aussi un point de défilement pour déclencher le début d'une animation, appelées animations déclenchées par le défilement.

D'autres fonctionnalités de défilement seront bientôt disponibles dans les navigateurs. La démo suivante montre une combinaison de ces futures fonctionnalités. Il utilise scroll-start-target CSS pour définir la date et l'heure initiales dans les sélecteurs, et l'événement JavaScript scrollsnapchange pour mettre à jour la date de l'en-tête, ce qui permet de synchroniser facilement les données avec l'événement accroché.

Vous pouvez également vous appuyer sur cette méthode pour mettre à jour un sélecteur en temps réel avec l'événement JavaScript scrollsnapchanging.

Ces fonctionnalités spécifiques ne sont actuellement disponibles que dans Canary, derrière un flag. Toutefois, elles permettent d'accéder à des fonctionnalités qui étaient auparavant impossibles ou très difficiles à créer sur la plate-forme, et mettent en évidence les possibilités futures des interactions basées sur le défilement.

Pour en savoir plus sur les animations déclenchées par le défilement, notre équipe vient de lancer une nouvelle série de vidéos sur la chaîne YouTube Chrome for Developers. Vous y apprendrez les bases des animations pilotées par le défilement de Bramus Van Damme, y compris le fonctionnement de la fonctionnalité, le vocabulaire, les différentes façons de créer des effets et comment combiner des effets pour créer des expériences riches. N'hésitez pas à regarder cette série de vidéos.

Transitions de vue

Nous venons de voir une nouvelle fonctionnalité puissante permettant d'animer des éléments dans les pages Web. Il existe également une autre fonctionnalité puissante, appelée "transitions de vue", qui permet d'animer des éléments entre les pages vues pour créer une expérience utilisateur fluide. Les transitions de vue apportent un nouveau niveau de fluidité au Web. Elles vous permettent de créer des transitions fluides entre différentes vues sur une même page, ou même sur différentes pages.

Airbnb fait partie des entreprises qui expérimentent déjà l'intégration des transitions de vue dans leur UI pour offrir une expérience de navigation Web fluide et transparente. Cela inclut la barre latérale de l'éditeur d'annonces, la modification de photos et l'ajout de services, le tout dans un parcours utilisateur fluide.

Bien que ces effets plein écran soient esthétiques et fluides, vous pouvez également créer des micro-interactions, comme dans cet exemple où la vue Liste est mise à jour en fonction de l'interaction de l'utilisateur. Cet effet peut être obtenu sans effort grâce aux transitions de vue.

Pour activer rapidement les transitions d'affichage dans votre application monopage, il vous suffit d'encapsuler une interaction à l'aide de document.startViewTransition et de vous assurer que chaque élément en transition possède un view-transition-name, en ligne ou de manière dynamique à l'aide de JavaScript lorsque vous créez des nœuds DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Afficher les classes de transition

Les noms de transition de vue peuvent être utilisés pour appliquer des animations personnalisées à votre transition de vue, mais cela peut devenir fastidieux avec de nombreux éléments en transition. La première mise à jour des transitions de vue cette année simplifie ce problème et permet de créer des classes de transition de vue qui peuvent être appliquées à des animations personnalisées.

Afficher les types de transition

Une autre amélioration majeure pour les transitions de vue est la prise en charge des types de transitions de vue. Les types de transition de vue sont utiles lorsque vous souhaitez un autre type de transition de vue visuelle lors de l'animation vers et depuis les pages vues.

Par exemple, vous pouvez souhaiter que la page d'accueil s'anime vers une page de blog d'une manière différente de celle dont cette page de blog s'anime vers la page d'accueil. Vous pouvez également souhaiter que les pages s'affichent et disparaissent de différentes manières, comme dans cet exemple, en allant de gauche à droite et inversement. Auparavant, cette opération était complexe. Vous pouviez ajouter des classes au DOM pour appliquer des styles, puis vous deviez les supprimer par la suite. Les types de transitions de vue permettent au navigateur de nettoyer les anciennes transitions au lieu de vous demander de le faire manuellement avant d'en lancer de nouvelles.

Vous pouvez configurer des types dans votre fonction document.startViewTransition, qui accepte désormais un objet. update est la fonction de rappel qui met à jour le DOM, et types est un tableau avec les types.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Transitions de vues multipages

La puissance du Web réside dans son étendue. De nombreuses applications ne sont pas monopages, mais constituent une structure robuste contenant plusieurs pages. C'est pourquoi nous sommes ravis d'annoncer que nous allons déployer la prise en charge des transitions de vue entre documents pour les applications multipages dans Chromium 126.

Ce nouvel ensemble de fonctionnalités inter-documents inclut des expériences Web qui se trouvent dans la même origine, comme la navigation de web.dev vers web.dev/blog. Toutefois, il n'inclut pas la navigation multi-origine, comme la navigation de web.dev vers blog.web.dev ou vers un autre domaine tel que google.com.

L'une des principales différences avec les transitions de vue dans le même document est que vous n'avez pas besoin d'encapsuler votre transition avec document.startViewTransition(). Au lieu de cela, activez les deux pages concernées par la transition de vue à l'aide de la règle CSS @view-transition.

@view-transition {
  navigation: auto;
}

Pour un effet plus personnalisé, vous pouvez insérer du code JavaScript à l'aide des nouveaux écouteurs d'événements pageswap ou pagereveal, qui vous donnent accès à l'objet de transition de vue.

pageswap vous permet d'apporter des modifications de dernière minute à la page sortante juste avant la prise des anciens instantanés, tandis que pagereveal vous permet de personnaliser la nouvelle page avant qu'elle ne commence à s'afficher après son initialisation.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

À l'avenir, nous prévoyons d'étendre les transitions de vue, y compris :

• Transitions limitées : elles vous permettent de limiter une transition à un sous-arbre DOM, ce qui permet au reste de la page de rester interactif et de prendre en charge plusieurs transitions de vue s'exécutant en même temps.
• Transitions de vue déclenchées par des gestes : utilisez des gestes de déplacement ou de balayage pour déclencher une transition de vue entre documents et offrir une expérience plus native sur le Web.
• Correspondance de navigation dans CSS : personnalisez la transition d'affichage entre les documents directement dans votre CSS au lieu d'utiliser les événements pageswap et pagereveal dans JavaScript. Pour en savoir plus sur les transitions d'affichage pour les applications multipages, y compris sur la façon de les configurer de la manière la plus performante possible avec le prérendu, consultez la présentation suivante de Bramus Van Damme :

Composants d'UI compatibles avec le moteur : simplifier les interactions complexes

Créer des applications Web complexes n'est pas une mince affaire, mais CSS et HTML évoluent pour rendre ce processus beaucoup plus gérable. De nouvelles fonctionnalités et améliorations simplifient la création de composants d'interface utilisateur, ce qui vous permet de vous concentrer sur la création d'expériences exceptionnelles. Pour ce faire, nous avons collaboré avec plusieurs organismes de normalisation et groupes communautaires clés, y compris le groupe de travail CSS, le groupe communautaire Open UI et le WHATWG (Web Hypertext Application Technology Working Group).

L'un des principaux points faibles pour les développeurs est une demande apparemment simple : la possibilité de styliser les menus déroulants (l'élément select). Bien que cela puisse sembler simple à première vue, il s'agit d'un problème complexe qui touche de nombreux éléments de la plate-forme : de la mise en page et du rendu au défilement et à l'interaction, en passant par le style de l'agent utilisateur et les propriétés CSS, et même les modifications apportées au code HTML lui-même.

Un menu déroulant se compose de nombreux éléments et inclut de nombreux états à prendre en compte, tels que :

• Combinaisons de touches (pour accéder à l'interaction et la quitter)
• Cliquer en dehors pour fermer
• Gestion des pop-ups actifs (fermeture des autres pop-ups lorsqu'un pop-up s'ouvre)
• Gestion de la sélection d'onglets
• Visualiser la valeur de l'option sélectionnée
• Style d'interaction avec les flèches
• Gestion de l'état (ouvert/fermé)

Il est actuellement difficile de gérer vous-même tout cet état, mais la plate-forme ne facilite pas non plus la tâche. Pour résoudre ce problème, nous avons décomposé ces éléments et nous proposons quelques fonctionnalités primitives qui permettront de styliser les menus déroulants, mais aussi bien plus encore.

L'API Popover

Nous avons d'abord lancé un attribut global appelé popover, qui, je suis ravi de l'annoncer, a atteint le statut "Nouveauté disponible dans la référence" il y a quelques semaines.

Les éléments de popover sont masqués avec display: none jusqu'à ce qu'ils soient ouverts avec un élément d'appel tel qu'un bouton ou avec JavaScript. Pour créer un popover de base, définissez l'attribut popover sur l'élément et associez son ID à un bouton à l'aide de popovertarget. Le bouton est désormais l'invocateur.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

L'attribut popover étant désormais activé, le navigateur gère de nombreux comportements clés sans aucun script supplémentaire, y compris :

• Promotion à la couche supérieure : Une couche distincte au-dessus du reste de la page, vous n'avez donc pas besoin de jouer avec z-index.
• Fonctionnalité de fermeture légère : Si vous cliquez en dehors de la zone du pop-over, celui-ci se ferme et la sélection revient à l'élément précédent.
• Gestion de la mise au point sur les onglets par défaut : L'ouverture du popover fait que le prochain arrêt de tabulation se trouve à l'intérieur du popover.
• Associations de touches du clavier intégré : Appuyer sur la touche esc ou double-cliquer sur le bouton bascule fermera le pop-over et rétablira le focus.
• Liaisons de composants par défaut :  : le navigateur connecte sémantiquement un pop-up à son déclencheur.

Vous utilisez peut-être même cette API de pop-up aujourd'hui sans le savoir. GitHub a implémenté des pop-ups dans le menu "Nouveau" de sa page d'accueil et dans l'aperçu de la révision des demandes d'extraction. Ils ont progressivement amélioré cette fonctionnalité à l'aide du polyfill de popover, conçu par Oddbird avec le soutien important de Keith Cirkel de GitHub, pour prendre en charge les anciens navigateurs.

"Nous avons réussi à supprimer littéralement des milliers de lignes de code en migrant vers les popovers. Les pop-ups nous aident en éliminant la nécessité de lutter contre les nombres z-index magiques… L'établissement de la relation correcte de l'arborescence d'accessibilité avec le comportement déclaratif des boutons, ainsi que les comportements de mise au point intégrés, permettent à notre système de conception d'implémenter les modèles de la bonne manière beaucoup plus facilement.-Keith Cirkel, ingénieur logiciel, GitHub”

Animer les effets d'entrée et de sortie

Lorsque vous avez des pop-ups, vous voudrez probablement ajouter une interaction. Quatre nouvelles fonctionnalités d'interaction ont été ajoutées au cours de l'année écoulée pour animer les pop-ups. Exemples :

Possibilité d'animer display et content-visibility sur une timeline d'images clés.

La propriété transition-behavior avec le mot clé allow-discrete pour activer les transitions de propriétés discrètes telles que display.

La règle @starting-style permet d'animer les effets d'entrée de display: none vers la couche supérieure.

Propriété de superposition permettant de contrôler le comportement de la couche supérieure pendant une animation.

Ces propriétés fonctionnent pour tout élément que vous animez dans la couche supérieure, qu'il s'agisse d'un pop-over ou d'une boîte de dialogue. Voici à quoi cela ressemble pour une boîte de dialogue avec un arrière-plan :

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Commencez par configurer @starting-style afin que le navigateur sache quels styles utiliser pour animer cet élément dans le DOM. Cela s'applique à la fois à la boîte de dialogue et à l'arrière-plan. Ensuite, définissez le style de l'état ouvert pour la boîte de dialogue et l'arrière-plan. Pour une boîte de dialogue, il utilise l'attribut open et, pour un pop-over, le pseudo-élément ::popover-open. Enfin, animez opacity, display et overlay à l'aide du mot clé allow-discrete pour activer le mode d'animation dans lequel les propriétés discrètes peuvent effectuer une transition.

Positionnement de l'ancre

Le pop-over n'était que le début de l'histoire. Une mise à jour très intéressante : la prise en charge du positionnement d'ancrage est désormais disponible à partir de Chrome 125.

Grâce au positionnement d'ancrage, le navigateur peut gérer la logique permettant d'associer un élément positionné à un ou plusieurs éléments d'ancrage en quelques lignes de code. Dans l'exemple suivant, une info-bulle simple est ancrée à chaque bouton et positionnée en bas au centre.

Configurez une relation de positionnement d'ancrage en CSS en utilisant la propriété anchor-name sur l'élément d'ancrage (dans ce cas, le bouton) et la propriété position-anchor sur l'élément positionné (dans ce cas, l'info-bulle). Ensuite, appliquez un positionnement absolu ou fixe par rapport à l'ancrage à l'aide de la fonction anchor(). Le code suivant positionne le haut de l'info-bulle en bas du bouton.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Vous pouvez également utiliser directement le nom de l'ancrage dans la fonction d'ancrage et ignorer la propriété position-anchor. Cela peut être utile lorsque vous ancrez à plusieurs éléments.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Enfin, utilisez le nouveau mot clé anchor-center pour les propriétés justify et align afin de centrer l'élément positionné sur son point d'ancrage.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Bien qu'il soit très pratique d'utiliser le positionnement d'ancrage avec les popovers, les popovers ne sont absolument pas nécessaires pour utiliser le positionnement d'ancrage. Le positionnement d'ancrage peut être utilisé avec deux éléments (ou plus) pour créer une relation visuelle. En fait, la démo suivante, inspirée d'un article de Roman Komarov, montre un style de soulignement ancré aux éléments de liste lorsque vous les survolez ou les sélectionnez à l'aide de la touche de tabulation.

Cet exemple utilise la fonction d'ancrage pour définir la position d'ancrage à l'aide des propriétés physiques de left, right et bottom. Lorsque vous pointez sur l'un des liens, l'ancrage cible change et le navigateur déplace la cible pour appliquer le positionnement, tout en animant la couleur en même temps pour créer un effet soigné.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

Positionnement inset-area

En plus du positionnement absolu directionnel par défaut que vous avez probablement déjà utilisé, un nouveau mécanisme de mise en page a été inclus dans l'API de positionnement d'ancrage, appelé zone d'encart. La zone d'encart permet de placer facilement des éléments positionnés par rapport à leurs ancres respectives. Elle fonctionne sur une grille à neuf cellules avec l'élément d'ancrage au centre. Par exemple, inset-area: top place l'élément positionné en haut et inset-area: bottom le place en bas.

Voici une version simplifiée de la première démo d'ancrage avec inset-area :

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Vous pouvez combiner ces valeurs de position avec des mots clés d'étendue pour commencer à la position centrale et soit s'étendre vers la gauche, soit vers la droite, soit sur toute la largeur pour occuper l'ensemble des colonnes ou des lignes disponibles. Vous pouvez également utiliser des propriétés logiques. Pour visualiser et comprendre plus facilement ce mécanisme de mise en page, consultez cet outil dans Chrome 125 ou version ultérieure :

Comme ces éléments sont ancrés, l'élément positionné se déplace de manière dynamique sur la page lorsque son point d'ancrage se déplace. Dans ce cas, nous avons des éléments de carte stylisés par des requêtes de conteneur, qui sont redimensionnés en fonction de leur taille intrinsèque (ce que vous ne pouviez pas faire avec les requêtes média). Le menu ancré se déplacera avec la nouvelle mise en page à mesure que l'interface utilisateur de la carte changera.

Positions d'ancrage dynamiques avec position-try-options

Il est beaucoup plus facile de créer des menus et des sous-menus grâce à la combinaison de pop-ups et de positionnement d'ancres. De plus, lorsque vous atteignez le bord d'une fenêtre d'affichage avec votre élément ancré, vous pouvez également laisser le navigateur gérer le changement de position pour vous. Pour ce faire, vous disposez de différentes options. La première consiste à créer vos propres règles de positionnement. Dans ce cas, le sous-menu est initialement positionné à droite du bouton "storefront" (vitrine). Toutefois, vous pouvez créer un bloc @position-try pour le cas où il n'y aurait pas assez d'espace à droite du menu, en lui attribuant un identifiant personnalisé --bottom. Ensuite, vous connectez ce bloc @position-try à l'ancrage à l'aide de position-try-options.

Le navigateur bascule désormais entre ces états ancrés, en essayant d'abord la position de droite, puis en passant en bas. Et cela peut se faire avec une belle transition.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

En plus de la logique de positionnement explicite, le navigateur fournit quelques mots clés si vous souhaitez des interactions de base, comme inverser votre ancrage dans les directions de bloc ou en ligne.

position-try-options: flip-block, flip-inline;

Pour une expérience de retournement simple, profitez de ces valeurs de mot clé de retournement et évitez d'écrire une définition position-try. Vous pouvez désormais disposer d'un élément ancré entièrement fonctionnel et réactif à l'emplacement avec seulement quelques lignes de CSS.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

En savoir plus sur l'utilisation du positionnement d'ancrage

L'avenir de l'UI en couches

Les expériences ancrées sont partout. L'ensemble des fonctionnalités présentées dans cet article constitue un excellent point de départ pour libérer la créativité et mieux contrôler les éléments positionnés par rapport à un point d'ancrage et les interfaces en couches. Ce n'est que le début. Par exemple, actuellement, popover ne fonctionne qu'avec des boutons comme élément d'appel ou avec JavaScript. Pour les aperçus de type Wikipédia, un modèle que l'on retrouve partout sur le Web, il doit être possible d'interagir avec eux et de déclencher un pop-over à partir d'un lien et de l'intérêt de l'utilisateur sans nécessairement cliquer, comme un survol ou une sélection au clavier.

Pour la prochaine étape de l'API Popover, nous travaillons sur interesttarget afin de répondre à ces besoins et de faciliter la recréation de ces expériences avec les hooks d'accessibilité appropriés intégrés. Il s'agit d'un problème d'accessibilité difficile à résoudre, avec de nombreuses questions ouvertes sur les comportements idéaux. Toutefois, la résolution et la normalisation de cette fonctionnalité au niveau de la plate-forme devraient améliorer ces expériences pour tous.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

De plus, un autre déclencheur général orienté vers l'avenir (invoketarget) est disponible pour les tests dans Canary grâce au travail de deux développeurs tiers, Keith Cirkel et Luke Warlow. invoketarget est compatible avec l'expérience de développement déclarative que popovertarget fournit pour les pop-ups, normalisée pour tous les éléments interactifs, y compris <dialog>, <details>, <video>, <input type="file"> et plus encore.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Nous savons que cette API ne couvre pas encore tous les cas d'utilisation. Par exemple, styliser la flèche qui relie un élément ancré à son ancrage, en particulier lorsque la position de l'élément ancré change, et permettre à un élément de "glisser" et de rester dans la fenêtre d'affichage au lieu de se fixer à une autre position définie lorsqu'il atteint son cadre de sélection. Nous sommes ravis de lancer cette API puissante, mais nous avons également hâte de développer encore plus ses fonctionnalités à l'avenir.

Sélecteur stylable

En utilisant popover et anchor ensemble, l'équipe a fait des progrès pour enfin permettre un menu déroulant de sélection personnalisable. La bonne nouvelle, c'est que de nombreux progrès ont été réalisés. La mauvaise nouvelle est que cette API est encore très expérimentale pour le moment. Toutefois, je suis ravi de vous présenter quelques démos en direct et de vous informer de nos progrès. J'espère également recueillir vos commentaires. Tout d'abord, des progrès ont été réalisés concernant l'activation de la nouvelle expérience de sélection personnalisable pour les utilisateurs. La méthode actuelle, en cours de développement, consiste à utiliser une propriété d'apparence en CSS, définie sur appearance: base-select. Une fois l'apparence définie, vous bénéficierez d'une nouvelle expérience de sélection personnalisable.

select {
  appearance: base-select;
}

En plus de appearance: base-select, de nouvelles mises à jour HTML sont disponibles. Cela inclut la possibilité d'encapsuler vos options dans un datalist pour les personnaliser et d'ajouter du contenu non interactif arbitraire comme des images dans vos options. Vous aurez également accès à un nouvel élément, <selectedoption>, qui reflétera le contenu des options en lui-même, que vous pourrez ensuite personnaliser selon vos besoins. Cet élément est très pratique.

Démonstration visuelle

Démonstration en direct

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Le code suivant montre comment personnaliser <selectedoption> dans l'UI Gmail, où une icône visuelle représente le type de réponse sélectionné pour gagner de la place. Vous pouvez utiliser des styles d'affichage de base dans selectedoption pour différencier le style des options de celui de l'aperçu. Dans ce cas, le texte affiché dans l'option peut être masqué visuellement dans selectedoption.

Démonstration visuelle

Démonstration en direct

selectedoption .text {
  display: none;
}

L'un des principaux avantages de la réutilisation de l'élément <select> pour cette API est la rétrocompatibilité. Dans cette sélection de pays, vous pouvez voir une UI personnalisée avec des images de drapeaux dans les options pour faciliter l'analyse du contenu par l'utilisateur. Étant donné que les navigateurs non compatibles ignoreront les lignes qu'ils ne comprennent pas, telles que le bouton personnalisé, la liste de données, l'option sélectionnée et les images dans les options, le remplacement sera semblable à l'interface utilisateur de sélection par défaut actuelle.

Les possibilités sont infinies avec les sélecteurs personnalisables. J'aime particulièrement ce sélecteur de pays de style Airbnb, car il présente un style astucieux pour la conception responsives. Vous pourrez faire tout cela et bien plus encore avec le prochain sélecteur stylable, qui constitue un ajout indispensable à la plate-forme Web.

Accordéon exclusif

L'équipe Chrome ne s'est pas uniquement concentrée sur la résolution de problèmes de style de sélection (et de tous les éléments qui l'accompagnent). La première mise à jour de composant supplémentaire permet de créer des accordéons exclusifs, dans lesquels un seul élément de l'accordéon peut être ouvert à la fois.

Pour ce faire, appliquez la même valeur de nom à plusieurs éléments de détails. Vous créez ainsi un groupe de détails connectés, comme un groupe de boutons radio.

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid et :user-invalid

Les pseudo-classes :user-valid et :user-invalid constituent une autre amélioration des composants d'UI. Désormais stables dans tous les navigateurs, les pseudo-classes :user-valid et :user-invalid se comportent de la même manière que les pseudo-classes :valid et :invalid, mais ne correspondent à un contrôle de formulaire qu'après qu'un utilisateur a interagi de manière significative avec l'entrée. Cela signifie qu'il faut beaucoup moins de code pour déterminer si un utilisateur a interagi avec une valeur de formulaire ou si elle est devenue "sale". Cela peut être très utile pour fournir un retour d'information à l'utilisateur et réduit considérablement le script nécessaire pour le faire dans le passé.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

En savoir plus sur l'utilisation des pseudo-éléments de validation de formulaire user-*

field-sizing: content

field-sizing: content est une autre mise à jour de composant pratique qui a été déployée récemment. Elle peut être appliquée aux éléments de contrôle de formulaire tels que les entrées et les zones de texte. Cela permet à la taille de l'entrée d'augmenter (ou de diminuer) en fonction de son contenu. field-sizing: content peut être particulièrement utile pour les zones de texte, car vous n'êtes plus limité à des tailles fixes où vous devez faire défiler l'écran vers le haut pour voir ce que vous avez écrit dans les premières parties de votre requête dans une zone de saisie trop petite.

textarea, select, input {
  field-sizing: content;
}

En savoir plus sur le dimensionnement des champs

<hr> en <select>

La possibilité d'activer l'élément <hr> ou la règle horizontale dans les sélections est une autre fonctionnalité de composant petite, mais utile. Bien que cela n'ait pas beaucoup d'utilité sémantique, cela vous aide à séparer clairement le contenu d'une liste de sélection, en particulier le contenu que vous ne souhaitez pas nécessairement regrouper avec un optgroup, comme une valeur d'espace réservé.

Sélectionner une capture d'écran

Sélectionnez "Démonstration en direct".

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

En savoir plus sur l'utilisation de hr dans select

Améliorations de la qualité de vie

Nous itérons constamment, et pas seulement pour les interactions et les composants. De nombreuses autres améliorations de la qualité de vie ont été apportées au cours de l'année écoulée.

Imbrication avec l'assertion avant

L'imbrication CSS native a été déployée dans tous les navigateurs l'année dernière et a depuis été améliorée pour prendre en charge la prélecture. Cela signifie que le & avant les noms d'éléments n'est plus nécessaire. Cela rend l'imbrication beaucoup plus ergonomique et similaire à ce à quoi j'étais habitué auparavant.

L'une des choses que je préfère dans l'imbrication CSS, c'est qu'elle vous permet de bloquer visuellement les composants et d'inclure dans ces composants des états et des modificateurs, tels que des requêtes de conteneur et des requêtes média. Auparavant, j'avais l'habitude de regrouper toutes ces requêtes en bas du fichier pour plus de spécificité. Vous pouvez désormais les écrire de manière logique, juste à côté du reste de votre code.

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Align-content pour la mise en page en bloc

Autre changement très intéressant : la possibilité d'utiliser des mécanismes de centrage comme align-content dans la mise en page par blocs. Cela signifie que vous pouvez désormais centrer verticalement un élément dans une div sans avoir à appliquer une mise en page flex ou en grille, et sans les effets secondaires que vous ne souhaitez peut-être pas obtenir de ces algorithmes de mise en page, comme l'empêchement de l'effondrement des marges.

Capture d'écran

Démo

div {
  align-content: center;
}

Retour à la ligne : équilibrer et joli

En parlant de mise en page, la mise en page du texte a été améliorée grâce à l'ajout de text-wrap: balance et pretty. text-wrap: balance est utilisé pour un bloc de texte plus uniforme, tandis que text-wrap: pretty se concentre sur la réduction des orphelins sur la dernière ligne du texte.

h1 {
  text-wrap: balance;
}

En savoir plus sur text-wrap: balance

Mises à jour de la typographie internationale

L'agencement typographique des fonctionnalités de texte en CJK a bénéficié de nombreuses améliorations au cours de l'année écoulée, comme la fonctionnalité word-break: auto-phrase qui renvoie à la ligne à la fin d'une phrase.

text-spacing-trim, qui applique l'approche à la ponctuation pour améliorer la lisibilité de la typographie chinoise, japonaise et coréenne, et obtenir ainsi des résultats plus esthétiques.

Syntaxe des couleurs relatives

Dans le monde de la thématisation des couleurs, nous avons vu une mise à jour importante avec la syntaxe des couleurs relatives.

Dans cet exemple, les couleurs utilisent une thématisation basée sur Oklch. À mesure que la valeur de la teinte s'ajuste en fonction du curseur, l'ensemble du thème change. Pour ce faire, vous pouvez utiliser la syntaxe de couleur relative. L'arrière-plan utilise la couleur primaire, en fonction de la teinte, et ajuste les canaux de luminosité, de chroma et de teinte pour ajuster sa valeur. --i est l'index de frère dans la liste pour la gradation des valeurs, montrant comment vous pouvez combiner la progression avec des propriétés personnalisées et la syntaxe de couleur relative pour créer des thèmes.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

Fonction light-dark()

En plus de la fonction light-dark(), la création de thèmes est devenue beaucoup plus dynamique et simplifiée.

La fonction light-dark() est une amélioration ergonomique qui simplifie les options de thème de couleur afin que vous puissiez écrire des styles de thème de manière plus concise, comme le montre si bien ce diagramme visuel d'Adam Argyle. Auparavant, vous aviez besoin de deux blocs de code différents (votre thème par défaut et une requête de préférence utilisateur) pour configurer les options de thème. Vous pouvez désormais écrire ces options de style pour les thèmes clair et sombre sur la même ligne de code CSS à l'aide de la fonction light-dark().

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Si l'utilisateur a sélectionné un thème clair, le bouton aura un arrière-plan bleu clair. Si l'utilisateur a sélectionné un thème sombre, le bouton aura un arrière-plan bleu foncé.

Sélecteur de :has()

Et je ne pourrais pas parler d'UI moderne sans mentionner l'un des points forts de l'interopérabilité de l'année dernière, à savoir le sélecteur :has(), qui a été déployé dans les navigateurs en décembre dernier. Cette API change la donne pour l'écriture de styles logiques.

Le sélecteur :has() vous permet de vérifier si un élément enfant a des enfants spécifiques ou si ces enfants sont dans un état spécifique. Il peut également servir de sélecteur parent.

:has() s'est déjà révélé particulièrement utile pour de nombreuses entreprises, y compris PolicyBazaar, qui utilisent :has() pour styliser des blocs en fonction de leur contenu intérieur. Par exemple, dans la section de comparaison, le style s'ajuste s'il y a un forfait à comparer dans le bloc ou s'il est vide.

"Grâce au sélecteur :has(), nous avons pu éliminer la validation basée sur JavaScript de la sélection de l'utilisateur et la remplacer par une solution CSS qui fonctionne parfaitement pour nous, avec la même expérience qu'auparavant." – Aman Soni, responsable technique, PolicyBazaar

Requêtes de conteneur

Les requêtes de conteneur sont un autre ajout clé au Web, qui est désormais disponible et de plus en plus utilisé. Elles permettent d'interroger la taille intrinsèque de l'élément parent pour appliquer des styles. Elles sont beaucoup plus précises que les requêtes média, qui n'interrogent que la taille de la fenêtre d'affichage.

Angular a récemment lancé un nouveau site de documentation sur angular.dev. Il utilise des requêtes de conteneur pour styliser les blocs d'en-tête en fonction de l'espace disponible sur la page. Ainsi, même si la mise en page change et passe d'une mise en page à barre latérale multicolonne à une mise en page à une seule colonne, les blocs d'en-tête peuvent s'ajuster automatiquement.

Sans les requêtes de conteneur, il était assez difficile d'obtenir un tel résultat, ce qui nuisait aux performances, car il fallait utiliser des observateurs de redimensionnement et d'éléments. Il est désormais trivial de styliser un élément en fonction de la taille de son parent.

@property

Enfin, nous sommes ravis de voir la propriété @bientôt disponible dans Baseline. Il s'agit d'une fonctionnalité clé pour donner un sens sémantique aux propriétés personnalisées CSS (également appelées variables CSS) et qui permet de nouvelles fonctionnalités d'interaction. @property permet également d'utiliser le sens contextuel, la vérification du type, les valeurs par défaut et les valeurs de remplacement dans le CSS. Ouvrez les portes à des fonctionnalités encore plus robustes, comme les requêtes de style de plage. Cette fonctionnalité, qui n'était pas possible auparavant, apporte une grande profondeur au langage CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Conclusion

Avec toutes ces nouvelles fonctionnalités d'UI puissantes disponibles dans les navigateurs, les possibilités sont infinies. Les nouvelles expériences interactives avec des animations basées sur le défilement et des transitions de vue rendent le Web plus fluide et interactif comme jamais auparavant. De plus, les composants d'UI de niveau supérieur permettent de créer plus facilement que jamais des composants robustes et magnifiquement personnalisés sans supprimer l'intégralité de l'expérience native. Enfin, les améliorations de la qualité de vie en termes d'architecture, de mise en page, de typographie et de conception responsives permettent non seulement de résoudre les petits problèmes importants, mais aussi de fournir aux développeurs les outils dont ils ont besoin pour créer des interfaces complexes fonctionnant sur différents appareils, facteurs de forme et besoins des utilisateurs.

Ces nouvelles fonctionnalités vous permettent de supprimer le script tiers pour les fonctionnalités gourmandes en ressources, comme le scrollytelling et l'ancrage d'éléments les uns aux autres, de créer des transitions de page fluides, de styliser enfin les menus déroulants et d'améliorer la structure globale de votre code de manière native.

C'est le moment idéal pour devenir développeur Web. L'enthousiasme et l'énergie déployés pour cette annonce n'ont pas été vus depuis l'annonce de CSS3. Des fonctionnalités dont nous avions besoin, mais dont nous n'avions fait que rêver, sont enfin devenues réalité et font désormais partie de la plate-forme. C'est grâce à vos commentaires que nous pouvons les prioriser et les mettre en œuvre. Nous nous efforçons de faciliter les tâches difficiles et fastidieuses de manière native afin que vous puissiez consacrer plus de temps à la création de ce qui compte, comme les fonctionnalités de base et les détails de conception qui distinguent votre marque.

Pour en savoir plus sur ces nouvelles fonctionnalités à mesure de leur déploiement, consultez developer.chrome.com et web.dev, où notre équipe partage les dernières actualités sur les technologies Web. Essayez les animations basées sur le défilement, les transitions de vue, le positionnement d'ancrage ou même la sélection stylable, et dites-nous ce que vous en pensez. Nous sommes là pour vous écouter et vous aider.