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

Una Kravets

La plate-forme Web regorge d'innovations, avec les fonctionnalités CSS et d'UI Web à la pointe de cette évolution passionnante. Nous vivons une période faste pour l'UI Web. Les nouvelles fonctionnalités CSS sont déployées dans les navigateurs à un rythme sans précédent, ce qui ouvre un monde de possibilités pour créer des expériences Web attrayantes et esthétiques. 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.

Expériences interactives novatrices

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 utilisateur de qualité. Nous avons travaillé sur des améliorations majeures qui offrent des fonctionnalités inédites sur le Web pour la navigation à l'intérieur et entre les pages Web.

Animations basées sur le défilement

Comme son nom l'indique, l'API d'animation basée sur le défilement vous permet de créer des animations dynamiques basées sur le défilement sans avoir à vous fier à 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, vous voyez la progression de l'animation, et lorsque vous faites défiler vers l'arrière, elle fait l'inverse. Vous pouvez ainsi créer des visuels partiels ou de pleine page avec des éléments animés dans et dans la fenêtre d'affichage, également appelé scrollytelling, pour un impact visuel dynamique.

Les animations déclenchées par le défilement peuvent être utilisées pour mettre en avant du contenu important, guider les utilisateurs dans une histoire ou simplement ajouter une touche de dynamisme à 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 le animation-timeline. Dans ce cas, la fonction view() avec ses valeurs par défaut suit l'image par rapport au scrollport (qui est également le viewport dans cet exemple).

Il est important de garder à l'esprit la compatibilité avec les 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 est compatible avec les animations basées sur le défilement, puis encapsulez votre animation basée sur le défilement dans une requête de préférences 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 pose pas de problème pour 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 correspondre à des expériences de scrollytelling sur une page entière, 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émonstration utilise plusieurs animations d'images clés différentes (en-tête, texte, barre de navigation et arrière-plan), puis applique l'animation de défilement correspondante à chacune. Bien que chacun ait un style d'animation différent, ils ont tous la même animation-timeline, le même scrolleur le plus proche et la même plage d'animation, allant 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. Il n'est plus nécessaire d'envoyer divers observateurs de défilement, ce qui offre des avantages de performances assez importants. En effet, les animations basées sur le défilement fonctionnent en dehors du thread principal lorsque vous animez des propriétés pouvant être animées sur le compositeur, comme les transformations et l'opacité, que vous utilisiez la nouvelle API directement en CSS ou les hooks JavaScript.

Tokopedia a récemment utilisé des animations déclenchées par le défilement pour faire apparaître la barre de navigation des produits lorsque l'utilisateur faisait 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 à l'utilisation d'événements de défilement JS classiques. Nous avons également constaté que l'utilisation moyenne du processeur est passée de 50% à 2% lors du défilement. Andy Wihalim, ingénieur logiciel senior, 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. Vous pouvez ainsi 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ée animation déclenchée par le défilement.

D'autres fonctionnalités de défilement seront disponibles dans les navigateurs à l'avenir. La démonstration suivante montre une combinaison de ces futures fonctionnalités. 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 approche pour mettre à jour un sélecteur en temps réel avec l'événement JavaScript scrollsnapchanging.

Ces fonctionnalités ne sont actuellement disponibles que dans Canary derrière un indicateur. Toutefois, elles permettent de débloquer des fonctionnalités auparavant impossibles ou très difficiles à créer sur la plate-forme, et mettent en avant les possibilités d'interactions basées sur le défilement à l'avenir.

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 pour les développeurs. Dans cette vidéo, vous allez apprendre 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 excellente série de vidéos à regarder.

Afficher les transitions

Nous venons d'aborder une nouvelle fonctionnalité très puissante d'animation au sein des pages Web, mais il existe également une nouvelle fonctionnalité très puissante appelée les transitions de vue, qui permet d'animer entre les pages vues pour une expérience utilisateur plus fluide. Les transitions de vue apportent une nouvelle fluidité au Web. Elles vous permettent de créer des transitions fluides entre différentes vues sur 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 une navigation Web fluide et transparente. 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 agréables 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. Cet effet peut être obtenu facilement avec les transitions de vue.

