Atualização de sintaxe flexível de aninhamento de CSS

Aninhamento antecipado ativado no Chrome 120.

Adam Argyle

No início deste ano, o Chrome enviou o aninhamento de CSS em 112, e em todos os principais navegadores.

Compatibilidade com navegadores

• 120
• 120
• 117
• 17,2

Origem

No entanto, havia um requisito rigoroso e possivelmente inesperado listada no primeiro artigo dos exemplos de aninhamento inválidos. Este artigo de acompanhamento abordará o que mudou na especificação e desde o Chrome 120.

Como aninhar nomes de tags de elementos

Uma das limitações mais surpreendentes na primeira versão do aninhamento de CSS foi a incapacidade de aninhar nomes de tags de elemento nus. Essa incapacidade tem foi removido, tornando válido o seguinte aninhamento de CSS:

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

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

Isso é muito útil ao aninhar listas ordenadas, não ordenadas ou de definição:

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

  dd {
    /* dl dd styles */
  }
}

O que mudou para permitir esse aninhamento?

É em grande parte graças à exploração e criação de protótipos feita pelos engenheiros do Chrome, combinado com o desejo da comunidade e do grupo de trabalho do CSS.

Havia muitas dúvidas de que o analisador CSS poderia ser ensinado a diferencie entre o nome de uma tag (div) e um nome de propriedade (visibility) conforme o analisador atualmente não tem o conceito de olhar para o futuro. Para entender que o token é uma propriedade, o navegador precisa verificar se um : segue o token desconhecido. Portanto, na especificação original, o símbolo & era usado para indicar ao navegador que o que se segue foi aninhado, e não um CSS normal e o valor delas.

Felizmente, um engenheiro descobriu que, quando o analisador falhava ao analisar seletor aninhado como uma propriedade de acordo com a passagem de consumo normal, poderia ser reiniciada em um modo que assumiu um seletor em vez de uma propriedade. Análise é retomado, reconhecendo o aninhamento como aninhamento de seletor. É rápido o suficiente e confiáveis o bastante para que tenham sido determinados o suficiente para liberar a sintaxe.