CSS 2026 : ces nouveautés discrètes qui simplifient (vraiment) un site vitrine

Le web évolue en continu, mais rarement à coups de révolutions spectaculaires : la plupart du temps, ce sont de petites fonctionnalités CSS qui, une fois « Baseline » (c'est-à-dire prises en charge par tous les navigateurs modernes), simplifient concrètement la construction d'un site, sans framework ni ligne de JavaScript supplémentaire. Les nouveautés 2026 en sont un bon exemple.

Ce qu'est le statut « Baseline »

Le projet Baseline, porté conjointement par les principaux navigateurs, indique précisément quand une fonctionnalité web devient utilisable sans risque de casser l'affichage chez une partie des visiteurs : « Nouvellement disponible » signifie qu'elle est prise en charge partout, mais depuis peu ; « Largement disponible » signifie qu'elle l'est depuis assez longtemps pour être utilisée sans réserve, même sur un site grand public.

Source : digest Baseline de mai 2026

Les unités lh et rlh : la fin des marges approximatives

Deux nouvelles unités CSS ont atteint le statut « Largement disponible » en 2026 : lh et rlh. L'unité lh correspond exactement à la hauteur de ligne calculée d'un élément : ce qui permet, par exemple, de dimensionner un badge ou une icône pour qu'il corresponde parfaitement à la hauteur d'une ligne de texte, sans calcul manuel ni ajustement au pixel près. L'unité rlh fait la même chose, mais par rapport à l'élément racine de la page, ce qui permet d'établir un rythme vertical cohérent sur l'ensemble d'un site.

Concrètement, pour un site vitrine : aligner parfaitement une icône à côté d'un texte, ou garantir un espacement vertical cohérent entre les sections, devient plus simple et plus robuste, sans dépendre de valeurs fixes qui cassent dès que la taille de police change.

La pseudo-classe :open : des menus et détails plus simples à styliser

La pseudo-classe :open simplifie la mise en forme des éléments qui ont un état ouvert/fermé, typiquement les balises <dialog> et <details>, très utilisées pour les FAQ en accordéon ou les fenêtres modales. Elle permet de cibler ces éléments uniquement lorsqu'ils sont actuellement ouverts, sans avoir besoin d'ajouter ou retirer une classe CSS via JavaScript à chaque interaction. Un accordéon de FAQ, par exemple, peut désormais être stylisé entièrement en CSS natif, là où il fallait auparavant du JavaScript pour gérer l'état visuel.

Les requêtes de conteneur : des composants vraiment réutilisables

Les requêtes de conteneur (« container queries ») sont largement disponibles depuis 2023, mais leur évolution en 2026 mérite d'être mentionnée : elles permettent désormais également de répondre aux valeurs de propriétés personnalisées d'un conteneur parent, et pas seulement à sa taille. Concrètement, un composant (une carte, un bloc de témoignage, une fiche produit) peut adapter son apparence en fonction de l'espace qui lui est réellement alloué, plutôt qu'en fonction de la taille globale de l'écran.

C'est un changement structurant pour la construction de sites : le même composant peut être placé dans une colonne étroite ou une pleine largeur, et s'adapter automatiquement, sans qu'il soit nécessaire de dupliquer le code pour chaque contexte d'affichage.

Pourquoi ça compte pour une TPE, au-delà du jargon technique

Ces évolutions n'ont l'air de rien prises isolément, mais elles convergent toutes vers le même bénéfice : faire davantage avec du CSS natif, et moins avec du JavaScript ou des frameworks lourds. C'est directement dans la lignée de ce que nous défendons à travers notre approche de l'éco-conception et de la création de site vitrine en code léger : moins de dépendances signifie un site plus rapide à charger, plus simple à maintenir dans la durée, et moins susceptible de casser lors d'une mise à jour de navigateur ou de framework.

Pour une TPE, la conséquence concrète n'est pas de « suivre la tendance CSS » pour elle-même, mais de bénéficier d'un site qui reste rapide et robuste plus longtemps, construit sur des standards stables plutôt que sur des surcouches qui, elles, nécessitent d'être mises à jour et maintenues indéfiniment.