CSS moderne : nesting, :has(), container queries, subgrid | We.Inc
Démos en direct et modifiables du nesting CSS natif, du sélecteur :has(), des container queries, de subgrid, @layer, :is(), color-mix() et text-wrap: balance, avec un tableau de support Baseline.
Le CSS pur fait désormais ce qui demandait auparavant Sass ou JavaScript. Le nesting natif regroupe les règles liées, :has() stylise un parent selon ses enfants, les container queries adaptent un composant à sa propre largeur, et subgrid aligne les éléments imbriqués sur la grille extérieure. Les quatre sont devenus Baseline en 2023, donc les navigateurs actuels les prennent en charge.
Les fonctionnalités phares en un coup d'œil
Fonctionnalité
Remplace
Baseline depuis
Nesting
Le nesting façon Sass dans un préprocesseur
:has()
Le JavaScript qui ajoute une classe au parent
Container queries de taille
Les media queries de viewport dans les composants
Subgrid
Les hauteurs codées en dur pour aligner les rangées de cartes
Chaque fonctionnalité ci-dessous a une démo modifiable, et la carte de la démo container query réagit à un curseur pour que vous la voyiez changer de mise en page sans redimensionner votre fenêtre. Le tableau de support indique l'année où chaque fonctionnalité est devenue Baseline, c'est-à-dire qu'elle fonctionne dans les dernières versions de Chrome, Edge, Firefox et Safari.
Faites glisser le curseur de largeur de la démo container query et regardez la carte passer d'une disposition empilée à une disposition côte à côte.
Modifiez n'importe quel exemple à gauche. Le résultat isolé à droite se redessine pendant que vous tapez.
Consultez le tableau de support avant de mettre en production. Baseline désigne les quatre grands moteurs, pas leurs anciennes versions.
Copiez l'extrait dont vous avez besoin. Aucun ne nécessite d'étape de build ni de bibliothèque.
Gardez un nesting peu profond. Deux niveaux suffisent généralement, et un nesting profond produit des sélecteurs longs et très spécifiques, exactement comme en Sass.
Les container queries ont besoin d'un conteneur : définissez d'abord container-type: inline-size sur le parent, sinon la règle @container ne correspond à rien.
Enveloppez les règles :has() dans @supports selector(:has(*)) si les anciens navigateurs comptent pour votre audience, afin qu'ils se rabattent proprement.
Utilisez :where() pour les styles de bibliothèque ou de reset. Sa spécificité est nulle, donc n'importe qui peut le surcharger avec une seule classe.
Questions fréquentes
Ai-je encore besoin de Sass pour le nesting ?
Pas pour le nesting seul. Le nesting natif couvre le cas courant des règles imbriquées dans d'autres règles ainsi que le sélecteur &. Sass offre toujours les mixins, les boucles et les fonctions, même si les propriétés personnalisées et color-mix() ont repris une bonne partie de ce pour quoi on l'utilisait.
Quelle est la différence entre container queries et media queries ?
Une media query interroge le viewport, généralement la largeur de la fenêtre. Une container query interroge un élément ancêtre choisi. Cela permet à un même composant carte d'afficher une mise en page compacte dans une barre latérale étroite et une mise en page large dans la colonne principale de la même page.
:has() est-il lent ?
Les moteurs des navigateurs l'ont optimisé avant sa sortie et un usage ordinaire ne pose pas de problème. Des sélecteurs très larges comme body:has(*) sur des pages énormes imposent plus de travail de correspondance, alors ancrez :has() à une classe de composant précise quand c'est possible.
Que signifie Baseline ?
Baseline est un label de la communauté de la plateforme web qui indique qu'une fonctionnalité fonctionne dans les versions actuelles de Chrome, Edge, Firefox et Safari. Newly available correspond à la date à laquelle le dernier d'entre eux l'a livrée. Widely available arrive environ trente mois plus tard.
Quand utiliser subgrid plutôt qu'une grille imbriquée ?
Utilisez subgrid quand les enfants d'un élément de grille doivent s'aligner sur les pistes de la grille extérieure, comme les titres, les textes et les boutons d'une rangée de cartes. Une grille imbriquée classique a ses propres pistes indépendantes, donc des contenus de longueurs différentes se désalignent.
Comment fonctionne le sélecteur & dans le nesting
Dans un bloc imbriqué, & représente le sélecteur extérieur. &:hover attache la pseudo-classe au parent lui-même, & + & cible un frère du même type, et .theme-dark & place le parent dans un autre contexte.
Un sélecteur imbriqué sans & est traité comme un descendant, donc .card { p { } } signifie .card p. Les navigateurs sortis à partir de 2023 acceptent aussi un nom d'élément seul comme p au début d'une règle imbriquée.
Les cascade layers en pratique
@layer reset, base, components, utilities; déclare un ordre dès le départ. Une couche ultérieure l'emporte sur une couche antérieure quelle que soit la spécificité, ce qui met fin à la plupart des conflits entre une bibliothèque de composants et vos propres surcharges.
Les styles placés hors de toute couche l'emportent sur tous les styles en couche. C'est pratique pour intégrer une ancienne feuille de style dans une organisation en couches : laissez d'abord les règles héritées hors couche, puis déplacez-les une par une.
Choisir quoi adopter en premier
Si vos utilisateurs sont sur des navigateurs récents, le nesting et :is() sont des gains gratuits qui ne font que raccourcir votre feuille de style. Les container queries deviennent rentables dès que vous avez des composants réutilisables affichés à différentes largeurs. Subgrid compte surtout pour les grilles de cartes et les formulaires avec libellés.
Nesting CSS natif
Une carte stylisée avec des règles imbriquées
Le survol, le titre et la variante sombre sont tous à l'intérieur de .card. & désigne .card lui-même.
Le sélecteur parent :has()
Mettre en évidence un champ quand sa case est cochée
Aucun script ne s'exécute dans ce cadre. Le libellé se stylise lui-même parce qu'il contient un input coché.
Changer la mise en page d'une carte seulement si elle contient une image
Les cartes sans image gardent la mise en page sur une colonne ; celles qui en ont une passent sur deux colonnes.
Container queries
Le CSS derrière la démo à curseur
container-type rend .shelf mesurable ; la règle @container fait ensuite passer la carte en ligne dès que l'étagère mesure au moins 420px de large.
Subgrid
Des rangées de cartes alignées quelle que soit la longueur du texte
Chaque carte s'étend sur trois rangées de la grille extérieure et utilise subgrid pour ses propres rangées, donc chaque titre, texte et bouton partage la même ligne.
@layer, :is(), :where(), color-mix() et text-wrap
Les cascade layers désignent le gagnant par leur ordre
Le sélecteur d'ID se trouve dans une couche antérieure, donc la simple classe de la couche suivante l'emporte quand même.
:is() et :where() raccourcissent les listes de sélecteurs
:is() prend la spécificité de son argument le plus fort, :where() compte toujours pour zéro.
color-mix() pour les teintes et les nuances au survol
Mélanger avec du blanc ou du noir dans l'espace oklab donne des teintes régulières à partir d'une seule couleur de marque.
text-wrap: balance pour les titres
Le second titre répartit ses mots équitablement sur les lignes au lieu de laisser un mot seul. Les navigateurs limitent l'équilibrage aux blocs courts de quelques lignes.
Support des navigateurs (Baseline)
Statut Baseline (dernières versions de Chrome, Edge, Firefox et Safari), vérifié sur MDN en octobre 2026
Fonctionnalité
Baseline
Remarques
:is() et :where()
Largement disponible
@layer (cascade layers)
Largement disponible
Container queries de taille (@container, container-type)
Les container style queries sont distinctes et pas encore Baseline ; vérifiez caniuse
color-mix()
Subgrid
Nesting CSS
Les sélecteurs d'élément seuls au début d'une règle imbriquée nécessitent des versions de 2023 ou plus récentes
:has()
text-wrap: balance
Les anciens navigateurs l'ignorent et passent à la ligne normalement
Démo container query
La carte ci-dessous réagit à la largeur de son conteneur gris, pas à votre fenêtre. Dépassez 420px et elle passe à une mise en page sur deux colonnes.
Largeur du conteneur :
Lampe de bureau en noyer
Lumière chaude, interrupteur en laiton, abat-jour fait main.