Chaque année, un nouvel ensemble de fonctionnalités CSS franchit la frontière entre « pris en charge quelque part » et « pris en charge partout où cela compte ». Le lot 2026 est exceptionnellement pratique : moins sur la nouveauté visuelle, plus sur la suppression de JavaScript et du code de contournement qui est une pratique courante depuis des années.
Que signifie réellement « ligne de base » ?
Baseline est la réponse partagée de la plateforme Web à la question « puis-je déjà l'utiliser ? » Une fonctionnalité atteint la ligne de base une fois qu'elle fonctionne de manière cohérente sur les principaux moteurs de navigateur, sans polyfill ni repli. « Baseline 2026 » fait référence aux fonctionnalités qui ont récemment franchi cette barre cette année – sur lesquelles s'appuyer en toute sécurité pour la plupart des publics, mais qui valent toujours la peine d'être vérifiées par rapport à vos analyses spécifiques si vous prenez en charge des navigateurs particulièrement anciens.
La syntaxe des couleurs relatives atteint une prise en charge complète
Dériver une version plus claire, plus foncée ou plus transparente d'une couleur de marque signifiait auparavant soit maintenir un deuxième ensemble de variables de couleur à la main, soit recourir à un préprocesseur. Syntaxe de couleur relative – oklch(from var(--brand) l c h / 0.5)-expressions de style, à côté color-mix() - fonctionne désormais de manière native sur les principaux navigateurs. Vous pouvez définir une couleur source et en dériver chaque variante directement dans CSS, ce qui constitue une simplification significative pour tout système de conception axé sur la marque.
Animations d'entrée sans hacks de timing JavaScript
@starting-style permet à un élément de s'animer à partir de display: none ou content-visibility: hidden sans l'astuce habituelle consistant à ajouter une classe sur l'image d'animation suivante pour forcer une transition vers le feu. Un modal, un toast ou une liste déroulante peut désormais définir son état « avant son apparition » directement en CSS, et le navigateur gère le timing. Il s'agit d'une petite API, mais elle supprime une catégorie de JavaScript fragile qui est une source récurrente de bugs d'animation : courses de chronométrage, flashs de contenu sans style et transitions de première peinture saccadées.
Aucune de ces fonctionnalités ne nécessite une réécriture immédiate. Ceux qui valent la peine d'être adoptés en premier sont ceux qui suppriment déjà le code que vous conservez à la main : les variables de couleur relatives et les transitions d'entrée pilotées par JavaScript sont les gains les plus évidents.
La fonction shape() pour les chemins personnalisés
Le shape() La fonction CSS définit des chemins personnalisés pour clip-path et offset-path en utilisant des commandes lisibles - déplacement, ligne, courbe - avec un accès direct aux unités CSS et aux fonctions mathématiques comme calc(). Comparé aux données de chemin SVG écrites à la main ou à un polygone de paires de coordonnées brutes, il est considérablement plus facile à lire, à ajuster et à rendre réactif. Ceci est directement pertinent au type de formes personnalisées et de séparateurs de sections qui apparaissent constamment dans conception de marque et d'interface travail.
Style de barre de défilement, standardisé
scrollbar-width et scrollbar-color sont désormais des propriétés standard qui fonctionnent de manière cohérente sur tous les navigateurs, remplaçant une mosaïque de pseudo-éléments préfixés par le fournisseur qui se comportaient différemment partout. Si une conception nécessite une barre de défilement fine ou de la couleur de la marque (une demande courante pour les barres latérales et les blocs de code riches en contenu), elle ne nécessite plus de remplacements spécifiques au navigateur qui se sont discrètement interrompus sur le moteur que vous avez testé en dernier.
La ligne de base apparaît désormais directement dans DevTools
Chrome DevTools affiche désormais l'état de base directement dans le panneau Éléments : le survol d'une propriété CSS indique si elle est largement ou nouvellement disponible, et depuis quand. Cela comble une véritable lacune : auparavant, vérifier si une propriété pouvait être expédiée en toute sécurité signifiait quitter entièrement le navigateur pour vérifier un tableau de compatibilité. Maintenant, la réponse est à un survol du code que vous êtes en train de modifier.
Comment l'adopter sans regret
"Nouvellement disponible" en termes de base signifie que la fonctionnalité fonctionne dans les versions actuelles des principaux navigateurs - elle ne couvre pas rétroactivement les utilisateurs des anciennes versions qui n'ont pas été mises à jour. Avant d'utiliser l'un d'entre eux dans un projet client, vérifiez la fonctionnalité par rapport à la combinaison de navigateurs de votre trafic réel, comme vous le feriez pour toute autre technique abordée dans notre liste de contrôle de conception réactive. Pour la plupart des sites de marketing et de produits modernes, les quatre fonctionnalités ci-dessus sont aujourd'hui sécurisées ; pour un site avec une large audience de navigateurs existants, traitez-les comme une amélioration progressive plutôt que comme une fondation.
Cet article est un résumé original basé sur Documentation de base de web.dev et le Annonce de baseline-in-DevTools.