Nouveautés de l'UI Web

Bramus
Una Kravets

Publication : 1er juillet 2026

Lors de la conférence Google I/O 2026, nous avons présenté une série de nouveautés qui seront bientôt disponibles sur la plate-forme Web UI. Qu'il s'agisse de respecter les préférences des utilisateurs, d'implémenter des interactions naturelles, de guider la navigation, de réduire l'encombrement ou de s'adapter à différents facteurs de forme, le Web moderne offre aux développeurs des outils incroyablement puissants pour créer des expériences utilisateur tactiles de haute qualité.

Voici un récapitulatif complet de toutes les fonctionnalités mentionnées dans la session "Nouveautés de l'UI Web", structuré selon notre ensemble de principes UX fondamentaux.

Partie 1 : Respecter les préférences des utilisateurs

La personnalisation est essentielle pour l'ergonomie Web. Les API Web modernes permettent de s'adapter plus facilement et automatiquement aux choix des utilisateurs au niveau du système. Même si ces concepts semblent élémentaires et que nous en parlons depuis des années, il existe en fait quelques nouvelles API et de nouveaux modèles qui facilitent la création de cette personnalisation dynamique.

1. contrast-color()

La fonction CSS contrast-color() prend une couleur d'entrée et renvoie automatiquement black ou white, selon celle qui présente le contraste le plus élevé par rapport à la couleur d'entrée, en fonction de l'algorithme de contraste minimal WCAG AA. Cela permet de garantir la lisibilité sans avoir à gérer manuellement les paires de couleurs texte/arrière-plan.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

En savoir plus sur contrast-color()

2. light-dark()

La fonction CSS light-dark() vous permet de spécifier deux valeurs différentes (couleurs ou images) pour une propriété, l'une pour le mode clair et l'autre pour le mode sombre, dans une même déclaration. Le navigateur sélectionne automatiquement la couleur de contraste appropriée en fonction de la color-scheme active (qui doit être définie sur light, dark ou light dark sur :root ou un parent).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

La nouveauté de light-dark() est qu'il ne se limite plus aux valeurs de couleur. À partir de Chrome 150, il accepte également deux valeurs d'image.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Fonctions CSS personnalisées (@function)

La règle at @function vous permet de définir des fonctions personnalisées et réutilisables directement dans le code CSS natif. Il peut accepter des propriétés personnalisées à portée locale comme arguments, effectuer des calculs et renvoyer des valeurs à l'aide du descripteur result, ce qui réduit le besoin de préprocesseurs.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Combinées aux requêtes de style de conteneur et à la fonction CSS if(), vous pouvez créer une fonction --light-dark() personnalisée qui fonctionne avec n'importe quel type de valeur, comme le montre cette démo :

4. Requêtes de style de conteneur

Les requêtes de style, qui font partie des requêtes de conteneur CSS, permettent aux développeurs d'appliquer des styles aux éléments descendants en fonction des valeurs de propriétés personnalisées calculées d'un conteneur parent. Cela permet de créer des composants dynamiques sans nécessiter de confinement de taille explicite.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

Dans cette démo, les requêtes de style sont utilisées pour définir les couleurs en fonction d'une propriété personnalisée --theme.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

En savoir plus sur les requêtes de style

5. Fonction CSS if()

La fonction CSS if() permet d'intégrer une logique conditionnelle directement aux valeurs des propriétés CSS. Elle évalue une série de conditions séparées par des points-virgules (requêtes de style, requêtes média ou requêtes de fonctionnalité) et vous permet de définir différentes valeurs associées à la première condition remplie, avec une option de secours else.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

Dans la démo précédente, la fonction if() est utilisée pour créer une base de couleur contrastée thématique en fonction du résultat de la fonction contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

La fonction CSS at-rule() à utiliser avec @supports permet aux développeurs de détecter si un navigateur reconnaît une règle @ spécifique, telle que @starting-style ou @view-transition.

Par exemple, pour vérifier la compatibilité avec @function, utilisez-le comme suit :

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

L'utilisation de at-rule() permet uniquement de vérifier la prise en charge de base de la règle @ elle-même. Elle ne peut pas être utilisée pour tester des descripteurs, des préludes ou des blocs de règles @ complets spécifiques. Il existe des solutions pour détecter des fonctionnalités telles que les requêtes ancrées ou les requêtes de style.

