Actualización flexible de la sintaxis del anidamiento de CSS

Se habilitó el anidamiento anticipado en Chrome 120.

Adam Argyle

A principios de este año, Chrome envió el anidado de CSS en 112 y ahora está disponible en todos los navegadores principales.

Sin embargo, había un requisito estricto y potencialmente inesperado para la sintaxis, que se indica en el primer artículo de los ejemplos de anidación no válida. En este artículo de seguimiento, se analizará lo que cambió en la especificación y en Chrome 120.

Nombres de etiquetas de elementos anidados

Una de las limitaciones más sorprendentes de la primera versión de la sintaxis de anidación de CSS fue la imposibilidad de anidar nombres de etiquetas de elementos sin formato. Se quitó esta incapacidad, lo que hace que el siguiente anidamiento de CSS sea válido:

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

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

Esto se vuelve muy útil cuando anidas listas ordenadas, desordenadas o de definición:

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

  dd {
    /* dl dd styles */
  }
}

¿Qué cambió para permitir este anidamiento?

Esto se debe en gran medida a la exploración y el prototipado que realizaron los ingenieros de Chrome, combinado con el deseo de la comunidad y el grupo de trabajo de CSS.

Había una gran cantidad de dudas sobre si se podía enseñar al analizador de CSS a diferenciar entre un nombre de etiqueta (div) y un nombre de propiedad (visibility), ya que, en la actualidad, el analizador no tiene el concepto de mirar hacia adelante. Para comprender que el token es una propiedad, el navegador debe mirar hacia adelante y ver si un : sigue al token desconocido. Por lo tanto, en la especificación original, se usó el símbolo & para indicarle al navegador que lo que sigue está anidado y no es una propiedad ni un valor de CSS normales.

Afortunadamente, un ingeniero descubrió que, cuando el analizador no pudo analizar el selector anidado como una propiedad según el pase de consumo normal, se podía reiniciar en un modo que suponía un selector en lugar de una propiedad. Se reanuda el análisis y se reconoce el anidamiento como anidamiento de selectores. Es lo suficientemente rápido y confiable como para determinar que es suficiente para liberar la sintaxis.