Nouveautés de l'UI Web : récapitulatif de l'I/O 2025

Una Kravets

Publié le 14 août 2025

La saison des événements Google I/O touche à sa fin. Cet article récapitule les principaux points forts concernant CSS et l'UI Web qui ont été présentés lors de nos événements cette année.

Des fonctionnalités incroyablement puissantes dont les développeurs ne pouvaient que rêver sont désormais disponibles dans les navigateurs et atteignent la compatibilité entre navigateurs plus rapidement que jamais. Cependant, malgré ces progrès, certains des modèles d'UI les plus courants restent étonnamment difficiles à implémenter correctement. Vous devez souvent vous appuyer sur des frameworks JavaScript, des astuces CSS complexes et des montagnes de code personnalisé pour créer des composants qui devraient être plus simples.

L'équipe Chrome, en collaboration avec d'autres fournisseurs de navigateurs, des organismes de normalisation tels que CSSWG et WHATWG, et des groupes communautaires tels qu'Open UI, s'efforce de rendre ces modèles d'UI fondamentaux vraiment simples à implémenter.

Menus de sélection personnalisables

L'élément <select> est essentiel pour les formulaires, mais sa structure interne a toujours été masquée par le navigateur, ce qui rendait presque impossible l'application d'un style CSS cohérent et complet. Pour créer un meilleur <select>, vous devez comprendre ses blocs de construction : l'API Popover et l'API CSS Anchor Positioning.

L'API Popover : désormais dans Baseline

Une liste déroulante personnalisée a besoin d'une boîte d'options flottante qui apparaît au-dessus de tous les autres éléments de l'UI, qui est facile à fermer et qui gère correctement la mise au point. L'API Popover gère tout cela et, depuis cette année, elle a atteint l'état "Nouveauté de référence", ce qui signifie qu'elle est stable dans tous les principaux navigateurs.

Pour créer un popover, vous avez besoin de deux éléments : un élément déclencheur (comme un <button>) et l'élément popover lui-même. Connectez-les en attribuant un id et un attribut [popover] au pop-over, puis en référençant ce id dans l'attribut [popovertarget] du bouton.

L'API Popover gère l'intégralité du cycle de vie de l'élément, en fournissant :

• Rendu de la couche supérieure : plus besoin de se battre avec le z-index.
• Fonctionnalités de fermeture légère facultatives : le pop-over se ferme lorsqu'un utilisateur clique en dehors de la zone du pop-over.
• Gestion automatique de la sélection : le navigateur gère la navigation par tabulation dans et hors du popover.
• Liaisons accessibles : le modèle d'interaction sous-jacent est géré de manière native.

L'élément <dialog> est mis à niveau

Bien que le popover soit puissant, il n'est pas toujours le bon choix. Par exemple, dans les interactions de blocage de page qui nécessitent un retour de l'utilisateur, un modal <dialog> est plus approprié.

Auparavant, <dialog> ne disposait pas de certaines fonctionnalités pratiques de [popover], mais cela est en train de changer. Avec le nouvel attribut closedby="any", les boîtes de dialogue modales sont désormais compatibles avec la fonctionnalité de fermeture simplifiée, qui permet de les fermer lorsque l'utilisateur clique en dehors ou appuie sur la touche Échap.

De plus, les appelants de commande ([command] et [commandfor]) offrent un moyen déclaratif et sans JavaScript de connecter un bouton à une action, comme l'ouverture d'une boîte de dialogue avec command="show-modal".

Positionnement des ancres CSS

Une fois qu'un popover s'affiche, il doit être positionné par rapport à l'élément qui l'a ouvert. Le calcul manuel de cette valeur avec JavaScript est fragile et peut nuire aux performances.

À partir de Chrome 125, vous pouvez utiliser l'API CSS Anchor Positioning. Cette nouvelle fonctionnalité permet d'ancrer un élément à un autre de manière déclarative, en gérant automatiquement le repositionnement lorsqu'il s'approche du bord de l'écran. Cette fonctionnalité fait partie d'Interop 2025, une initiative inter-navigateurs visant à implémenter des fonctionnalités très demandées. Nous pouvons donc nous attendre à ce qu'elle soit disponible dans tous les principaux navigateurs d'ici la fin de l'année 2025.

Bien que vous puissiez associer explicitement des éléments avec les propriétés anchor-name et position-anchor, une mise à jour de la spécification et de Chrome 133 crée une relation d'ancrage implicite entre un <popover> et son <button> d'appel. Cela simplifie considérablement le code et signifie que vous pouvez désormais positionner le pop-up avec une seule ligne de code CSS, par exemple : position-area: bottom span-left.

L'outil d'ancrage de chrome.dev vous montre comment utiliser position-area pour obtenir l'emplacement souhaité :

Allez plus loin et demandez au navigateur de repositionner vos ancres pour éviter qu'elles ne sortent de l'écran en définissant des solutions de repli avec position-try-fallbacks. La démonstration suivante montre un popover qui utilise cette propriété pour la logique de repositionnement intégrée :

Un <select> entièrement personnalisable