En savoir plus sur @supports at-rule

7. <meta name="text-scale">

La balise meta HTML text-scale permet à la page de mettre à l'échelle la taille de police initiale de l'élément racine <html> en fonction des paramètres de mise à l'échelle du texte au niveau de l'OS et du navigateur, ce qui est particulièrement important pour les plates-formes mobiles.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Une fois appliqué, la taille de la police de l'élément html est désormais déterminée par le système d'exploitation. Vous n'avez donc pas besoin de définir de font-size de base. Si vous utilisez ensuite des longueurs avec des unités relatives telles que em et rem, les valeurs en pixels calculées sont basées sur cette taille de police de base.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Dans l'onglet "Rendu" des outils de développement, vous pouvez émuler la taille de police préférée. Utilisez le menu déroulant pour modifier la valeur.

En savoir plus sur <meta name=text-scale>

Partie 2 : Implémenter des interactions naturelles

Les mouvements physiques intuitifs et les gestes naturels sont essentiels pour que les expériences Web soient aussi tactiles que les applications natives. Les CSS modernes vous aident à y parvenir plus facilement.

8. Fonction d'interpolation linear()

La fonction de lissage de vitesse linear() vous permet de créer des courbes de transition complexes et personnalisées (comme des rebonds, des ressorts ou des dépassements élastiques) en interpolant de manière linéaire entre un nombre illimité de points de progression spécifiés.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

Dans la version de démonstration suivante, linear() est utilisé pour donner à la boîte de dialogue un lissage de vitesse naturel lorsqu'elle est affichée ou masquée.

En savoir plus sur linear()

9. @starting-style

La règle CSS at-rule @starting-style définit les valeurs de départ des propriétés d'un élément à partir desquelles vous souhaitez effectuer une transition lorsque l'élément est rendu pour la première fois dans le DOM ou lorsque sa propriété display passe de none à une valeur visible, afin d'activer des transitions d'entrée fluides.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Dans la démo précédente, il est utilisé pour animer l'apparition de <dialog>.

10. transition-behavior: allow-discrete

La propriété transition-behavior (souvent utilisée comme allow-discrete dans le raccourci transition) vous permet de faire la transition entre des propriétés discrètes comme display ou overlay, en veillant à ce que les éléments restent visibles pendant les animations de sortie avant d'être masqués.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() et sibling-count()

Les fonctions CSS sibling-index() et sibling-count() renvoient des nombres entiers représentant respectivement la position d'un élément (à partir de 1) parmi ses frères et sœurs, et le nombre total de frères et sœurs. Elles sont idéales pour calculer dynamiquement les délais d'animation échelonnés en CSS sans JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Dans cette démo, le contenu de la boîte de dialogue est échelonné à l'aide de sibling-index() dans animation-delay.

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Fermeture légère de la boîte de dialogue (attribut closedby)

L'attribut closedby sur l'élément <dialog> (avec la valeur any) vous permet d'utiliser un comportement de fermeture simplifiée déclaratif, qui ferme automatiquement les boîtes de dialogue modales lorsque l'utilisateur clique en dehors ou appuie sur ESC, sans nécessiter de code JavaScript personnalisé.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Vous pouvez l'essayer dans la démo précédente.

13. corner-shape

La propriété abrégée expérimentale corner-shape permet aux développeurs de modifier les angles arrondis (à partir de border-radius) pour créer des formes visuelles personnalisées telles que bevel, scoop, notch ou squircle (via superellipse()). Les bordures, les ombres et les contours de sélection s'adaptent automatiquement à la forme.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Partie 3 : Fournir une navigation guidée

Guider le parcours utilisateur permet de maintenir le contexte et de comprendre le flux de l'application, ce qui élimine les rechargements déroutants. Vous pouvez le faire de plusieurs façons, y compris avec les transitions de vue, qui ont récemment fait l'objet de quelques mises à jour.

14. Transitions de vue dans le même document

