A arquitetura de componentes moderna exige modularidade. No passado, aplicar temas específicos ou variações visuais a um componente dependia de gerenciar classes adicionais via JavaScript (ex: .card--dark ou .card--featured). Com a chegada das Container Style Queries, agora podemos fazer com que componentes filhos alterem seus estilos dinamicamente consultando variáveis customizadas declaradas em seus elementos pai, criando um sistema de estilização desacoplado e nativo.
Qual a diferença entre Media, Container Size e Style Queries?
A evolução dos seletores condicionais em CSS nos trouxe até este ponto de flexibilidade máxima:
- Media Queries: Consultam o tamanho da viewport geral do navegador.
- Container Size Queries (CQ): Consultam a largura ou altura física do container pai mais próximo.
- Container Style Queries (CSQ): Consultam o valor de variáveis personalizadas (
--custom-properties) ou estilos aplicados ao container pai, independentemente do seu tamanho físico.
Isso significa que um componente pode se ajustar visualmente não porque ficou menor na tela, mas porque o bloco pai mudou seu estado semântico de estilização.
A sintaxe das Container Style Queries na prática
A estrutura básica envolve definir um elemento como container e atribuir uma variável customizada a ele. Os elementos filhos então utilizam a regra @container style() para consultar o valor dessa variável.
Veja este exemplo simplificado:
/* Definindo o pai como container */
.product-card {
container-name: card-theme;
--card-style: elegant;
}
/* Consultando a variável no filho */
@container card-theme style(--card-style: elegant) {
.product-title {
font-family: "Playfair Display", serif;
font-size: 1.5rem;
color: #2c3e50;
}
.product-badge {
background-color: #d4af37; /* Dourado */
}
}Caso alteremos o valor de --card-style para playful no container pai, as regras internas do seletor @container não serão aplicadas, e o componente filho cairá de volta para seu visual padrão ou para a regra playful correspondente.
Criando micro-temas modulares de componentes sem JavaScript
Essa abordagem é ideal para construir Design Systems resilientes. Imagine um widget de feed que pode ser renderizado em três seções diferentes do site: no rodapé escuro, na barra lateral cinza ou na área principal clara.
Em vez de escrever seletores acoplados como .footer .widget ou passar propriedades de classe complexas via React/Astro, você define --widget-theme: dark no container do rodapé. O widget interno consulta esse valor e ajusta suas cores internas (como contraste de botões e links) de forma autônoma. O HTML do componente filho permanece intocado, limpo e extremamente portátil.
Limites atuais de suporte nos navegadores e o que esperar
Embora a especificação original das Container Style Queries cubra qualquer propriedade CSS (ex: perguntar se o pai tem display: flex), a implementação inicial dos navegadores está limitada à consulta de propriedades customizadas (Custom Properties).
Essa funcionalidade já conta com excelente suporte nos navegadores modernos baseados em Chromium (Google Chrome, Microsoft Edge, Opera) e Safari. O Firefox está finalizando a implementação em seu motor de renderização. Para projetos em produção, você pode usar a diretiva @supports para garantir fallbacks aceitáveis caso o navegador do usuário ainda não suporte consultas de estilo nativas.