Pour activer rapidement les transitions de vue 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 dispose d'un view-transition-name, intégré ou dynamiquement à 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. Toutefois, cela peut s'avérer complexe avec de nombreux éléments en transition. La première nouvelle mise à jour des transitions de vue de cette année simplifie ce problème et permet de créer des classes de transition de vue qui peuvent être appliquées aux animations personnalisées.

Afficher les types de transition

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

Par exemple, vous pouvez souhaiter que la page d'accueil s'anime vers une page de blog différemment de la façon dont cette page de blog s'anime vers la page d'accueil. Vous pouvez également choisir de faire défiler les pages de différentes manières, comme dans cet exemple, de gauche à droite et inversement. Auparavant, cette opération était complexe. Vous pouviez ajouter des classes au DOM pour appliquer des styles, puis 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 de vue multipages

La puissance du Web réside dans son étendue. De nombreuses applications ne se limitent pas à une seule page, mais sont un ensemble robuste de plusieurs pages. C'est pourquoi nous sommes ravis de vous annoncer que nous proposons la prise en charge des transitions de vue entre les documents pour les applications multipages dans Chromium 126.

Ce nouvel ensemble de fonctionnalités interdocuments inclut les expériences Web qui se trouvent dans la même origine, comme la navigation de web.dev vers web.dev/blog, mais pas la navigation inter-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 impliquées dans la transition de vue à l'aide de la règle CSS @view-transition.

@view-transition {
  navigation: auto;
}

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

Avec pageswap, vous pouvez apporter des modifications de dernière minute à la page sortante juste avant que les anciens instantanés ne soient créés. Avec pagereveal, vous pouvez personnaliser la nouvelle page avant qu'elle ne commence à s'afficher après avoir é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 de portée: vous permettent de limiter une transition à un sous-arbre DOM, ce qui permet au reste de la page de rester interactif et permet d'exécuter plusieurs transitions de vue en même temps.
• Transitions de vue basées sur des gestes: utilisez des gestes de glissement ou de balayage pour déclencher une transition de vue entre les documents afin d'obtenir des expériences plus natives sur le Web.
• Correspondance de navigation en CSS: personnalisez votre transition de vue inter-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 comment les configurer de manière la plus performante avec le pré-rendu, regardez la conférence suivante de Bramus Van Damme:

Composants d'interface utilisateur compatibles avec le moteur: simplifier les 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 de composants d'interface utilisateur, ce qui vous permet de vous concentrer sur la création d'expériences de qualité. Pour ce faire, nous collaborons avec plusieurs organismes de normalisation et groupes de la communauté, dont le groupe de travail CSS, le groupe de la communauté Open UI et le WHATWG (Web Hypertext Application Technology Working Group).

L'une des principales difficultés rencontrées par les développeurs concerne une requête 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 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.

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/quitter l'interaction)
• Cliquer pour ignorer
• Gestion active des popovers (fermeture des autres popovers lorsqu'un s'ouvre)
• Gestion du ciblage des onglets
• Visualisation de la valeur de l'option sélectionnée
• Style d'interaction avec la flèche
• Gestion de l'état (ouverture/fermeture)

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

API Popover

Nous avons d'abord lancé un attribut global appelé popover, qui est passé à l'état "Nouveau disponible" il y a quelques semaines.

Les éléments de pop-up sont masqués avec display: none jusqu'à ce qu'ils soient ouverts avec un déclencheur 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. 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 script supplémentaire, y compris:

