Le grand retour du natif : quand CSS et HTML simplifient enfin vos composants UI

En 2025, le Web UI entre dans sa phase turbo : les navigateurs livrent enfin des primitives qui remplacent des centaines de lignes de JS artisanal. Popover, anchor positioning, scroll‑driven animations, selects intégralement stylables : le socle natif s’épaissit et change la donne pour vos design systems. Vous codez des carrousels, des hover cards, des formulaires ? Préparez‑vous à refactorer massivement ! 

La nouvelle ère du développement UI natif

Le web ne se contente plus d’exécuter vos composants - il les comprend, les aligne, les anime, les place et les désactive avec précision. 

Ce glissement progressif vers un développement UI natif, déclaratif et standardisé transforme en profondeur la façon dont les développeurs front conçoivent leurs interfaces. Exit les polyfills fragiles et les surcouches JavaScript : les navigateurs modernes prennent désormais en charge des mécaniques jusqu’ici réservées aux frameworks lourds.

Une convergence inter-navigateurs sans précédent

Longtemps freinée par la fragmentation des implémentations, l’évolution des APIs CSS et HTML connaît aujourd’hui une accélération fulgurante. Ce qui relevait hier de l’expérimental devient baseline : autrement dit, utilisable en production avec une prise en charge stable dans au moins un moteur de rendu.

La nouveauté ? Les délais d’unification entre Chrome, Safari et Firefox se raccourcissent drastiquement. Des fonctionnalités complexes - comme les scroll-driven animations, anchor positioning ou scroll buttons - gagnent en interopérabilité dès leur standardisation, grâce à des programmes comme Interop 2025, qui coordonne activement les roadmaps des principaux moteurs (Blink, WebKit, Gecko).

Focus #1 : Le <select> personnalisable enfin accessible

Styliser un <select> ? Jusqu’ici, un cauchemar

Parmi les éléments HTML natifs, peu sont aussi frustrants que le <select>. Fonctionnel, certes. Accessibilité et intégration de formulaire intégrés, soit. 

Mais dès que l’on tente d’appliquer une charte graphique un tant soit peu personnalisée, la boîte noire se referme. Chaque navigateur impose son rendu. Résultat : une impossibilité de modifier polices, couleurs, icônes ou disposition de la liste déroulante.

La plupart des développeurs finissent par dissimuler le <select> original pour fabriquer une version sur-mesure avec des <div>, des <ul>, du JavaScript et beaucoup de frustration. Un chantier fragile, non maintenable et généralement non accessible.

Des fondations techniques entièrement repensées

Ce verrou saute enfin, grâce à trois évolutions clés du HTML/CSS natif, aujourd’hui utilisables dans la majorité des navigateurs modernes.

Popover API

Plus besoin de manipuler dynamiquement le DOM ou les z-index. La popover API gère nativement l’affichage en surimpression du menu déroulant. Elle orchestre le focus, garantit la remontée dans le top layer et offre le comportement light-dismiss (fermeture automatique en cas de clic hors zone). Tout cela sans JavaScript.

Anchor Positioning

Fini les calculs manuels de position absolue. Avec ce nouvel outil CSS, il suffit de déclarer un lien entre le bouton déclencheur et la liste d’options. 

Le navigateur gère le placement, les collisions avec le viewport, les fallback positions et la réactivité. En une seule ligne.

Command Invokers

Une autre avancée notable est la disparition progressive des gestionnaires d'événements onClick directement dans le HTML. Grâce au couple d’attributs command et commandfor, il est désormais possible de définir des interactions HTML purement déclaratives - comme ouvrir, fermer ou déclencher une action - sans écrire une seule ligne de JavaScript.

Cela permet d’obtenir un code plus lisible et maintenable, tire parti des comportements natifs du navigateur et améliore l’accessibilité, en particulier pour les utilisateurs de claviers ou technologies d’assistance.

Le <select> repensé, enfin stylisable

La nouveauté ne réside pas dans la recréation du composant, mais dans sa réinvention native. Grâce à une nouvelle valeur de la propriété appearance, vous activez le mode personnalisable avec :

select {

  appearance: base-select;

}

Cela débloque une panoplie de pseudo-éléments puissants :

• ::picker : cible la zone cliquable déclenchant la liste déroulante.

• ::selected-content : contrôle l’affichage de l’élément sélectionné.