Avec ces blocs de construction en place dans les versions précédentes, le style Web natif pour les éléments <select> est enfin arrivé dans Chrome 134. Cela inclut une nouvelle propriété appearance, de nouveaux pseudo-éléments et l'élément <selectedcontent>.

Pour déverrouiller la personnalisation, appliquez appearance: base-select; à l'élément <select> et à son nouveau pseudo-élément ::picker(select), qui cible la liste déroulante des options. Cela expose de nouvelles parties internes pour la mise en forme, y compris :

• <selectedcontent> : représente le contenu de l'option sélectionnée affichée dans le bouton.
• ::picker-icon : icône de flèche du menu déroulant
• <option>:checked et ::checkmark : pour styliser l'option sélectionnée et son indicateur de coche

Cela permet d'inclure du contenu enrichi dans les options et de contrôler précisément l'affichage. Par exemple, vous pouvez afficher une icône et un sous-titre dans la liste des options, mais les masquer dans l'état fermé à l'aide de display: none dans selectedcontent.

Le meilleur, c'est que cette API peut être améliorée progressivement. Dans les navigateurs qui ne sont pas compatibles avec ces fonctionnalités, les utilisateurs continueront de bénéficier d'un sélecteur Web natif fonctionnel. Vous obtenez un aspect personnalisé tout en conservant l'accessibilité intégrée, la navigation au clavier et l'intégration de formulaires de l'élément de sélection Web natif.

Carrousels

Les carrousels sont partout sur le Web, et pas seulement dans les sections hero. Cela inclut le contenu à défilement horizontal dans des mises en page compactes, comme l'UI d'une plate-forme de téléchargement d'applications. Cependant, la création de carrousels sur le Web reste difficile, avec de nombreuses considérations telles que la gestion de l'état, les saccades de défilement, l'interactivité et l'accessibilité. Mais si vous y réfléchissez, les carrousels sont essentiellement des zones de défilement sophistiquées avec des affordances d'UI supplémentaires.

Premiers pas avec les scrollers

Pour créer un carrousel, vous commencez par une liste d'éléments qui débordent de leur conteneur. Pour masquer la barre de défilement horizontale tout en conservant la possibilité de faire défiler le contenu, utilisez scrollbar-width: none. De plus, pour que le sélecteur se déplace rapidement, appliquez scroll-snap-type et scroll-snap-align, ce qui garantit que les éléments s'alignent lorsque l'utilisateur fait défiler l'écran.

Précédent et suivant avec un ::scroll-button

Le nouveau pseudo-élément ::scroll-button(), qui a été ajouté à Chrome 135, indique au navigateur de générer des boutons "Suivant" et "Précédent" avec état et accessibles. Le navigateur gère automatiquement les rôles ARIA, l'ordre de tabulation et même la désactivation des boutons lorsque vous atteignez le début ou la fin, le tout sans aucun code JavaScript supplémentaire.

Pour initialiser les boutons de défilement, fournissez-leur du contenu et un libellé accessible, comme suit :

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

Définissez le style de ces boutons et positionnez-les par rapport à leur carrousel parent à l'aide du positionnement d'ancrage CSS, qui est l'approche recommandée.

Navigation directe avec ::scroll-marker

Pour les indicateurs de points ou les miniatures, les pseudo-éléments ::scroll-marker et ::scroll-marker-group associent les repères de navigation directement aux éléments de votre conteneur de défilement. Le navigateur traite le groupe comme un tablist et gère la navigation au clavier.

Comme pour les boutons de défilement, vous pouvez activer les indicateurs de défilement en utilisant la propriété content et en fournissant un libellé accessible. Dans l'exemple suivant, un attribut de données est utilisé pour définir le libellé du marqueur de défilement. De plus, positionnez les repères de défilement dans ::scroll-marker-group à l'aide de la propriété scroll-marker-group. Enfin, stylisez le repère actif à l'aide de la nouvelle pseudo-classe :target-current. Voici un exemple de ce à quoi cela pourrait ressembler pour un carrousel de base :

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

Requêtes sur l'état de défilement

De nouvelles fonctionnalités CSS liées au défilement vous permettent de créer des carrousels plus dynamiques et interactifs. La requête d'état de défilement est une nouvelle requête média qui s'applique en fonction de l'état d'un élément de défilement. Il existe trois types de requêtes sur l'état de défilement, accessibles à l'aide de scroll-state() dans une instruction @container. Les voici :

• scroll-state(snapped) : correspond à un élément en position "ancrée". Dans les carrousels, il s'agit de celui qui est centré.
• scroll-state(stuck) : stylisez un élément, comme un en-tête, lorsque son parent devient fixe.
• scroll-state(scrollable) : ajoutez des indicateurs visuels, comme un fondu, pour montrer qu'il y a plus de contenu à faire défiler.

Conclusion

