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

La plate-forme Web regorge d'innovations, avec des fonctionnalités CSS et d'UI Web à l'avant-garde de cette évolution passionnante. Nous vivons un âge d'or pour l'interface utilisateur Web, avec de nouvelles fonctionnalités CSS disponibles dans les navigateurs à un rythme inédit, ouvrant de nombreuses possibilités pour créer des expériences Web attrayantes et attrayantes. Cet article de blog présente en détail l'état actuel des CSS et présente 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.

De nouvelles expériences interactives

Une expérience Web est fondamentalement un appel et une réponse entre vous et vos utilisateurs. C'est pourquoi il est si important d'investir dans des interactions de qualité avec les utilisateurs. Nous avons travaillé sur des améliorations très importantes qui permettent de débloquer des fonctionnalités inédites sur le Web de navigation dans les pages Web et entre elles.

Animations liées au défilement

Comme son nom l'indique, l'API d'animations liées au défilement vous permet de créer des animations dynamiques basées sur le défilement sans recourir à des observateurs de défilement ni à d'autres scripts lourds.

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

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

Les animations liées au défilement peuvent être utilisées pour mettre en évidence du contenu important, 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 régie 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 zone de défilement (qui correspond ici aussi à la fenêtre d'affichage).

Il est important de garder à l'esprit la compatibilité des navigateurs et les préférences des utilisateurs, en particulier pour les besoins d'accessibilité. Par conséquent, utilisez la règle @supports pour vérifier si le navigateur accepte les animations liées au défilement et encapsulez-les dans une requête de préférence utilisateur, telle que @media (prefers-reduced-motion: no-preference), afin de 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 pose pas de problème à l'utilisateur.

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

Les animations liées au défilement peuvent signifier des expériences de défilement sur toute la page, mais elles peuvent également signifier des animations plus subtiles comme une barre d’en-tête minimisant et affichant 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émonstration utilise différentes animations d'images clés (l'en-tête, le texte, la barre de navigation et l'arrière-plan), puis applique à chacune l'animation déclenchée par le défilement correspondante. Bien qu'ils aient tous un style d'animation différent, ils ont tous la même timeline d'animation, le conteneur 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 à 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. De plus, il n'est plus nécessaire d'envoyer plusieurs observateurs de défilement, ce qui offre des avantages considérables en termes de performances. En effet, les animations liées au défilement fonctionnent en dehors du thread principal lors de l'animation de propriétés pouvant être animées sur le compositeur, telles que 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 liées au défilement pour faire apparaître la barre de navigation du produit lorsque vous faites défiler la page. L'utilisation de cette API a présenté de sérieux avantages, tant pour la gestion du code que pour les performances.

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

L'avenir des effets de défilement

Nous savons que ces effets vont continuer à rendre le Web plus attrayant et nous réfléchissons déjà à ce qui pourrait l'être ensuite. Vous pouvez non seulement utiliser de nouvelles timelines d'animation, mais aussi utiliser un point de défilement pour déclencher le lancement d'une animation, appelées animations déclenchées par le défilement.

D'autres fonctionnalités de défilement seront également disponibles prochainement dans les navigateurs. La démonstration suivante présente une combinaison de ces fonctionnalités à venir. Il utilise le CSS scroll-start-target 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 facilite la synchronisation des données avec l'événement ancré.

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 particulières ne sont actuellement disponibles qu'en version Canary sous forme de drapeau. Toutefois, elles permettent de débloquer des fonctionnalités jusqu'alors impossibles ou très difficiles à développer sur la plate-forme et mettent en évidence l'avenir des interactions basées sur le défilement.

Pour en savoir plus sur les animations liées au défilement, notre équipe vient de lancer une nouvelle série de vidéos disponible sur la chaîne YouTube Chrome pour les développeurs. Ici, vous allez découvrir les bases des animations liées au défilement de Bramus Van Damme, y compris son fonctionnement, le vocabulaire, les différentes façons de créer des effets et comment combiner des effets pour créer des expériences riches. C'est une super série de vidéos à découvrir.

Afficher les transitions

Nous venons d'aborder une nouvelle fonctionnalité très puissante qui permet d'animer dans les pages Web. Il existe également une nouvelle fonctionnalité très efficace : les transitions de vue, qui permettent de créer une animation entre les pages vues et de créer une expérience utilisateur fluide. Les transitions de vue introduisent un niveau de fluidité supplémentaire sur le Web. Elles vous permettent de créer des transitions fluides entre différents affichages au sein d'une même page, voire entre différentes pages.

Airbnb est l'une des entreprises qui expérimentent déjà l'intégration de transitions de vue dans leur interface utilisateur pour offrir une expérience de navigation Web fluide et fluide. Cela inclut la barre latérale de l'éditeur de fiche, qui permet de retoucher des photos et d'ajouter des équipements, le tout dans un parcours utilisateur fluide.

Bien que ces effets en pleine page soient magnifiques et fluides, vous pouvez également créer des micro-interactions, comme dans cet exemple, où l'affichage de votre liste est mis à jour à chaque interaction de l'utilisateur. Vous pouvez obtenir cet effet facilement avec des transitions de vue.

Pour activer rapidement des 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 qui effectue une transition possède un view-transition-name intégré ou 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 cours de transition

Vous pouvez utiliser des noms de transition de vue pour appliquer des animations personnalisées à votre transition de vue, même si la transition de nombreux éléments peut s'avérer fastidieuse. Cette année, la première mise à jour de l'affichage des transitions simplifie ce problème et permet de créer des classes de transition de vue pouvant être appliquées aux animations personnalisées.

Afficher les types de transition

Une autre amélioration importante des transitions d'affichage est la compatibilité avec les types de transitions d'affichage. Les types de transition "Afficher" sont utiles lorsque vous souhaitez un autre type de transition de vue visuelle lors de l'animation vers et depuis des pages vues.

Par exemple, vous pouvez souhaiter que l'animation d'une page d'accueil sur une page de blog diffère de celle de la page d'accueil. Vous pouvez également vouloir intervertir les pages de différentes manières, comme dans cet exemple, de gauche à droite et inversement. Auparavant, cela était compliqué. Vous pouviez ajouter des classes au DOM pour appliquer des styles, puis vous deviez les supprimer par la suite. Les types "Afficher les transitions" permettent au navigateur de nettoyer les anciennes transitions au lieu de vous obliger à effectuer cette opération 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 contenant les types.

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

Transitions d'affichage sur plusieurs pages

Ce qui rend le Web puissant, c'est son étendue. De nombreuses applications ne se résument pas à une seule page, mais à une mosaïque solide contenant plusieurs pages. C'est pourquoi nous sommes si heureux d'annoncer que les transitions entre documents sont désormais disponibles pour les applications multipages dans Chromium 126.

Ce nouvel ensemble de fonctionnalités pour l'ensemble de documents inclut des expériences Web ayant la même origine, comme la navigation de web.dev vers web.dev/blog, mais cela n'inclut pas la navigation multi-origine, comme la navigation de web.dev vers blog.web.dev ou vers un autre domaine comme google.com.

L'une des principales différences avec les transitions de vue d'un même document est que vous n'avez pas besoin d'encapsuler votre transition avec document.startViewTransition(). À la place, activez les deux pages impliquées dans la transition de vue en utilisant la règle CSS @view-transition.

@view-transition {
  navigation: auto;
}

Pour obtenir un effet plus personnalisé, vous pouvez accrocher en JavaScript à l'aide des nouveaux écouteurs d'événements pageswap ou pagereveal, qui vous permettent d'accéder à l'objet de transition d'affichage.

pageswap vous permet d'apporter des modifications de dernière minute à la page sortante juste avant la prise des anciens instantanés. Avec pagereveal, vous pouvez personnaliser la nouvelle page avant qu'elle ne commence à s'afficher une fois qu'elle a été initialisée.

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

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

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

• Transitions délimitées: elles vous permettent de limiter une transition vers une sous-arborescence DOM afin que le reste de la page reste interactif. De plus, plusieurs transitions d'affichage peuvent s'exécuter en même temps.
• Transitions d'affichage basées sur un geste: utilisez des gestes de déplacement ou de balayage pour déclencher une transition entre documents et une expérience plus native sur le Web.
• Mise en correspondance de la navigation dans CSS: personnalisez votre transition de vue entre documents directement dans votre CSS au lieu d'utiliser les événements pageswap et pagereveal en JavaScript. Pour en savoir plus sur les transitions de vue pour les applications multipages, y compris sur la façon de les configurer de manière optimale avec le préaffichage, consultez la présentation suivante de Bramus Van Damme:

Composants d'interface utilisateur compatibles avec Google Engine: simplifier des interactions complexes

Créer des applications Web complexes n'est pas une mince affaire, mais les langages CSS et HTML évoluent pour rendre ce processus beaucoup plus facile à gérer. De nouvelles fonctionnalités et améliorations simplifient la création des composants d'interface utilisateur, ce qui vous permet de vous concentrer sur la création d'expériences de qualité. Cette initiative est le fruit d'une collaboration entre plusieurs organismes de normalisation et groupes communautaires clés, dont les CSS Working Group, Open UI Community Group et WHATWG (Web Hypertext Application Technology Working Group).

L'une des principales difficultés rencontrées par les développeurs concerne une demande en apparence simple: la possibilité d'appliquer un style aux menus déroulants (l'élément de sélection). Bien que cela semble simple à première vue, il s'agit d'un problème complexe, impliquant de nombreuses parties de la plate-forme : mise en page et affichage, défilement et interaction, style du user-agent et propriétés CSS, et même modification du code HTML lui-même.

Une liste déroulante se compose de nombreuses parties et comprend de nombreux états qui doivent être pris en compte, tels que:

• Combinaisons de touches (pour entrer ou sortir de l'interaction)
• Cliquer pour ignorer
• Gestion active des fenêtres pop-up (fermeture des autres fenêtres pop-up dès qu'une fenêtre s'ouvre)
• Gestion du focus d'onglet
• Visualiser la valeur de l'option sélectionnée
• Style d'interaction avec la flèche
• Gestion des états (ouverture/fermeture)

Il est actuellement difficile de gérer tous ces états vous-même, mais la plate-forme ne vous facilite pas non plus la tâche. Pour résoudre ce problème, nous avons décomposé ces éléments et nous fournissons quelques fonctionnalités primitives qui permettront d'appliquer un style aux menus déroulants, mais aussi d'effectuer bien d'autres actions.

L'API Popover

Nous avons d'abord lancé un attribut global appelé popover, dont j'ai le plaisir de vous annoncer que l'état "Nouvelle version de référence" vient d'être atteint il y a quelques semaines.

Les éléments de pop-over sont masqués avec display: none jusqu'à ce qu'ils soient ouverts avec un demandeur comme un bouton ou avec JavaScript. Pour créer une fenêtre contextuelle de base, définissez l'attribut de pop-up sur l'élément et associez son ID à un bouton à l'aide de popovertarget. Maintenant, le bouton est le demandeur,

<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, notamment:

• Promotion dans la couche supérieure: Un calque distinct au-dessus du reste de la page, vous n'avez donc pas à jouer avec z-index.
• Fonctionnalité de fermeture légère: Si vous cliquez en dehors de la zone, cette dernière se ferme et le curseur est à nouveau activé.
• Gestion par défaut du ciblage des onglets: Lorsque vous ouvrez le pop-up, l'onglet suivant s'arrête dans le pop-up.
• Raccourcis clavier intégrés: Appuyez sur la touche esc ou appuyez deux fois sur l'écran pour fermer le pop-up et replacer le curseur au premier plan.
• 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 popover aujourd'hui sans vous en rendre compte. GitHub a implémenté un pop-up sur le menu "Nouveau" de sa page d'accueil et dans la vue d'ensemble de l'examen de la demande d'extraction. Ils ont progressivement amélioré cette fonctionnalité à l'aide du polyfill, créé par Oddbird avec un soutien important de Keith Cirkel de GitHub, pour prendre en charge les navigateurs plus anciens.

"Nous avons réussi à abandonner des milliers de lignes de code en migrant vers une fenêtre pop-up. Popover nous aide en nous éliminant de devoir combattre les nombres z-index magiques. Nous avons établi une relation d'arborescence d'accessibilité correcte avec le comportement des boutons déclaratifs, et les comportements de sélection intégrés permettent à notre système de conception d'implémenter les modèles correctement. - Keith Cirkel, ingénieur logiciel, GitHub

Animer les effets d'entrée et de sortie

Lorsque des fenêtres pop-up sont créées, il est souhaitable d'ajouter un peu d'interaction. Quatre nouvelles fonctionnalités d'interaction ont été introduites au cours de l'année écoulée pour permettre l'animation des pop-overs. humainement responsable :

Possibilité d'animer display et content-visibility sur la timeline d'une image clé.

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

La règle @starting-style pour animer les effets des entrées depuis display: none et dans 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 tous les éléments que vous animez dans la couche supérieure, qu'il s'agisse d'une fenêtre pop-up ou d'une boîte de dialogue. L'ensemble ressemble à ceci pour une boîte de dialogue avec un fond d'écran:

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

Tout d'abord, configurez @starting-style pour que le navigateur sache dans quels styles animer cet élément dans le DOM. Cette opération est effectuée à la fois pour la boîte de dialogue et pour le fond. Ensuite, appliquez un style à l'état ouvert pour la boîte de dialogue et le fond. Pour une boîte de dialogue, elle utilise l'attribut open et, pour une fenêtre contextuelle, 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 des propriétés discrètes peuvent être transformées.

Positionnement de l'ancre

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

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

Configurez une relation d'ancrage positionnée dans 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). Appliquez ensuite un positionnement absolu ou fixe par rapport à l'ancre à 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 le nom de l'ancre directement dans la fonction d'ancrage et ignorer la propriété position-anchor. Cela peut être utile lors de l'ancrage à 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 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 de l'ancre avec pop-over, il n'est certainement pas nécessaire de l'utiliser. Le positionnement d'ancrage peut être utilisé avec deux éléments (ou plus) pour créer une relation visuelle. La démo suivante, qui s'inspire d'un article de Roman Komarov, présente un style souligné ancré aux éléments de liste lorsque vous passez la souris dessus ou appuyez dessus.

Cet exemple utilise la fonction d'ancrage pour configurer la position de l'ancre à l'aide des propriétés physiques de left, right et bottom. Lorsque vous passez la souris sur l'un des liens, l'ancre cible change et le navigateur la déplace pour appliquer le positionnement. La couleur est également animée afin de 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 de inset-area

En plus du positionnement absolu directionnel par défaut que vous avez probablement déjà utilisé, il existe un nouveau mécanisme de mise en page inclus qui a été intégré à l'API de positionnement d'ancrage, appelé "zone d'encart". La zone d'encart facilite le positionnement des éléments positionnés par rapport à leurs ancrages respectifs. 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 place l'élément positionné en bas.

Une version simplifiée de la première démo d'ancrage se présente comme suit 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 associés à des segments pour commencer à la position centrale, puis étendre vers la gauche, vers la droite ou tous les afficher afin d'occuper l'ensemble des colonnes ou des lignes disponibles. Vous pouvez également utiliser des propriétés logiques. Pour visualiser et utiliser plus facilement ce mécanisme de mise en page, utilisez cet outil dans Chrome 125 ou version ultérieure:

Ces éléments étant ancrés, l'élément positionné se déplace de façon dynamique autour de la page lorsque son ancrage se déplace. Dans le cas présent, nous avons donc des éléments de carte de type conteneur-query, qui sont redimensionnés en fonction de leur taille intrinsèque (ce que vous ne pourriez pas faire avec les requêtes média), et le menu ancré se déplace avec la nouvelle mise en page à mesure que l'interface utilisateur de la carte change.

Positions d'ancrage dynamiques avec position-try-options

Les menus et la navigation dans les sous-menus sont tellement plus faciles à créer en combinant le positionnement de la fenêtre pop-up et de l'ancre. De plus, lorsque vous atteignez le bord d'une fenêtre d'affichage avec votre élément ancré, vous pouvez laisser le navigateur gérer le changement de positionnement à votre place. Pour ce faire, vous disposez de différentes méthodes. La première consiste à créer vos propres règles de positionnement. Dans ce cas, le sous-menu est initialement positionné à droite du bouton "Vitrine". Toutefois, vous pouvez créer un bloc @position-try s'il n'y a pas assez d'espace à droite du menu, en lui attribuant l'identifiant personnalisé --bottom. Ensuite, connectez ce bloc @position-try à l'ancre à l'aide de position-try-options.

Le navigateur va maintenant passer d'un état d'ancrage à un autre, en essayant d'abord la bonne position, puis en basculant vers le bas. Pour ce faire, une transition efficace est nécessaire.

#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 obtenir des interactions de base telles que l'inversion de votre ancre dans le bloc ou des instructions intégrées.

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

Pour une expérience d'inversement simple, profitez de ces valeurs de mots clés inversées et ignorez complètement l'écriture d'une définition position-try. Vous pouvez donc désormais disposer d'un élément d'ancrage réactif basé sur la localisation entièrement fonctionnel avec seulement quelques lignes de CSS.

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

En savoir plus sur l'utilisation du positionnement des ancres

L'avenir de l'interface utilisateur multicouche

Nous observons des expériences de partage de connexion partout, et l'ensemble des fonctionnalités présentées dans cet article est un excellent début pour laisser libre cours à la créativité et mieux contrôler les éléments positionnés d'ancrage et les interfaces en couches. Ce n'est que le début. Par exemple, popover ne fonctionne actuellement qu'avec des boutons en tant qu'élément d'appel, ou avec JavaScript. Pour des aperçus de style Wikipédia, un schéma observé partout sur la plate-forme Web, il doit être possible d'interagir avec, et de déclencher un pop-up à partir d'un lien et de l'utilisateur qui montre de l'intérêt sans nécessairement cliquer, comme un survol ou un onglet focus.

Pour 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é intégrés appropriés. Il s'agit d'un problème d'accessibilité difficile à résoudre, avec de nombreuses questions ouvertes concernant les comportements idéaux, mais la résolution et la normalisation de cette fonctionnalité au niveau de la plate-forme devrait 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>

En outre, il existe un autre appelant général (invoketarget) destiné à l'avenir disponible à tester 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 des pop-overs normalisés pour tous les éléments interactifs, y compris <dialog>, <details>, <video>, <input type="file">, etc.

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

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

Nous savons que certains cas d'utilisation ne sont pas encore couverts par cette API. Par exemple, vous pouvez styliser la flèche qui relie un élément ancré à son ancrage, en particulier lorsque la position de l'élément ancré change, et autoriser un élément à "glisser" et à rester dans la fenêtre d'affichage au lieu de l'ancrer à une autre position définie lorsqu'il atteint son cadre de délimitation. Par conséquent, même si nous sommes ravis de lancer cette API performante, nous prévoyons de la développer encore davantage à l'avenir.

Sélection stylable

En utilisant conjointement popover et anchor, l'équipe a commencé à activer un menu déroulant personnalisable. La bonne nouvelle, c'est qu'il y a eu de nombreux progrès. Malheureusement, cette API est encore au stade expérimental. Cependant, je suis ravi de partager avec vous quelques démonstrations en direct et des informations sur nos progrès, et j'espère recevoir vos commentaires. Tout d'abord, des progrès ont été réalisés sur la façon d'activer la nouvelle expérience SELECT personnalisable pour les utilisateurs. Pour ce faire, la méthode actuelle (en cours de développement) consiste à utiliser une propriété d'apparence dans CSS, définie sur appearance: base-select. Une fois l'apparence définie, vous pourrez activer une nouvelle expérience SELECT personnalisable.

select {
  appearance: base-select;
}

En plus de appearance: base-select, nous avons apporté quelques mises à jour HTML. Par exemple, vous pouvez encapsuler vos options dans un datalist à des fins de personnalisation et ajouter du contenu non interactif arbitraire dans vos options, comme des images. 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.

<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 illustre la personnalisation de <selectedoption> dans l'interface utilisateur de Gmail, où une icône visuelle représente le type de réponse sélectionné pour économiser de l'espace. Vous pouvez utiliser des styles d'affichage de base dans selectedoption pour différencier le style de l'option de celui de l'aperçu. Dans ce cas, le texte affiché dans l'option peut être masqué visuellement dans selectedoption.

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 ce pays sélectionné, vous pouvez voir une interface utilisateur personnalisée avec des images de drapeau dans les options pour faciliter l'analyse du contenu par les utilisateurs. Étant donné que les navigateurs non compatibles ignorent les lignes qu'ils ne comprennent pas, comme le bouton personnalisé, la liste de données, l'option sélectionnée et les images figurant dans les options, la création de remplacement est semblable à l'interface utilisateur de sélection par défaut actuelle.

Grâce aux sélections personnalisables, les possibilités sont infinies. J'aime particulièrement ce sélecteur de pays de style Airbnb, car il y a un style astucieux pour le responsive design. Vous pouvez faire cela et bien d'autres encore avec la nouvelle sélection stylisée qui en fait un ajout indispensable à la plate-forme Web.

Accordéon exclusif

La résolution de certains styles (et de tous les éléments associés) n'est pas le seul élément de l'interface utilisateur sur lequel l'équipe Chrome s'est concentrée. La première mise à jour supplémentaire du composant permet de créer des accordéons exclusifs, dans lesquels un seul des éléments de l'accordéon peut être ouvert à la fois.

Pour ce faire, vous pouvez appliquer la même valeur de nom à plusieurs éléments de détails, ce qui crée un groupe de détails connecté, semblable à un groupe de cases d'option.

<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 sont une autre amélioration des composants de l'interface utilisateur. Stables dans tous les navigateurs récemment, 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 mettent en correspondance une commande de formulaire qu'une fois 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 une valeur de formulaire a fait l'objet d'une interaction ou est devenue "sale", ce qui peut être très utile pour fournir des commentaires aux utilisateurs et réduit la quantité de scripts nécessaires pour le faire par 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 par l'utilisateur*

field-sizing: content

Une autre mise à jour pratique du composant, qui a récemment fait son apparition, est field-sizing: content. Elle peut être appliquée aux commandes de formulaire comme les entrées et les zones de texte. Cela permet d'augmenter (ou de réduire) la taille de l'entrée en fonction de son contenu. field-sizing: content peut s'avérer particulièrement utile pour les zones de texte, car vous n'êtes plus limité à des tailles fixes. Vous devrez peut-être faire défiler la page vers le haut pour voir ce que vous avez écrit dans les parties précédentes 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> à <select>

La possibilité d'activer <hr>, ou élément de règle horizontale dans les sélections, est une autre fonctionnalité de composant petite, mais utile. Bien que cette méthode n'ait pas beaucoup d'utilisation sémantique, elle vous aide à séparer le contenu dans 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é.

<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 une sélection

Amélioration de la qualité de vie

Nous itérerons constamment, et ce ne sera pas seulement pour les interactions et les composants. Au cours de l'année écoulée, de nombreuses autres améliorations apportées à la qualité de vie ont été apportées.

Nidification avec tête d'affiche

L'imbrication CSS native a été introduite dans tous les navigateurs l'année dernière. Depuis, elle a été améliorée pour prendre en charge l'affichage anticipé, ce qui signifie que le & avant les noms d'éléments n'est plus obligatoire. L'imbrication est ainsi beaucoup plus ergonomique et semblable à ce à quoi je me suis habitué.

L'un de mes avantages préférés dans l'imbrication CSS est qu'elle vous permet de bloquer visuellement des composants, qui incluent 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 précision. 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 */
  }
}

Aligner le contenu pour la mise en page en blocs

Un autre changement très intéressant est la possibilité d'utiliser des mécanismes de centrage comme align-content dans la mise en page en blocs. Cela signifie que vous pouvez désormais effectuer des opérations comme le centrage vertical dans un élément DIV sans avoir à appliquer une mise en page flexible ou en grille, et sans effets secondaires, comme empêcher le repli de la marge, que ces algorithmes de mise en page ne vous permettent peut-être pas de faire.

div {
  align-content: center;
}

Retour à la ligne: équilibre et joli

En ce qui concerne la mise en page, la mise en page du texte a été nettement 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 singletons 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'année dernière, les mises à jour typographiques de la mise en page typographique pour les éléments textuels CJK ont fait l'objet de nombreuses améliorations intéressantes, comme la fonctionnalité word-break: auto-phrase qui insère la ligne au niveau de la limite de l'expression naturelle.

text-spacing-trim, qui applique le crénage entre les caractères de ponctuation pour améliorer la lisibilité de la typographie en chinois, japonais et coréen, et obtenir des résultats visuellement plus agréables.

Syntaxe des couleurs relatives

Dans le domaine de la thématisation des couleurs, nous avons constaté une grande modification de la syntaxe des couleurs relative.

Dans cet exemple, les couleurs ici utilisent une thématisation basée sur Oklch. L'ensemble du thème change à mesure que la valeur de la teinte s'ajuste en fonction du curseur. Pour ce faire, utilisez une syntaxe de couleur relative. L'arrière-plan utilise la couleur principale, en fonction de la teinte, et ajuste la luminosité, la chrominance et les canaux de teinte pour ajuster sa valeur. --i est l'index frère dans la liste pour la gradation des valeurs. Il montre comment vous pouvez combiner le stepping avec des propriétés personnalisées et une 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()

Parallèlement à la fonction light-dark(), la thématisation est devenue beaucoup plus dynamique et simplifiée.

La fonction light-dark() est une amélioration ergonomique qui simplifie les options de thématisation des couleurs afin que vous puissiez écrire des styles de thème de manière plus concise, comme le montre ce schéma visuel d'Adam Argyle. Auparavant, vous auriez 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 du thème. Vous pouvez maintenant écrire ces options de style pour les thèmes clair et sombre dans la même ligne de 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 serais obligé de parler de l'interface utilisateur moderne sans mentionner l'un des points forts de l'interopérabilité de l'année passée, à savoir le sélecteur :has(), qui a été introduit sur tous les navigateurs en décembre de l'année dernière. 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 s'ils se trouvent dans un état spécifique. Il peut également servir de sélecteur parent.

:has() s'est déjà avéré particulièrement utile pour de nombreuses entreprises, y compris PolicyBazaar, qui utilise :has() pour styliser les blocs en fonction de leur contenu intérieur, comme dans la section "Comparer", où le style s'ajuste s'il est prévu qu'une comparaison soit possible dans le bloc, ou s'il est vide.

"Le sélecteur :has() nous a permis d'éliminer la validation JavaScript de la sélection de l'utilisateur et de 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 constituent un autre ajout clé au Web, désormais disponible et de plus en plus utilisée: les requêtes de conteneur, qui permettent d'interroger la taille intrinsèque d'un parent d'élément afin d'appliquer des styles. Il s'agit d'un peigne beaucoup plus fin que les requêtes média, qui interrogent uniquement la taille de la fenêtre d'affichage.

Angular a récemment lancé un nouveau site de documentation très attrayant sur angular.dev. Il utilise des requêtes de conteneur pour appliquer un style aux 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 à plusieurs colonnes dans une barre latérale à une mise en page en une seule colonne, les blocs d'en-tête peuvent s'ajuster automatiquement.

Sans requêtes de conteneur, ce type d'opération était assez difficile à obtenir et nuirait aux performances, car il nécessitait des observateurs de redimensionnement et d'éléments. Désormais, il est facile d'appliquer un style à un élément en fonction de la taille de son parent.

@property

Enfin, nous avons très bientôt le plaisir de voir @property apparaître dans Baseline. Il s'agit d'une fonctionnalité clé qui permet de fournir une signification sémantique aux propriétés CSS personnalisées (également connues sous le nom de variables CSS) et offre de nombreuses nouvelles fonctionnalités d'interaction. @property active également la signification contextuelle, la vérification du type, les valeurs par défaut et les valeurs de remplacement dans CSS. Possibilité d'utiliser des fonctionnalités encore plus robustes, telles que les requêtes de type plage. Il s'agit d'une fonctionnalité jusqu'alors impossible à utiliser, qui apporte désormais beaucoup de détails au langage CSS.

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

Conclusion

Avec toutes ces nouvelles fonctionnalités d'interface utilisateur performantes qui arrivent d'un navigateur à l'autre, les possibilités sont infinies. De 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, d'une manière inédite. Grâce aux composants d'interface utilisateur avancés, il n'a jamais été aussi facile de créer des composants robustes et magnifiquement personnalisés, sans pour autant supprimer l'intégralité de l'expérience native. Enfin, l'amélioration de la qualité de vie au niveau de l'architecture, de la mise en page, de la typographie et du responsive design permet non seulement de résoudre les petits problèmes, mais elle offre également aux développeurs les outils dont ils ont besoin pour créer des interfaces complexes qui fonctionnent sur divers appareils, facteurs de forme et besoins des utilisateurs.

Ces nouvelles fonctionnalités devraient vous permettre de supprimer les scripts tiers pour les fonctionnalités gourmandes en performances, comme le défilement et le partage de connexion, avec le positionnement d'ancrage, de créer des transitions fluides entre les pages, de créer des menus déroulants de style 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. Il n'y a pas eu autant d'énergie et d'enthousiasme depuis le lancement du CSS3. Les fonctionnalités dont nous avions besoin, mais dont nous n'avions qu'à rêver de décrocher, deviennent enfin une réalité et font partie de la plate-forme. Et c'est grâce à votre voix que nous sommes en mesure de prioriser et de donner vie à ces fonctionnalités. Nous mettons tout en œuvre pour vous permettre de simplifier et de simplifier les tâches fastidieuses et fastidieuses de manière native, afin que vous puissiez consacrer plus de temps à la création de ce qui compte le plus, comme les fonctionnalités essentielles et les détails de conception qui distinguent votre marque.

Pour en savoir plus sur ces nouvelles fonctionnalités dès leur lancement, suivez le développement de ces nouvelles fonctionnalités sur developer.chrome.com et web.dev, où notre équipe partage les dernières actualités en matière de technologies Web. Essayez les animations liées au défilement, les transitions de vues, le positionnement des éléments d'ancrage ou même la sélection stylable, et n'hésitez pas à nous donner votre avis. Nous sommes là pour vous écouter et vous aider.