• ::marker : stylise le symbole indiquant l’option active.

Vous gardez ainsi le comportement natif (saisie clavier, navigation, validation formulaire) tout en personnalisant intégralement l’apparence. L’expérience utilisateur reste fluide. Le DOM reste léger. Le JS disparaît.

Focus #2 : Le carrousel en CSS natif

Une galère bien connue des développeurs front

Le carrousel. Composant aussi populaire que redouté. Très prisé dans les interfaces modernes (galeries, produits, onboarding), il pose une série de défis chroniques :

• État complexe à gérer (élément actif, limites de navigation, synchronisation).

• Accessibilité souvent négligée.

• Scroll imprévisible selon les navigateurs.

• Et surtout : beaucoup de JavaScript pour tout faire fonctionner correctement.

Trois nouveautés CSS qui changent tout

scroll-buttons

Les flèches gauche/droite deviennent des pseudo-éléments CSS natifs. Vous déclarez leur existence, le navigateur les insère, les gère, les désactive automatiquement selon la position. Exemple : 

.carousel::scroll-button(left) {

  content: "←";

}

.carousel::scroll-button(right) {

  content: "→";

}

scroll-marker + scroll-marker-group

Ces deux entités introduisent désormais une pagination native. Chaque élément du carrousel génère son propre marqueur, que vous pouvez styliser, placer librement, et associer à une navigation par clic ou clavier.

:target-current

Enfin un sélecteur CSS pour cibler l’élément actuellement visible dans le carrousel. Vous pouvez maintenant surligner l’image affichée, redimensionner l’élément actif, ou animer la transition - toujours sans JS.

Les compléments CSS qui facilitent l’intégration

• scrollbar-width: none : pour masquer proprement la scrollbar horizontale sans hack.

• scroll-snap-type, scroll-snap-align : pour forcer l’alignement fluide des éléments dans le carrousel.

• anchor-positioning : pour ancrer les boutons et les marqueurs directement au bon endroit, même si le composant change de dimension ou se déplace.

Focus #3 : Les hover cards (cartes contextuelles)

Une interaction omniprésente, mais structurellement complexe

Dans l’UX moderne, les hover cards foisonnent. Profil utilisateur, aperçu de lien, résumé d’article ou fiche produit : dès que l’on survole un élément, un panneau riche et interactif surgit.

Problème : cet effet, pourtant familier pour l’utilisateur, reste un véritable casse-tête technique.

• Les points d’entrée se multiplient : clic, survol, focus clavier, appui long sur mobile.

• Il faut orchestrer plusieurs événements concurrents, gérer précisément les délais, annuler les ouvertures intempestives, puis rétablir les états d’origine sans heurter la navigation clavier.

• L’accessibilité ? Presque toujours oubliée. Focus cassé, lecture au lecteur d’écran impossible, interactions non restituées.

Certaines équipes mobilisent des mois de développement pour y parvenir sans faille. Et même avec les meilleures intentions, le résultat reste souvent fragile, incomplet, inadapté aux terminaux tactiles.

interest-target : enfin une réponse native à la carte contextuelle

Une proposition standard change la donne : interest-target, nouvelle fonctionnalité HTML actuellement en origin trial dans Chrome. Elle permet d'invoquer un popover non plus par clic, mais par intérêt de l’utilisateur, détecté selon le contexte :

• Survol pour les dispositifs à pointeur.

• Tabulation pour la navigation clavier.

• Pression longue pour les interfaces tactiles.

En remplaçant simplement popover-target par interest-target, l’élément s’affiche automatiquement au bon moment, sans script, sans écouteurs d’événements.

Délai d'entrée et de sortie… en CSS

Chaque interaction peut désormais s’accompagner de délais configurables, en une seule déclaration CSS :

a[interesttarget] {

  interest-target-delay-in: 0s;

  interest-target-delay-out: 1s;

}

Cela permet, par exemple, de laisser un popover persister un instant après la perte de focus, ou d’empêcher l’ouverture d’un panneau si le curseur ne reste qu’une fraction de seconde.

:has-interest : pseudo-classe contextuelle

Autre atout : une nouvelle pseudo-classe :has-interest, qui détecte l’élément ciblé par une interaction d’intérêt. Elle complète :hover et :focus en unifiant les cas de figure dans un seul sélecteur cohérent.