Les transitions dans le même document, qui font partie de l'API View Transitions, fournissent un mécanisme permettant d'animer les états DOM dans les applications monopages (SPA) en capturant des instantanés et en les faisant passer d'un état à l'autre à l'aide de CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

En savoir plus sur les transitions de vue dans le même document

15. Transitions de vue entre les documents

Étend l'API View Transition aux applications multipages (MPA), ce qui vous permet de créer des transitions animées fluides lorsque vous naviguez entre différents documents en faisant correspondre les éléments ayant le même view-transition-name sur les pages.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

En savoir plus sur les transitions de vue entre documents

16. Transitions de vue à portée d'élément

Introduites dans Chrome 147, les transitions de vue à portée d'élément vous permettent d'exécuter une transition de vue uniquement sur un sous-arbre DOM spécifique (à l'aide de element.startViewTransition()) tout en gardant le reste de la page actif et interactif.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Lors du démarrage d'une transition de vue à portée d'élément, elle s'exécute de manière isolée : elle ne recherche que les éléments avec un view-transition-name dans ce sous-arbre, et le pseudo-élément ::view-transition est injecté dans la racine de portée elle-même. L'isolation est possible grâce à l'application automatique de view-transition-scope: all.

Cela permet d'exécuter plusieurs transitions de vue en même temps, ainsi que d'imbriquer des transitions de vue : pendant que les éléments de ces listes sont mélangés, vous pouvez également échanger les listes elles-mêmes.

De plus, les pseudos de groupe sont automatiquement imbriqués et le contenu en trop du pseudo group-children englobant est coupé si nécessaire.

Les transitions de vue à portée limitée sont idéales pour les micro-interactions et la transformation avec état sur une page. Elles offrent à l'utilisateur plus de contexte lorsqu'un changement visuel se produit. C'est un excellent moyen d'améliorer la facilité d'utilisation de votre application tout en améliorant son apparence et sa convivialité. Ces petits détails font toute la différence !

En savoir plus sur les transitions de vue à portée d'élément

17. Transitions de vue en deux phases

Il s'agit d'une fonctionnalité expérimentale qui lance immédiatement une transition de vue entre documents sans attendre que le nouveau DOM soit prêt. Elle effectue d'abord une transition vers un écran squelette ou une UI de chargement intermédiaire, avant de poursuivre la transition de vue entre documents.

En savoir plus sur les transitions de vue en deux phases

18. Animations liées au défilement

Les animations liées au défilement associent la progression d'une animation CSS directement à la position de défilement d'un conteneur de défilement. Les développeurs peuvent ainsi créer des interfaces basées sur le défilement, comme des effets de parallaxe efficaces et des indicateurs de défilement.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Animations déclenchées par le défilement

Les animations déclenchées par le défilement sont une nouveauté de Chrome. Les animations déclenchées par le défilement déclenchent une animation CSS standard basée sur le temps lorsqu'une limite de défilement est franchie (à l'aide de timeline-trigger pour définir le déclencheur et de animation-trigger pour la lire), ce qui constitue une alternative déclarative à IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Le mécanisme sous-jacent des animations déclenchées par le défilement est constitué de déclencheurs de timeline, qui sont actifs ou inactifs.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Activez le visualiseur dans la démo suivante pour voir ce qui se passe : la première plage est la plage d'activation et détermine quand le déclencheur devient actif. La deuxième plage est la plage active, qui détermine la durée pendant laquelle l'alerte doit rester active.

En savoir plus sur les animations déclenchées par le défilement

20. scroll-target-group: auto

Vous pouvez désormais créer un espion de défilement CSS natif qui met automatiquement en surbrillance les liens de navigation en fonction de la position de défilement de l'utilisateur. En définissant scroll-target-group: auto sur une liste de navigation, le navigateur définit automatiquement aria-current="true" et applique la pseudo-classe :target-current au lien actif. :target-current peut ensuite être utilisé pour styliser davantage les liens actifs.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

En savoir plus sur le scrollspy CSS avec scroll-target-group

21. Option de conteneur scrollIntoView()

La méthode scrollIntoView() gagne une option container. Définir target.scrollIntoView({container: 'nearest'}) limite le défilement au scroller ancêtre le plus proche au lieu de le laisser remonter jusqu'en haut, ce qui évite un défilement déroutant au niveau de la page.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Cochez la case de cette démo pour activer ou désactiver l'option :