• Promotion vers 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 de la fenêtre: Cliquez en dehors de la zone du pop-up pour le fermer et rétablir la sélection.
• Gestion par défaut de la sélection des onglets: Lorsque vous ouvrez le pop-up, l'onglet suivant s'arrête dans le pop-up.
• Liaisons de clavier intégrées: Appuyer sur la touche esc ou activer/désactiver deux fois le bouton permet de fermer le pop-over et de rétablir la sélection.
• Liaisons de composants par défaut. : Le navigateur associe sémantiquement un popover à son déclencheur.

Vous utilisez peut-être déjà cette API de pop-up sans le savoir. GitHub a implémenté le pop-up dans le menu "Nouveau" de sa page d'accueil et dans l'aperçu de l'examen des demandes d'extraction. Ils ont progressivement amélioré cette fonctionnalité à l'aide du polyfill de pop-up, créé par Oddbird avec l'aide précieuse de Keith Cirkel, de GitHub, pour prendre en charge les anciens navigateurs.

"Nous avons réussi à abandonner littéralement des milliers de lignes de code en migrant vers les popovers. Les pop-ups nous aident à ne pas avoir à nous battre avec des numéros d'indice Z magiques. Établir la bonne relation d'arborescence d'accessibilité avec un comportement de bouton déclaratif et des comportements de focus intégrés permet à notre système de conception d'implémenter des modèles de manière beaucoup plus simple." – Keith Cirkel, ingénieur logiciel, GitHub

Animer les effets d'entrée et de sortie

Lorsque vous utilisez des popovers, vous voudrez probablement ajouter une interaction. Au cours de la dernière année, quatre nouvelles fonctionnalités d'interaction ont été lancées pour permettre d'animer les popovers. Exemples :

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

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 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'un popover ou d'une boîte de dialogue. En résumé, une boîte de dialogue avec un arrière-plan se présente comme suit :

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 à partir de quels styles animer cet élément dans le DOM. Cela s'applique à la fois à la boîte de dialogue et au fond. Ensuite, stylisez l'état ouvert à la fois 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 des ancrages

Les pop-ups n'étaient que le début de l'histoire. Une nouveauté très intéressante est que le positionnement des ancres est désormais disponible à partir de Chrome 125.

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

Configurez une relation de positionnement d'ancre en CSS à l'aide de la propriété anchor-name sur l'élément d'ancrage (dans ce cas, le bouton) et de 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 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 par ancrage avec un popover, ce dernier n'est pas obligatoire. Le positionnement d'ancrage peut être utilisé avec deux éléments (ou plus) pour créer une relation visuelle. En fait, la démonstration suivante, inspirée d'un article de Roman Komarov, montre un style de soulignement ancré aux éléments de liste lorsque vous pointez dessus ou appuyez sur la touche Tabulation.

Cet exemple utilise la fonction d'ancrage pour configurer la position de l'ancrage à 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 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 permet de placer facilement des éléments positionnés par rapport à leurs ancrages respectifs. Elle fonctionne sur une grille à 9 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 en bas.

Une version simplifiée de la première démonstration 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 de plage pour commencer au centre et s'étendre vers la gauche, vers la droite ou sur 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 :

Ces éléments étant ancrés, l'élément positionné se déplace de manière dynamique autour de la page lorsque son ancrage se déplace. Dans ce cas, nous avons des éléments de carte de style requête de conteneur, qui se redimensionnent en fonction de leur taille intrinsèque (ce que vous ne pouviez pas faire avec les requêtes multimédias). Le menu ancré se déplace avec la nouvelle mise en page à mesure que l'UI de la fiche change.

Positionnement dynamique des ancres 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. 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 positionnement. Pour ce faire, plusieurs options s'offrent à vous. 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 lorsque l'espace à droite du menu est insuffisant, en lui attribuant un identifiant personnalisé de --bottom. Vous connectez ensuite ce bloc @position-try à l'ancrage à l'aide de position-try-options.

Le navigateur basculera désormais entre ces états d'ancrage, en essayant d'abord la position de droite, puis en se déplaçant 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 des interactions de base, comme inverser votre ancre dans les directions de bloc ou en ligne.

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

