Container queries levam responsividade para o componente

Container queries colocam uma peça muito aguardada no CSS moderno: a capacidade de um componente responder ao tamanho do seu contêiner, não apenas ao tamanho da viewport. Com @container chegando ao Chromium 105, a responsividade passa a ter uma base mais próxima da forma como interfaces são realmente compostas.¹

Media queries continuam importantes, mas elas olham para a janela. Em aplicações modernas, o mesmo componente pode aparecer em uma coluna estreita, em um painel lateral, dentro de um card, em uma área principal ou em um grid dinâmico. A viewport não conta essa história completa.

Componentes precisam conhecer o próprio espaço

Design systems dependem de componentes reutilizáveis. Um card de produto, bloco de notícia, tabela resumida ou widget de dashboard pode precisar mudar densidade, imagem, botões e tipografia de acordo com o espaço disponível. Antes, isso exigia classes de contexto, JavaScript, convenções de layout ou media queries globais difíceis de manter.

Com container queries, o CSS permite declarar que um elemento é contêiner e escrever regras condicionadas ao tamanho dele. Isso desloca parte da lógica responsiva para o lugar certo: o componente. A vantagem é modularidade. O componente carrega mais do seu comportamento visual e depende menos de saber onde será usado.

Essa mudança combina com arquiteturas baseadas em componentes, mas também exige cuidado. Se cada componente define suas próprias regras sem sistema, o CSS pode virar um conjunto fragmentado de decisões locais. O ganho vem quando tokens, breakpoints de componente e padrões de layout são documentados.

:has() amplia o poder seletivo do CSS

O mesmo ciclo do Chromium 105 também coloca em destaque o seletor :has(), descrito junto às container queries como uma nova API responsiva poderosa.¹ Ele permite selecionar um elemento com base no que contém, abrindo espaço para padrões antes dependentes de classes manuais ou scripts.

Para UI, :has() ajuda em cards com mídia opcional, formulários com estados específicos, listas com itens selecionados e layouts que mudam quando determinado filho existe. Em conjunto com @container, CSS ganha mais capacidade de responder ao contexto sem sair da camada de estilos.

O risco é o mesmo de qualquer poder novo: abuso. Seletores complexos demais podem prejudicar legibilidade e dificultar depuração. A melhor adoção deve priorizar casos em que o estado estrutural já é parte natural do componente.

Responsividade fica menos global

Container queries mudam a mentalidade de layout. Em vez de desenhar apenas para larguras de tela, equipes podem desenhar para larguras de componente. Isso é especialmente útil em dashboards, CMSs, e-commerces e interfaces administrativas, onde blocos são rearranjados em grids e painéis.

Também melhora colaboração entre design e desenvolvimento. Especificações podem dizer como o componente se comporta em faixas de espaço, independentemente da página. Essa descrição é mais reaproveitável do que "no tablet fica assim", porque componentes não vivem apenas em uma página.

A chegada de container queries mostra CSS amadurecendo para a realidade dos produtos digitais. Responsividade deixa de ser apenas adaptação da página e passa a ser qualidade interna do componente.