CSS Nesting : détection et utilisation

Fini les sélecteurs à rallonge et la répétition de classes : le CSS Nesting natif débarque enfin dans les navigateurs. Découvrez comment imbriquer vos styles comme en Sass, sans préprocesseur.

Le CSS Nesting permet d'imbriquer des sélecteurs directement dans leurs parents, comme on le fait depuis des années avec les préprocesseurs (Sass, Less).
Depuis 2023, cette fonctionnalité est disponible nativement dans les navigateurs modernes.

S'en servir ou pas… Et bien tout dépend de votre cible d'utilisateurs. A chacun d'évaluer le risque.

Sur Kortic, on s'en sert. Et ça fonctionne pas mal. Il n'y a guère que le validateur W3C qui va grogner un peu, pour le moment.

Exemple

Imaginons une navigation classique.

SANS Nesting CSS (classique)

nav {
  display: flex;
  padding: 1rem;
  background:  rgb(51,51,51);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

nav ul li a:hover,
nav ul li a:focus {
  background:  rgb(85,85,85);
  border-radius: 4px;
}

nav ul li a[aria-current="page"] {
  font-weight: bold;
  border-bottom: 2px solid  rgb(0,170,255);
}

nav ul li .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  background:  rgb(68,68,68);
}

nav ul li .dropdown.active {
  display: block;
}

@media (max-width: 48rem) {
  nav ul {
    flex-direction: column;
  }

  nav ul li .dropdown {
    position: static;
  }
}

Avec Nesting CSS

nav {
  display: flex;
  padding: 1rem;
  background:  rgb(51,51,51);

  & ul {
    list-style: none;
    display: flex;
    gap: 1rem;

    & li {
      position: relative;

      & a {
        color: white;
        text-decoration: none;
        padding: 0.5rem 1rem;

        &:hover,
        &:focus {
          background:  rgb(85,85,85);
          border-radius: 4px;
        }

        &[aria-current="page"] {
          font-weight: bold;
          border-bottom: 2px solid  rgb(0,170,255);
        }
      }

      & .dropdown {
        display: none;
        position: absolute;
        top: 100%;
        background:  rgb(68,68,68);

        &.active {
          display: block;
        }
      }
    }
  }

  @media (max-width: 48rem) {
    & ul {
      flex-direction: column;

      & li .dropdown {
        position: static;
      }
    }
  }
}

La différence ? Avec le nesting, tout reste regroupé logiquement, comme avec Sass, mais sans faire de build.

Détecter le support

Avant d'utiliser le nesting, il est prudent de vérifier si le navigateur le supporte : dans le head de la page, on peut tester immédiatement.

window.supportsNesting = CSS?.supports?.('selector(&)') ?? false;

Cette ligne fait trois choses :

1. Vérifie si CSS.supports() existe (pour les vieux navigateurs) ;
2. Teste si le sélecteur & est reconnu ;
3. Stocke le résultat dans window pour éviter de recalculer.

Ensuite, on peut ajouter une classe CSS utilisable pour prévoir des affichages conditionnés :

Exemple sur Kortic

document.documentElement.classList.add(!supportsNesting ? 'no-nesting-css' : 'use-nesting-css');

Et maintenant, c'est disponible partout.

Pourquoi faire ?

Pour les scripts qui injectent du CSS dynamiquement, cette détection permet :

• D'utiliser le nesting moderne si disponible ;
• De fournir un fallback CSS classique ou prévoir un mode "dégradé" ;
• D'éviter les erreurs de parsing dans les anciens navigateurs.

CSS Nesting ou pas ?

Le nesting c'est cool, mais ce n'est pas toujours adapté. Voici quelques cas où il vaut mieux s'abstenir :

Votre équipe n'est pas à l'aise avec la syntaxe
Si vos collègues n'ont jamais touché à Sass ou Less, le nesting peut les dérouter. Mieux vaut une base de code que tout le monde comprend qu'une syntaxe moderne incomprise.

Vous avez besoin d'un CSS ultra-compatible
Projet institutionnel, intranet d'entreprise avec des navigateurs gelés dans le temps, ou simplement un client très frileux ? Le CSS classique reste plus sûr.

Le validateur W3C vous rend dingue
Si vous ne pouvez pas vivre sans le badge vert du validateur W3C, attendez encore un peu. Le validateur n'a pas encore intégré le nesting dans ses règles, donc il va râler (temporairement, hein).

Bref, comme toujours en développement web : adaptez vos choix techniques à votre contexte.
Le nesting est un super outil, mais ce n'est pas une obligation.

Support navigateurs

Le CSS Nesting est supporté depuis :

• Chrome/Edge 112+ ;
• Safari 16.5+ ;
• Firefox 117+.

Pour les navigateurs plus anciens, le fallback reste simple : dupliquer les sélecteurs parents, ou prévoir un mode "dégradé", ou utiliser un préprocesseur (ah ben ouais).

Ressources

• CSS Nesting sur MDN ;
• Spécification W3C ;
• Can I use.

Allez ! Au boulot maintenant…