Pour une expérience de basculement simple, profitez de ces valeurs de mot clé de basculement et évitez d'écrire 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'UI multicouche

Les expériences avec connexion filaire sont partout. L'ensemble des fonctionnalités présentées dans cet article est un excellent point de départ pour libérer votre créativité et mieux contrôler les éléments positionnés par 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 sur toutes les plates-formes Web, il doit être possible d'interagir avec eux et de déclencher un pop-up à partir d'un lien et de l'intérêt de l'utilisateur sans qu'il ait nécessairement à cliquer, comme un survol ou un focus d'onglet.

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 sur les comportements idéaux. Toutefois, résoudre et normaliser 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>

De plus, un autre invocateur général d'avenir (invoketarget) est disponible à des fins de test 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 popovers, 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 qu'il existe des cas d'utilisation qui ne sont pas encore couverts par cette API. 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 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. Nous sommes donc ravis de lancer cette API puissante, mais nous avons également hâte de développer ses fonctionnalités à l'avenir.

Sélecteur stylable

En utilisant popover et anchor ensemble, l'équipe a progressé vers l'activation d'un menu déroulant de sélection personnalisable. La bonne nouvelle 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. Je suis toutefois ravi de vous présenter des démonstrations en direct et de vous tenir informé de nos progrès, et j'espère recevoir vos commentaires. Tout d'abord, nous avons amélioré la procédure d'activation de la nouvelle expérience sélective personnalisable. 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 pourrez activer une nouvelle expérience SELECT personnalisable.

select {
  appearance: base-select;
}

En plus de appearance: base-select, quelques nouvelles mises à jour HTML sont disponibles. Vous pouvez par exemple encapsuler vos options dans un datalist pour les personnaliser et ajouter des contenus non interactifs arbitraires, 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 en fonction de vos besoins. Cet élément est très pratique.

Visuel de démonstration

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'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.

Visuel de démonstration

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 interface utilisateur 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 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.

Avec les sélections personnalisables, les possibilités sont infinies. J'aime particulièrement ce sélecteur de pays de style Airbnb, car il présente un style intelligent pour le responsive design. Vous pouvez faire tout cela et bien plus avec le sélecteur stylable à venir, ce 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 qui les accompagnent) n'est pas le seul composant d'interface utilisateur sur lequel l'équipe Chrome s'est concentrée. La première mise à jour du composant supplémentaire consiste à pouvoir 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. Récemment stables dans tous les navigateurs, les pseudo-classes :user-valid et :user-invalid se comportent de manière similaire aux pseudo-classes :valid et :invalid, mais ne correspondent à un contrôle de formulaire que lorsqu'un utilisateur a interagi de manière significative avec la saisie. Cela signifie qu'il faut beaucoup moins de code pour déterminer si une valeur de formulaire a été utilisée ou est devenue "sale", ce qui peut être très utile pour fournir des commentaires aux utilisateurs et réduire la quantité de scripts nécessaires pour ce faire auparavant.

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

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 à 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, et vous n'avez plus besoin de 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 ligne horizontale, dans les sélections est une autre petite fonctionnalité de composant utile. Bien que cette fonctionnalité n'ait pas beaucoup d'utilité sémantique, elle vous aide à séparer correctement 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électionner "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>

Découvrez comment utiliser hr dans select.

Améliorations de la qualité de vie

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

Nidification avec lookahead

L'imbrication CSS native a été introduite dans tous les navigateurs l'année dernière. Elle a depuis é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'imbrication CSS est un excellent moyen de bloquer visuellement des composants et d'inclure des états et des modificateurs dans ces composants, tels que des requêtes de conteneur et des requêtes multimédias. Auparavant, j'avais l'habitude de regrouper toutes ces requêtes au bas du fichier à des fins de spécificité. Vous pouvez maintenant 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 tels que align-content dans la mise en page en blocs. Cela signifie que vous pouvez désormais effectuer des opérations telles que 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 vous ne souhaitez peut-être pas utiliser avec ces algorithmes de mise en page.

