Le CSS en 2026 : les nouvelles fonctionnalités qui remodèlent le développement front-end

• L’évolution de la plateforme CSS a désormais atteint un niveau où même des animations et interactions complexes peuvent être implémentées sans JavaScript
• Les nouvelles fonctionnalités ajoutées prennent en charge la personnalisation de <select>, la détection de l’état de défilement, le calcul des éléments frères et le styling basé sur les attributs
• Avec appearance: base-select et ::picker(select), il devient possible d’obtenir un contrôle total du style tout en conservant l’accessibilité et le comportement natif
• En utilisant sibling-index() et attr(), on peut mettre en place simplement des animations pilotées par les données et un styling des couleurs
• Ces évolutions marquent un changement de paradigme du développement front-end, en réduisant la dépendance à JavaScript et en améliorant l’accessibilité ainsi que la maintenabilité

---

Aperçu des nouvelles fonctionnalités de CSS

• En 2026, CSS introduit de nombreuses nouvelles fonctionnalités pour les interactions et les animations
  • appearance: base-select fait passer l’élément <select> en mode personnalisable
  • select::picker(select) est un pseudo-élément représentant la surface du menu déroulant, auquel on peut appliquer ombres, bordures, espacements, etc.
  • selectedcontent permet de styliser la zone d’affichage de l’option sélectionnée
• Les fonctionnalités liées au défilement sont elles aussi fortement étendues
  • ::scroll-button() correspond à des boutons de déplacement gauche/droite générés automatiquement dans un conteneur défilable
  • ::scroll-marker et ::scroll-marker-group jouent le rôle de points de pagination ou d’indicateurs visuels
  • scroll-target-group et :target-current permettent de mettre automatiquement en évidence le lien correspondant à la section actuellement visible
• Des container queries basées sur l’état du défilement sont également ajoutées
  • container-type: scroll-state et @container scroll-state(snapped: x) permettent de modifier le style en fonction de la position de défilement
• Des fonctions de comptage dans l’arborescence et la référence typée à des attributs font leur apparition
  • sibling-index() et sibling-count() renvoient respectivement la position et le nombre d’éléments frères
  • attr() permet de lire une valeur d’attribut comme un type tel qu’une couleur et de l’utiliser directement dans une propriété CSS
• @starting-style est une syntaxe expérimentale destinée à définir le style au point de départ d’une animation

Démo : personnalisation native de <select> en HTML

• L’élément <select> offre accessibilité et structure sémantique, mais jusqu’ici le contrôle du style restait limité
• Avec les nouvelles fonctionnalités CSS, une personnalisation complète sans JavaScript devient possible
  • activation du mode personnalisable avec appearance: base-select
  • styling de la surface du menu déroulant avec select::picker(select)
• Fonctionnalités gérées automatiquement par le navigateur
  • Gestion de l’overflow : défilement automatique pour éviter que le menu ne sorte de l’écran
  • Ajustement de la position d’ancrage : choix automatique de la meilleure position selon l’espace disponible dans le viewport
  • Gestion du focus et navigation clavier : prise en charge des touches Arrow, Enter et Escape
  • Options à contenu enrichi : possibilité d’inclure du contenu structuré, comme des icônes ou des labels
• Dans les navigateurs qui ne prennent pas en charge ces fonctionnalités, retour automatique au <select> par défaut, sans polyfill supplémentaire

Animation en cascade avec sibling-index()

• Mise en place d’une animation de glissement séquentielle à l’ouverture des options du menu déroulant
• sibling-index() renvoie la position d’un élément parmi ses frères (à partir de 1)
  • Ex. : la première option a un délai de 0s, la deuxième de 0.2s, la troisième de 0.4s
• Même lors de l’ajout ou de la suppression d’éléments, le recalcul du timing se fait automatiquement, ce qui facilite la maintenance
• Cela simplifie un processus qui nécessitait auparavant une définition manuelle via :nth-child() ou des propriétés personnalisées

Styling piloté par les données avec attr()

• La version typée de attr() permet d’utiliser directement les valeurs d’attributs HTML dans les styles
  • Ex. : lecture de l’attribut data-bg-color avec background-color: attr(data-bg-color color, transparent)
• En précisant le type de l’attribut, le navigateur l’analyse correctement et il devient aussi possible de définir une couleur de repli
• Cela permet de mettre en place une structure de styling centrée sur les données, où il suffit de modifier la couleur dans le HTML sans toucher au CSS

Comparaison : menu déroulant en CSS vs version JavaScript

• Implémenter le même menu déroulant en JavaScript nécessite plus de 150 lignes de code
• La version CSS offre la même fonctionnalité avec un seul <select> et quelques attributs
• L’accessibilité native, le focus et les contrôles clavier sont fournis automatiquement au niveau de la plateforme

L’avenir du CSS et l’orientation du développement

• Les nouvelles fonctionnalités de CSS permettent de réaliser des interfaces complexes avec un code déclaratif simple
• Grâce aux capacités fournies nativement par la plateforme, on obtient une réduction du code redondant et de la dépendance aux bibliothèques externes
• À l’ère de l’IA, ce type de structure simple et déclarative améliore la fiabilité de la génération automatisée de code
• Approche recommandée pour une adoption en pratique
  • réévaluer les composants UI historiquement centrés sur JavaScript sous un angle CSS
  • mener en parallèle des tests d’accessibilité pour vérifier la compatibilité clavier et lecteur d’écran
  • surveiller en continu l’état du support navigateur afin d’introduire ces fonctionnalités progressivement
• Ces évolutions montrent que CSS s’impose comme une technologie centrale des interactions front-end