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 la versión 112 y ahora se encuentra en todos los navegadores principales.

Navegadores compatibles

• 120
• 120
• 117
• 17.2

Origen

Sin embargo, había un requisito estricto y potencialmente inesperado para la sintaxis, que se menciona en el primer artículo de los ejemplos de anidamiento no válido. 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, por lo que se validó el siguiente anidamiento de CSS:

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

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

Esto se vuelve muy útil cuando se anidan listas ordenadas, desordenadas o de definiciones:

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 el token desconocido. Por lo tanto, en la especificación original, se utilizó el símbolo & para indicar al navegador que lo siguiente está anidado, y no una propiedad y 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. El análisis se reanuda y confirma el anidamiento como anidado del selector. Es lo suficientemente rápido y confiable como para determinar lo suficientemente rápido como para liberar la sintaxis.