Aninhamento de antecedência ativado no Chrome 120.
No início deste ano, o Chrome lançou o aninhamento de CSS em 112 e agora está disponível em todos os principais navegadores.
No entanto, havia um requisito rígido e potencialmente inesperado para a sintaxe, listado no primeiro artigo de exemplos de aninhamentos inválidos. Este artigo de acompanhamento aborda o que mudou na especificação e a partir do Chrome 120.
Nomes de tags de elementos aninhados
Uma das limitações mais surpreendentes da primeira versão da sintaxe de aninhamento de CSS foi a incapacidade de aninhar nomes de tags de elementos básicos. Essa incapacidade foi removida, tornando este aninhamento de CSS válido:
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
Isso fica muito bom 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?
Isso se deve em grande parte às explorações e protótipos dos engenheiros do Chrome, combinadas com o desejo da comunidade e do grupo de trabalho do CSS.
Havia uma quantidade razoável de dúvidas de que o analisador CSS poderia ser ensinado a diferenciar entre um nome de tag (div) e um nome de propriedade (visibility), já que o analisador atualmente não tem o conceito de olhar para o futuro. Para entender que o token é uma propriedade, o navegador precisa olhar para frente e verificar se um : segue o token desconhecido. Portanto, na especificação original, o símbolo & era usado para indicar ao navegador que o item a seguir estava aninhado, e não uma propriedade e um valor CSS comuns.
Felizmente, um engenheiro descobriu que, quando o analisador não analisava o seletor aninhado como uma propriedade de acordo com a passagem de consumo normal, ele poderia ser reiniciado em um modo que presumia um seletor em vez de uma propriedade. A análise retoma, reconhecendo o aninhamento como o aninhamento do seletor. Ela é rápida e confiável o suficiente para ser determinada o suficiente para liberar a sintaxe.