CSS Container Style Queries: Customização Dinâmica baseada em Variáveis CSS

Resumo rápido

Os CSS Container Style Queries representam o próximo grande salto na estilização baseada no contexto. Enquanto as Container Size Queries permitem alterar estilos com base na largura ou altura física do pai, as Style Queries permitem avaliar valores de estilos declarados no contêiner — especialmente propriedades personalizadas (CSS Custom Properties ou variáveis CSS). Isso significa que você pode consultar se o contêiner tem a variável --theme: dark definida e estilizar todos os filhos dinamicamente sem precisar de seletores de classe globais ou injeções de Javascript.

Além das Media Queries: O Poder dos Container Style Queries

O modelo clássico de design responsivo depende de Media Queries, que avaliam as dimensões físicas da tela do navegador (viewport). Essa abordagem falha ao criar bibliotecas de componentes reutilizáveis: um card de notícias deve se comportar de maneira diferente se for posicionado em uma coluna lateral estreita do que na seção principal do site.

As Container Queries resolveram esse problema focado no tamanho. Mas e quando queremos alterar o estilo de acordo com a semântica visual do elemento pai? É aí que entram os Style Queries. Eles eliminam a necessidade de propagar seletores complexos (ex: .card-dark .card-title) ou de gerenciar temas injetando classes adicionais na árvore DOM.

Como Customizar Temas de Componentes Isolados com Base em Variáveis

Ao contrário de consultas de tamanho, que exigem declarar a propriedade container-type: inline-size ou normal no pai, os Style Queries não dependem do tamanho físico do elemento contêiner. Qualquer elemento pai que defina uma variável CSS se qualifica automaticamente como um contêiner estilo consultável.

A sintaxe usa a regra @container style(...) para verificar valores de variáveis:

/* 1. Definir o contêiner e suas variáveis */
.widget-wrapper {
  --widget-style: glass;
  --accent-color: #7c3aed;
}

/* 2. Consultar o valor da variável do contêiner para estilizar os elementos filhos */
@container style(--widget-style: glass) {
  .widget-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  }
}

@container style(--accent-color: #7c3aed) {
  .widget-button {
    background-color: var(--accent-color);
    color: #ffffff;
  }
}

Exemplo Prático: Estilizando Cards Aninhados de Acordo com o Container

Imagine um painel administrativo com várias seções e áreas onde o usuário pode alternar a apresentação dos componentes. Se você deseja que os botões de ação e títulos internos de um card se adaptem de forma harmônica a um determinado contexto estético configurado no elemento pai, pode estruturar a folha de estilos da seguinte forma:

/* Card padrão */
.info-card {
  padding: 1.5rem;
  border-radius: 8px;
  background-color: #ffffff;
  color: #111827;
}

.info-card-button {
  border: 1px solid #d1d5db;
  color: #374151;
}

/* Alterar aparência se o contêiner tiver estilo especial */
@container style(--card-elevation: high) {
  .info-card {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #f3f4f6;
  }
  .info-card-button {
    background-color: #111827;
    color: #ffffff;
  }
}

Essa abordagem simplifica muito a criação de sistemas modulares. Você pode arrastar seu componente .info-card para qualquer lugar do layout, e ele herdará e responderá perfeitamente às propriedades do contêiner onde pousar, sem a necessidade de hacks ou seletores aninhados gigantescos.

Suporte Atual nos Navegadores e Estratégias de Fallback

O suporte do CSS Container Style Queries está se consolidando. Atualmente, os motores baseados no Chromium (Google Chrome, Microsoft Edge, Opera) já oferecem suporte completo para consultas de propriedades personalizadas.

Para navegadores que ainda não completaram a implementação, o ideal é usar a diretiva @supports ou fornecer estilos de fallback clássicos fora da regra @container. A folha de estilo deve ser estruturada com a abordagem Mobile First, garantindo que o visual padrão seja bonito e utilizável mesmo se os navegadores dos usuários não interpretarem a regra de consulta de estilo.

Fontes Oficiais

• W3C CSS Containment Module: https://w3.org
• MDN Web Docs Container Queries: https://developer.mozilla.org