Grâce à une combinaison de nouvelles primitives de carrousel CSS, de requêtes sur l'état de défilement et de positionnement d'ancres, vous pouvez créer plus facilement des carrousels personnalisés et interactifs. Allez plus loin en intégrant des animations déclenchées par le défilement pour associer directement les animations à la position de défilement. Vous pouvez ainsi créer des effets performants, comme des éléments qui changent d'échelle et s'estompent lorsqu'ils apparaissent à l'écran. Ces animations s'exécutent en dehors du thread principal, ce qui permet une expérience fluide.

Ce carrousel interactif combine des requêtes scroll-state(), ::scroll-button, ::scroll-marker, le positionnement des ancres CSS et :target-current.

Vous pouvez également utiliser une nouvelle propriété appelée interactivity pour aider les utilisateurs à se concentrer sur le contenu actif. interactivity: inert permet à l'utilisateur d'appliquer l'inertie à l'aide de CSS, ce qui rend les éléments du carrousel hors écran non sélectionnables et les supprime de l'arborescence d'accessibilité.

En savoir plus sur les carrousels de CSS

Fiches interactives au survol

Les hovercards (les pop-ups enrichis qui s'affichent lorsque vous pointez sur un nom d'utilisateur ou un lien) sont incroyablement utiles, mais notoirement difficiles à créer correctement. Il peut falloir des mois à une équipe dédiée pour gérer correctement les délais, la gestion des événements et la compatibilité multi-appareils. Toutefois, nous travaillons sur une nouvelle solution déclarative qui devrait résoudre ce problème une fois pour toutes.

Pop-overs déclenchés par l'intérêt avec [interestfor]

L'attribut [interestfor] est au cœur de la magie des info-bulles déclaratives. Cette fonctionnalité à venir apporte la puissance des pop-ups, mais les déclenche en fonction de l'intérêt de l'utilisateur. Par exemple, l'intérêt d'un utilisateur pour un dispositif de pointage peut se traduire par un survol du pointeur, une navigation par tabulation avec un clavier, ou un appui prolongé ou un appui sur un écran tactile. L'interaction mobile n'a pas encore été résolue.

Pour convertir un pop-over basé sur un clic en pop-over basé sur un intérêt, créez un élément d'appel, qui peut être un <button> ou un <a>, et attribuez-lui un attribut [interestfor] égal au id de l'élément [popover]. Voici à quoi il ressemble en HTML :

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

Le navigateur gère toute la logique d'événement complexe, y compris :

• Événements d'entrée et de sortie : entrée par survol sur les appareils à pointeur fin, navigation par tabulation avec le clavier, appui prolongé ou toucher sur les appareils à pointeur grossier.
• Retards d'événement : contrôlez les retards d'entrée et de sortie avec une seule propriété CSS.

Cette fonctionnalité est compatible avec d'autres fonctionnalités de popover, comme la prise en charge de la couche supérieure, où le popover s'affiche sur une nouvelle couche au-dessus du reste de l'arborescence DOM. Les liaisons de composants sémantiques et le modèle d'arborescence d'accessibilité sous-jacent sont gérés de manière native.

Mise en forme des déclencheurs d'intérêt

Les déclencheurs d'intérêt incluent de nouvelles fonctionnalités. L'une d'elles est la possibilité de contrôler les délais d'entrée et de sortie à l'aide d'une propriété CSS : interest-target-delay. L'autre est la possibilité de styliser l'élément d'appel en fonction de son intérêt ou non, à l'aide de la pseudo-classe :has-interest.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" et interface utilisateur multifonctionnelle

Un nouvel élément clé pour les déclencheurs d'intérêt est un nouveau type de pop-up : popover="hint". La principale différence avec les autres pop-ups est qu'un pop-up d'indice n'en ferme pas d'autres lorsqu'il s'ouvre. C'est idéal pour les info-bulles ou les cartes d'aperçu qui doivent s'afficher sans fermer un menu ou une fenêtre de chat déjà ouverts.

Cela vous permet de créer de manière déclarative une UI puissante et multifonctionnelle. Un même bouton peut désormais avoir un pop-over automatique utilisant popovertarget pour son action de clic principale (comme l'ouverture d'un panneau de notifications) et un pop-over d'indice d'intérêt pour afficher un info-bulle utile lorsque le pointeur est au-dessus.

L'avenir est déclaratif

Les fonctionnalités abordées ici représentent un changement fondamental vers une plate-forme Web plus puissante et déclarative. En laissant le navigateur gérer le travail complexe et répétitif de la gestion de l'état et de l'accessibilité, nous pouvons supprimer des montagnes de JavaScript, améliorer les performances et nous concentrer sur ce que nous faisons le mieux : créer des expériences utilisateur innovantes et attrayantes. Nous vivons un véritable âge d'or pour les UI Web, et ce n'est que le début. Suivez-nous ici même pour découvrir comment nous créons un Web plus puissant et plus facile à utiliser.

Autres ressources

• API Popover
• Positionnement de l'ancre
• Outil d'ancrage
• Appels de commande
• Menus de sélection personnalisables (RFC)
• Carrousels de CSS
• Galerie carrousel CSS
• Configurateur de carrousel CSS
• Requêtes sur l'état de défilement CSS
• Explication des déclencheurs d'intérêt