CSS Container Queries: layout responsivo baseado no contentor, não no ecrã

Durante anos, o design responsivo em CSS significou quase sempre reagir à largura da janela do navegador através de media queries. Isso funciona bem para o layout geral de uma página, mas mostra os seus limites ao construir componentes reutilizáveis: um cartão, um widget de barra lateral, qualquer elemento que precise de se adaptar ao espaço realmente disponível, e não ao ecrã do utilizador. As CSS Container Queries resolvem exatamente este problema e, em 2026, são já uma tecnologia madura, suportada por todos os principais navegadores modernos.

Este artigo explica o que são, como se usam na prática e em que casos coexistem com as media queries em vez de as substituírem.

O que são as container queries e para que servem

Uma container query aplica regras CSS a um elemento com base no tamanho (ou no estilo) do seu elemento contentor, em vez da viewport. Na prática: coloque o mesmo cartão numa coluna larga e numa barra lateral estreita, e ele pode mudar automaticamente de layout, tamanho de texto ou disposição do conteúdo consoante o espaço real disponível à sua volta, independentemente da largura total do ecrã.

É isto que torna possível um verdadeiro design ao nível do componente: o mesmo bloco HTML/CSS pode ser reutilizado em diferentes pontos de um site e comportar-se-á de forma inteligente onde quer que seja colocado.

Ativar um contentor: container-type e container-name

Para que um elemento possa ser "consultado" pelos seus filhos, deve primeiro ser declarado como contentor de consulta através da propriedade container-type:

• inline-size: o caso mais comum, permite consultas baseadas apenas na dimensão em linha do contentor (normalmente a largura).
• size: ativa consultas tanto à largura como à altura, mas exige que a altura do contentor esteja definida explicitamente, caso contrário o conteúdo pode colapsar.
• normal: valor predefinido; o elemento não é um contentor de consulta de tamanho, mas continua a poder ser usado para consultas baseadas apenas no nome ou no estilo.

Um exemplo mínimo:

.post {
  container-type: inline-size;
}

Quando uma página tem vários contentores aninhados, é útil distingui-los com container-name, para que as regras seguintes saibam a que contentor se referem:

.post {
  container-type: inline-size;
  container-name: artigo;
}

Ambas as propriedades também podem ser escritas de forma abreviada com a sintaxe container: nome / tipo;, por exemplo container: artigo / inline-size;.

A sintaxe @container na prática

Uma vez definido o contentor, as regras escrevem-se com a at-rule @container, cuja forma se assemelha muito à @media:

@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Para visar um contentor específico entre vários aninhados, adiciona-se o seu nome antes da condição:

@container artigo (width > 700px) {
  .card { font-size: 2em; }
}

Um caso prático frequente é um cartão que empilha título e imagem quando o espaço é reduzido (por exemplo, numa barra lateral) e os coloca lado a lado quando o contentor é mais largo (por exemplo, na coluna principal de uma página): o mesmo markup HTML muda de comportamento automaticamente, sem necessidade de classes adicionais nem de JavaScript.

As unidades de comprimento relativas ao contentor

Quando um elemento é um contentor do tipo size ou inline-size, ficam disponíveis unidades de comprimento dedicadas, pensadas para dimensionar fontes, espaçamentos ou elementos proporcionalmente ao contentor em vez de à viewport:

• cqw: 1% da largura do contentor.
• cqh: 1% da altura do contentor.
• cqi: 1% da dimensão em linha do contentor (normalmente a largura, em escrita horizontal).
• cqb: 1% da dimensão de bloco do contentor (normalmente a altura).
• cqmin: o valor menor entre cqi e cqb.
• cqmax: o valor maior entre cqi e cqb.

Um exemplo típico é um título que cresce de forma fluida em proporção ao espaço disponível, combinando as unidades cq com clamp() ou max():

.card h2 {
  font-size: max(1.5em, 1.23em + 2cqi);
}

Se um elemento não tiver um contentor ancestral válido, estas unidades recuam, por segurança, para as unidades equivalentes da viewport, evitando que o layout se quebre.

As container style queries: um passo além do tamanho

Além das consultas de tamanho, a especificação introduz também as container style queries, que permitem aplicar regras com base no estilo do contentor (por exemplo, o valor de uma propriedade personalizada CSS), não apenas nas suas dimensões: @container style(--tema: escuro) { ... }. Trata-se de uma funcionalidade mais recente que, ao contrário das consultas de tamanho já estáveis em todo o lado, ainda tem suporte parcial: totalmente disponível no Firefox, e apenas parcialmente no Chrome, Edge e Safari. Para um uso em produção hoje em dia, convém por isso cingir-se às consultas de tamanho e tratar as style queries como uma técnica emergente a testar com cuidado.

Suporte dos navegadores em 2026

As container queries baseadas em tamanho (através de container-type: size ou inline-size) são já consideradas uma tecnologia sólida e estabelecida: suportadas pelo Chrome e Edge desde a versão 106, pelo Safari desde a versão 16 e pelo Firefox desde a versão 110, além das respetivas versões móveis (Safari no iOS, Chrome para Android, Samsung Internet, Firefox para Android). O suporte global ultrapassa hoje os 94% dos utilizadores, faltando apenas em navegadores antigos ou de nicho como o Internet Explorer, o Opera Mini ou alguns navegadores Android regionais (UC Browser, QQ Browser, Baidu Browser). Para a maioria dos projetos web modernos, as container queries baseadas em tamanho podem, assim, ser usadas sem grandes cuidados, prevendo eventualmente um fallback via flexbox ou grid para o público remanescente em navegadores muito antigos.

Container queries ou media queries: quando usar cada uma

As duas técnicas não competem entre si, mas respondem a necessidades diferentes:

• As media queries continuam a ser a escolha certa para o layout geral da página: número de colunas, visibilidade de um menu, comportamento de toda a grelha consoante a viewport.
• As container queries são a escolha certa para componentes individuais que precisam de ser reutilizáveis e "conscientes" do espaço em que são colocados: cartões, widgets, blocos de um design system, elementos de uma barra lateral.

Em projetos reais, as duas técnicas coexistem sem problemas: as media queries definem a estrutura geral da página, enquanto as container queries afinam o comportamento dos componentes que ela contém. Esta mudança de perspetiva é especialmente útil para equipas que trabalham com design systems e bibliotecas de componentes, onde o mesmo bloco de interface tem de funcionar bem onde quer que seja colocado.

Conclusão

As CSS Container Queries preenchem uma lacuna histórica do CSS responsivo: a possibilidade de um componente raciocinar com base no seu próprio espaço real, e não apenas na janela do navegador. Com um suporte de navegadores já sólido para as consultas de tamanho, é um bom momento para começar a introduzi-las nos seus projetos, talvez começando por um único componente (um cartão, uma caixa informativa) antes de alargar a abordagem a todo um design system. As style queries, ainda em fase de adoção, merecem ser acompanhadas de perto no futuro próximo.

Fontes oficiais

• MDN Web Docs – CSS container queries
• MDN Web Docs – Using container size and style queries
• Can I use – CSS Container Queries (Size)
• Can I use – CSS Container Style Queries