Capture d'écran

Démo

div {
  align-content: center;
}

Retour à la ligne: équilibre et élégance

En parlant de mise en page, la mise en page du texte a été améliorée avec 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 vise à réduire les éléments uniques sur la dernière ligne du texte.

h1 {
  text-wrap: balance;
}

En savoir plus sur text-wrap: balance

Mises à jour de la typographie internationale

Les mises à jour de la mise en page typographique pour les fonctionnalités de texte CJK ont été nombreuses au cours de l'année écoulée, comme la fonctionnalité word-break: auto-phrase qui permet de couper la ligne à la limite naturelle de la phrase.

text-spacing-trim, qui applique le crénage entre les signes 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 monde de la thématisation des couleurs, nous avons vu une grande mise à jour avec la syntaxe des couleurs relatives.

Dans cet exemple, les couleurs utilisent une thématisation basée sur Oklch. Lorsque la valeur de teinte est ajustée en fonction du curseur, l'ensemble du thème change. Pour ce faire, utilisez la 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()

Avec 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 aviez besoin de deux blocs de code différents (votre thème par défaut et une requête de préférences utilisateur) pour configurer les options de thème. Vous pouvez désormais écrire ces options de style pour les thèmes clair et sombre dans 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()

Je ne pourrais pas parler de l'UI moderne sans mentionner l'un des points forts de l'interopérabilité de l'année écoulée, à savoir le sélecteur :has(), qui est disponible dans tous les navigateurs depuis 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 possède des enfants spécifiques ou si ces enfants 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.

"Avec le 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, qui permettent d'interroger la taille intrinsèque du parent d'un élément pour appliquer des styles, sont un autre ajout important au Web, désormais disponible et de plus en plus utilisé. Il s'agit d'un outil beaucoup plus précis que les requêtes multimédias, qui n'interrogent que 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 la barre latérale à une mise en page à 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. Il est désormais facile de styliser un élément en fonction de sa taille parente.

@property

Enfin, nous avons hâte de voir @property arriver dans Baseline très bientôt. Il s'agit d'une fonctionnalité clé pour fournir une signification sémantique aux propriétés personnalisées CSS (également appelées variables CSS) et pour activer 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. Cela ouvre la voie à des fonctionnalités encore plus robustes, comme les requêtes de type plage. Il s'agit d'une fonctionnalité qui n'était jamais possible auparavant et qui offre désormais une profondeur incroyable 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. Les expériences interactives novatrices avec des animations et des transitions de vue basées sur le défilement rendent le Web plus fluide et interactif que jamais. Les composants d'interface utilisateur de pointe permettent de créer des composants robustes et magnifiquement personnalisés plus facilement que jamais, 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 responsive ne résolvent pas seulement les petits problèmes, mais fournissent également aux développeurs les outils dont ils ont besoin pour créer des interfaces complexes qui fonctionnent sur différents appareils, facteurs de forme et besoins des utilisateurs.

Grâce à ces nouvelles fonctionnalités, vous devriez pouvoir supprimer les scripts tiers pour les fonctionnalités gourmandes en performances, comme le scrollytelling et l'association d'éléments entre eux avec le positionnement d'ancre, créer des transitions de page fluides, styliser les menus déroulants et améliorer la structure globale de votre code de manière native.

C'est le moment idéal pour devenir développeur Web. Depuis l'annonce de CSS3, nous n'avons jamais vu autant d'énergie et d'enthousiasme. 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. C'est grâce à vous que nous pouvons hiérarchiser ces fonctionnalités et les mettre en œuvre. 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 basées sur le défilement, les transitions de vue, le positionnement des ancres ou même la sélection stylable, et dites-nous ce que vous en pensez. Nous sommes là pour vous écouter et vous aider.