Mise à jour de la syntaxe souple de l'imbrication CSS

L'imbrication avant la conversion est activée dans Chrome 120.

Adam Argyle

Plus tôt cette année, Chrome a lancé la fonctionnalité d'imbrication CSS en 112, et elle est désormais disponible sur tous les principaux navigateurs.

Cependant, la syntaxe contenait une exigence stricte et potentiellement inattendue, répertoriée dans le premier article des exemples d'imbrication non valides. Cet article de suivi décrit les modifications apportées à la spécification et à Chrome 120.

Noms de balises d'éléments imbriqués

L'une des limites les plus surprenantes de la première version de la syntaxe d'imbrication CSS était l'impossibilité d'imbriquer les noms de balises d'éléments simples. Cette incapacité a été supprimée, ce qui rend l'imbrication CSS suivante valide:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

Cela s'avère très pratique lors de l'imbrication de listes ordonnées, non ordonnées ou de définition:

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

Qu'est-ce qui a changé pour autoriser cette imbrication ?

C'est en grande partie grâce à l'exploration et au prototypage des ingénieurs Chrome, combinés aux souhaits de la communauté et du CSS Working Group.

Il y avait un certain doute sur le fait que l'analyseur CSS pouvait apprendre à faire la différence entre un nom de balise (div) et un nom de propriété (visibility), car l'analyseur n'a actuellement aucun concept d'avenir. Pour comprendre que le jeton est une propriété, le navigateur doit regarder à l'avance et vérifier si un : suit le jeton inconnu. Par conséquent, dans la spécification d'origine, le symbole & était utilisé pour indiquer au navigateur que les éléments suivants étaient imbriqués, et non une propriété et une valeur CSS standards.

Heureusement, un ingénieur a découvert que lorsque l'analyseur ne parvenait pas à analyser le sélecteur imbriqué en tant que propriété conformément à la passe de consommation normale, il pouvait être redémarré dans un mode qui supposait un sélecteur au lieu d'une propriété. L'analyse reprend, ce qui confirme l'imbrication de sélecteur. Il est suffisamment rapide et fiable pour être déterminé qu'il est suffisant pour libérer la syntaxe.