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 enviou o aninhamento de CSS em 112, que agora está disponível em todos os principais navegadores.

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 abordará o que mudou na especificação e no Chrome 120.

Como aninhar nomes de tags de elementos

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 é 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 feitas pelos 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 verificar se um : segue o token desconhecido. Portanto, na especificação original, o símbolo & foi usado para indicar ao navegador que o item a seguir estava aninhado, e não uma propriedade e um valor CSS regulares.

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 que tenha sido determinada o suficiente para liberar a sintaxe.