En savoir plus sur container: "nearest"

22. Défilement programmable avec attente

Toutes les méthodes de défilement programmatique (comme scroll(), scrollTo() et scrollIntoView()) renvoient désormais une promesse. Cela permet aux développeurs de await la fin des animations de défilement fluide avant d'exécuter la logique suivante (comme l'ajout d'un effet de mise en surbrillance).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Dans la démo suivante, vous pouvez voir l'effet en action : l'élément est d'abord mis en vue par défilement, puis un effet de mise en surbrillance lui est appliqué.

Partie 4 : Maximiser le contenu, réduire le bruit

L'une des expériences Web les plus frustrantes est de s'attendre à voir du contenu et d'être bloqué par des pop-ups ou des bannières intrusives. Priorisez la zone de contenu en éliminant l'encombrement visuel et les bordures d'application, et en déplaçant les actions secondaires derrière l'UI en couches.

23. Requêtes sur l'état de défilement (scrolled)

Les requêtes scroll-state, qui font partie des requêtes de conteneur CSS, vous permettent de styliser les descendants en fonction de l'état de défilement d'un conteneur (avec container-type: scroll-state). La requête scrolled (par exemple, scroll-state(scrolled: bottom)) détecte la direction du défilement relatif le plus récent, ce qui permet de créer des motifs tels que la barre "Hidey".

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

En savoir plus sur le modèle "Hidey Bar"

24. Requêtes de conteneur ancrées

Le positionnement des ancres CSS inclut les requêtes de conteneur ancrées, qui vous permettent de vérifier quelle position de remplacement (par exemple, fallback: bottom ou ) est actuellement active sur un élément positionné par une ancre. Vous pouvez ainsi mettre à jour dynamiquement le style d'un élément positionné par une ancre (comme les flèches d'info-bulles).fallback: flip-block

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

Dans la démo suivante, un pop-up ancré se repositionne en fonction de sa position de remplacement et de sa position dans la fenêtre d'affichage à l'aide de requêtes de conteneur ancrées. Lorsque l'info-bulle s'ouvre au-dessus de l'élément d'appel, elle s'anime de bas en haut, à partir de la source. Lorsqu'il se trouve sous l'invocateur, il s'anime de haut en bas.

25. CSS border-shape

La propriété border-shape vous permet de définir des bordures non rectangulaires en utilisant la même syntaxe de forme que clip-path. Contrairement au découpage, border-shape permet de conserver les bordures, les contours et les ombres visuellement alignés sur la forme personnalisée. Il va également au-delà des capacités de corner-shape, car border-shape est beaucoup plus flexible.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. Fonction CSS shape()

La fonction CSS shape() vous permet de définir des chemins géométriques complexes en ligne dans CSS. Il peut être utilisé avec des propriétés telles que clip-path, border-shape ou shape-outside pour créer des formes organiques non rectangulaires sur lesquelles le contenu peut flotter.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Positionnement fixe par axe

Grâce à une modification récente de la spécification de dépassement qui permet aux conteneurs d'être des éléments de défilement pour un seul axe, le positionnement fixe peut désormais suivre deux conteneurs de défilement différents (un pour chaque axe) simultanément. Cela permet à la première colonne et à la première ligne d'un tableau de fonctionner comme prévu, même à l'intérieur de conteneurs de défilement à axe unique.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Cette fonctionnalité est disponible pour les tests dans Chrome 148 lorsque le flag "Experimental Web Platform Features" (Fonctionnalités expérimentales de la plate-forme Web) est activé.

En savoir plus sur position: sticky par axe

Partie 5 : S'adapter au facteur de forme

L'un des atouts les plus précieux du Web est sa flexibilité. Les utilisateurs peuvent naviguer sur le Web à partir de différents appareils, chacun avec ses propres mécanismes d'interaction. Les mises en page doivent s'adapter fondamentalement à l'appareil et à la méthode de saisie, qu'un clavier virtuel soit ouvert ou que des cibles tactiles soient actives. Lorsque vous concevez un site ou une application Web, gardez à l'esprit le facteur de forme. Cela vous permettra de peaufiner votre produit et de répondre aux attentes des utilisateurs.