À la clé, des comportements fluides entre tous les types d’interaction, sans multiplier les règles ni casser les animations.

Scroll-driven animations & scroll state queries

Des outils puissants pour une UI synchronisée avec le mouvement

Les nouvelles APIs de scroll transforment le scroll en moteur d’animation performant et natif.

• @scroll-timeline : lie une animation CSS à la position de scroll d’un élément.

• @keyframes : reste inchangé, mais se synchronise avec le scroll via la timeline.

• scroll-state queries : trois requêtes inédites détectent l’état d’un scroller :
  

  • scrollable : présence ou non de débordement.

  • stuck : pour les éléments en position sticky.

  • snapped : pour les éléments ancrés par scroll-snap.

Ces requêtes fonctionnent comme les media queries ou les container queries, mais avec des états de défilement comme conditions.

Cas d’usage concrets et impact direct sur l’UX

Grâce à ces outils, les interfaces gagnent en fluidité et en expressivité. Quelques exemples :

• Indicateur de scroll visuel : un simple ::after en dégradé coloré pour signaler du contenu hors écran.

• Bouton “retour en haut” : visible uniquement lorsque le conteneur est défilable (:not(scrollable)), et animé avec scroll-timeline.

• Zoom sur l’élément actif dans un carousel : @container scroll-state(snapped) permet de mettre en valeur la carte visible, sans JS, ni mutation DOM.

Perspectives et écosystème

Des plateformes majeures passent à l’action

Les standards ne valent que par leur adoption. Et sur ce terrain, le virage vers un développement UI natif ne relève plus de la théorie.

Google Search, par exemple, explore activement les carrousels CSS-first pour réduire jusqu’à 75 % du code JavaScript embarqué. Objectif : libérer des ressources critiques, accélérer le rendu des contenus asynchrones, et préserver l’interactivité sans compromis. Résultat : un rendu plus rapide, plus stable, mieux référencé.

Du côté des éditeurs de CMS, Elementor, qui alimente plus de 12 % des sites WordPress, amorce une transition structurelle. Leur équipe a retravaillé plusieurs composants en tirant parti des scroll-buttons, des :target-current, et des scroll-markers natifs. En supprimant 165 ko de JavaScript, ils ont obtenu un gain massif de performances tout en conservant un rendu pixel-perfect et conforme aux attentes des designers.

Un standard qui ne cesse de s’enrichir

L’évolution ne s’arrête pas aux primitives évoquées jusqu’ici. L’écosystème CSS/HTML continue d’évoluer sur des chantiers tout aussi structurants.

Voici un aperçu des fonctionnalités en cours de stabilisation ou déjà en préversion dans certains navigateurs :

• sibling-index / sibling-count : pour cibler ou animer un élément en fonction de sa position parmi ses frères.

• calc-size / interpolate-size : enfin une solution pour animer entre height: 0 et height: auto.

• text-box-trim, text-box-edge : affûtage typographique poussé, contrôle fin des débordements verticaux.

• responsive-shape() : formes fluides adaptatives, sans SVG ni media query.

• CSS mixins : modularisation déclarative du style, pensée comme un équivalent natif aux @apply.

Ces avancées visent toutes un même objectif : faire de CSS un langage de description complet, lisible, modulaire et performant. 

L’ère du CSS utilitaire bricolé en cascade s’efface peu à peu au profit de compositions claires, typées, pilotées par les états du DOM.

Une dynamique communautaire essentielle

Les progrès actuels ne viennent pas d’un éditeur unique, mais d’une convergence structurée entre développeurs, navigateurs et groupes de standardisation.

Les groupes comme Open UI, le CSS Working Group ou encore WHATWG intègrent des retours concrets d’équipes terrain. Ils n’imaginent plus des APIs abstraites en chambre : ils répondent à des problèmes réels, vécus par des milliers d’équipes produit dans le monde entier.

C’est la raison pour laquelle la voix de la communauté technique reste centrale. Expérimenter les nouvelles features, documenter les bugs, signaler les limitations, proposer des cas d’usage : tout cela influence directement la forme finale des spécifications.

En activant des flags, en participant aux origin trials, en contribuant sur les forums ou les issues GitHub, vous participez à la fabrication du Web de demain.

Cet article est un résumé exhaustif de la vidéo « Quoi de neuf dans l'interface utilisateur Web » by Chrome for Developers