Resumo

  • O primeiro rascunho público de Cascade Level 6, em dezembro de 2021, apresentou @scope e uma noção de proximidade. Naquela versão, o seletor da raiz ainda emprestava sua especificidade às regras internas.
  • As versões de 2023 e 2024 passaram a distinguir limite e força: a raiz define o espaço de atuação, mas não infla automaticamente a especificidade das regras que vivem nele.

Há maneiras trabalhosas de proteger o botão coral. Uma é escrever o percurso inteiro de seus ancestrais no seletor; basta mover o cartão e o endereço envelhece. Outra, comum em ferramentas de componentes, é colocar um atributo único em cada elemento e repeti-lo em todas as regras. Funciona como uma festa em que até o vaso de plantas precisa de crachá. Seria melhor indicar a porta do cômodo uma vez e deixar que o navegador reconheça o que fica dentro dela.

O primeiro rascunho público do W3C, de 21 de dezembro de 2021, mostrou exatamente a alternativa cheia de data-scope e apresentou @scope. O autor escolheria uma raiz, talvez um limite inferior, e escreveria regras normais no bloco. O texto também discutia qual raiz estaria mais perto de um elemento disputado. O navegador poderia contar passos na árvore, sem exigir que o seletor carregasse um mapa completo da página.

Na versão inicial, a cerca vinha com um privilégio. A especificidade do seletor da raiz era adicionada à das regras internas. Em @scope (#hero), um img recebia também o peso do ID. A placa da porta distribuía medalhas para todos os móveis. A posição da proximidade na cascata ainda estava em debate. Essa diferença importa para a história: a sintaxe de 2021 não pode ser lida com a aritmética que o trabalho posterior acabaria adotando.

O rascunho de 21 de março de 2023 retirou o bônus. O próprio texto compara @scope (#hero) { img { ... } } com :where(#hero) img { ... }; os dois têm especificidade (0,0,1). #hero aponta onde o âmbito começa; img é o seletor que pontua. O limite continua preciso, mas já não transforma toda regra da casa em chefe do vizinho. A equipe do cartão menor pode tomar sua decisão de cor em seu próprio contexto.

Com to (...), o âmbito externo pode parar antes de uma região interna. O rolo de tinta azul chega à soleira e encerra o expediente. Se duas regras com âmbito alcançam o mesmo elemento, a proximidade da raiz entra na comparação no momento definido pela cascata. A distância é contada em passos na árvore de elementos, não em pixels. Uma regra próxima ganha relevância para aquele local, sem ultrapassar por decreto origem, importância, camada ou especificidade.

O rascunho de 6 de setembro de 2024 especificou que os elementos que formam o limite inferior ficam fora do âmbito e descreveu a proximidade como uma medida única entre raiz e elemento. Seu histórico registra a retirada da opção de proximidade forte e, desde o primeiro rascunho, do bônus de especificidade da raiz. Também deixa claro que nomes definidos por @keyframes, @font-face ou @layer continuam globais mesmo quando essas regras aparecem dentro de @scope. A cerca organiza a atuação de regras de estilo; não privatiza todos os nomes do CSS.

A história de publicações do W3C data as versões de 2021, 2023 e 2024, e a nota do grupo de trabalho CSS destaca @scope como trabalho novo desse nível. O avanço foi pôr limites sem transformar o limite em poder automático. O cartão de fora continua azul, o de dentro escolhe coral, e ninguém precisa costurar crachás em todos os elementos da casa.