- A especificação de CSS Nesting recebeu a interface
CSSNestedDeclarations, resolvendo problemas causados pelo aninhamento
- Além disso, houve melhorias como o fato de declarações que vêm após regras de estilo não serem mais movidas para cima
- Aplicado a partir do Chrome 130, Firefox Nightly 132 e Safari Technology Preview 204
Problemas de CSS Nesting antes da introdução de CSSNestedDeclarations
- Havia um problema em que declarações aninhadas se comportavam de forma diferente do esperado
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
- Em versões anteriores ao Chrome 130,
background-color era aplicado como red, e não green
- Após o parsing, a regra efetivamente aplicada era alterada da seguinte forma
.foo {
width: fit-content;
background-color: green;
@media screen {
& {
background-color: red;
}
}
}
background-color: green; era movido para cima junto com as outras declarações, e o CSSMediaRule aninhado era encapsulado em um CSSStyleRule adicional usando o seletor &- Isso acontecia porque o motor de CSS não conseguia distinguir entre propriedades no início de uma regra de estilo e propriedades que apareciam entre outras regras
Solução - introdução da interface CSSNestedDeclarations
- O grupo de trabalho de CSS introduziu a regra de declarações aninhadas (nested declarations rule) para resolver isso
- A partir do Chrome 130, declarações aninhadas consecutivas passam a ser automaticamente encapsuladas em uma instância de
CSSNestedDeclarations
- Com isso, a posição da declaração
background-color: green pode ser mantida após a declaração background-color: red
CSSNestedDeclarations corresponde aos mesmos elementos e pseudo-elementos que a regra de estilo pai, e o comportamento de especificidade também é o mesmo
Impacto para desenvolvedores
- A partir do Chrome 130, o CSS Nesting foi significativamente aprimorado
- Porém, se houver mistura de declarações com regras aninhadas, pode ser necessário ajustar o código
/* Não funciona no Chrome 130 */
#mypopover:popover-open {
@starting-style {
opacity: 0;
scale: 0.5;
}
opacity: 1;
scale: 1;
}
- No código acima, a declaração
@starting-style é sobrescrita pelas declarações incluídas em CSSNestedDeclarations, removendo a animação de entrada
- É preciso ajustar da seguinte forma
/* Funciona no Chrome 130 */
#mypopover:popover-open {
opacity: 1;
scale: 1;
@starting-style {
opacity: 0;
scale: 0.5;
}
}
- Ao usar CSS Nesting, colocar as declarações aninhadas acima das regras aninhadas tende a funcionar bem na maioria das versões de navegadores
Detecção de suporte a CSSNestedDeclarations
if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {
// CSSNestedDeclarations não é suportado
}
Opinião do GN⁺
- CSS Nesting é um recurso útil que melhora a legibilidade e a manutenção do código. No entanto, havia problemas causados pela mistura de regras aninhadas e declarações, e é uma boa notícia que isso tenha sido resolvido com a introdução de
CSSNestedDeclarations.
- Antes da introdução de
CSSNestedDeclarations, havia problemas em que a posição das declarações aninhadas era alterada ou elas eram sobrescritas de forma não intencional. Isso podia gerar confusão para desenvolvedores.
- Outras soluções, como usar a regra
@nest ou encapsular declarações aninhadas em CSSStyleRule, também foram consideradas, mas não foram adotadas por motivos como piora na experiência de desenvolvimento. A introdução da regra de declarações aninhadas parece ser a solução mais adequada.
- No entanto,
CSSNestedDeclarations ainda é suportado apenas em alguns navegadores, então, para garantir compatibilidade entre navegadores, parece mais seguro sempre colocar as declarações aninhadas acima das regras aninhadas.
- Pré-processadores CSS como PostCSS e Sass também oferecem funcionalidades semelhantes a
CSSNestedDeclarations. Se você já usa um pré-processador, vale considerar aproveitar esse recurso.
Ainda não há comentários.