28. Gestes de défilement hors limites (zones balayables)

Par exemple, l'adaptation au facteur de forme permet d'utiliser des interactions basées sur les balayages et les gestes sur le Web mobile. Vous pouvez utiliser des scrollers pour obtenir certains de ces effets, mais ce n'est pas toujours une approche intuitive.

L'équipe Chrome travaille sur une solution déclarative proposée, en collaboration avec le groupe de la communauté OpenUI, qui vous permet de créer des zones de balayage natives et pilotées par des gestes (par exemple, des listes Gmail ou des menus latéraux à fermer par balayage) à l'aide de overscrollcontainer et d'invocateurs de commandes, qui fonctionnent naturellement avec le toucher et le défilement.

En savoir plus sur les gestes de défilement hors limites

29. HTML dans le canevas

L'API HTML-in-Canvas représente un changement de paradigme majeur, car elle permet aux développeurs de placer de véritables éléments DOM à l'intérieur d'un <canvas> (à l'aide de l'attribut layoutsubtree). Ces éléments restent entièrement consultables et accessibles, et sont compatibles avec les fonctionnalités du navigateur telles que la saisie semi-automatique, tout en permettant aux nuanceurs WebGL/WebGPU d'interagir avec eux de manière native.

À vos marques !

Découvrez rapidement d'autres fonctionnalités puissantes qui font progresser le Web.

30. Déplacement préservant l'état du DOM (moveBefore())

La méthode DOM moveBefore() vous permet de redéfinir le parent des nœuds DOM (par exemple, les vidéos en cours de lecture, les iFrames ou les entrées sélectionnées) sans détruire leur état ni déclencher de rechargement.

Cela signifie que les vidéos continuent d'être lues, que les iFrames ne sont pas rechargés, que les animations CSS ne redémarrent pas et que les champs de saisie conservent leur focus lorsque vous les réattribuez à un autre parent dans votre mise en page.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

En savoir plus sur moveBefore()

31. CSS text-fit

text-fit est une propriété CSS expérimentale qui met à l'échelle la taille de police de manière dynamique pour que les lignes de texte s'adaptent précisément à la largeur exacte de leur élément conteneur (par exemple, text-fit: grow per-line-all).

En savoir plus sur text-fit

32. CSS text-box (text-box-trim et text-box-edge)

La propriété text-box (et ses formes longues text-box-trim et text-box-edge) réduit l'espace vertical (interligne) au-dessus et en dessous du texte, ce qui garantit un alignement et un centrage verticaux parfaits.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

En savoir plus sur text-trim

33. Décorations d'espaces CSS

Les décorations d'espacement CSS apportent column-rule aux grilles et aux flexbox, et introduisent une nouvelle propriété row-rule, permettant aux développeurs de styliser les gouttières entre les lignes et les colonnes. Vous n'avez plus besoin de vous embêter avec les bordures ou les pseudo-éléments pour styliser les règles entre les lignes et les colonnes.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

En savoir plus sur les décorations de marge CSS

34. Unités de fenêtre d'affichage tenant compte des barres de défilement (vw, vh, etc.)

Les unités de fenêtre d'affichage telles que vw et vh soustraient automatiquement la taille des barres de défilement (si elles sont garanties visibles, en utilisant overflow-y: scroll ou scrollbar-gutter: stable déclaré sur :root), ce qui évite tout débordement horizontal accidentel lors de la définition des éléments sur 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

En savoir plus sur les unités de fenêtre d'affichage tenant compte des barres de défilement

35. Accès JavaScript aux pseudo-éléments

Les API Web exposent désormais les pseudo-éléments CSS (comme ::before ou ::after) à JavaScript.

Vous pouvez récupérer une instance CSSPseudoElement à l'aide de Element.pseudo(type) et vérifier quel pseudo-élément a déclenché un événement à l'aide de Event.pseudoTarget.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

En savoir plus sur CSSPseudoElement

Conclusion

C'est tout pour notre récapitulatif des nouveautés de l'UI Web. Nous espérons que vous utiliserez ces fonctionnalités pour créer des interfaces intéressantes. À l'année prochaine !