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

Agrupamento de antecipação ativado no Chrome 120.

Adam Argyle

No início deste ano, o Chrome lançou o aninhamento de CSS na versão 112, e agora ele está disponível em todos os principais navegadores.

Compatibilidade com navegadores

• 120
• 120
• 117
• 17.2

Origem

No entanto, havia um requisito estrito e potencialmente inesperado para a sintaxe, listado no primeiro artigo dos exemplos de aninhamento inválido. Este artigo de acompanhamento vai abordar o que mudou na especificação e no Chrome 120.

Nomes de tags de elementos aninhados

Uma das limitações mais surpreendentes na primeira versão da sintaxe de aninhamento do CSS foi a incapacidade de aninhar nomes de tags de elementos simples. Essa incapacidade foi removida, tornando o seguinte aninhamento de CSS válido:

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

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

Isso fica ainda melhor ao aninhar listas ordenadas, desordenadas 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 à exploração e prototipagem dos engenheiros do Chrome, combinada com o desejo da comunidade e do Grupo de Trabalho do CSS.

Havia uma quantidade razoável de dúvidas de que o analisador de CSS poderia ser ensinado a diferenciar um nome de tag (div) de 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 o futuro e verificar se um : segue o token desconhecido. Portanto, na especificação original, o símbolo & foi usado para indicar ao navegador que o que segue estava aninhado, e não uma propriedade e um valor CSS normais.

Felizmente, um engenheiro descobriu que, quando o analisador não conseguia analisar o seletor aninhado como uma propriedade de acordo com o cartão de consumo normal, ele podia ser reiniciado em um modo que assumia um seletor em vez de uma propriedade. A análise é retomada, reconhecendo o aninhamento como aninhamento de seletor. Ela é rápida e confiável o suficiente para ser considerada suficiente para liberar a sintaxe.