Container queries: dimensionar componentes pelo contêiner em vez da viewport

O que é

Uma media query verifica a largura da viewport; uma container query verifica a largura de um ancestral específico. Um elemento se torna contêiner de consulta com container-type: inline-size (consultas no eixo inline) ou size (ambos os eixos), podendo receber um nome com container-name. As regras dentro de @container (width > 40em) { .card { … } } são aplicadas aos descendentes de acordo com o ancestral mais próximo que tenha um contexto de contenção, ou com o ancestral de nome correspondente, quando um nome é indicado. A MDN lista unidades relativas ao contêiner (cqw, cqh, cqi, cqb, cqmin, cqmax), cada uma equivalente a 1% da dimensão do contêiner e utilizável em qualquer lugar onde um comprimento seja aceito, por exemplo em font-size.

Por que importa

Um componente colocado numa barra lateral, numa coluna principal e num modal não consegue deduzir o espaço disponível a partir da largura da viewport. Com breakpoints baseados na viewport, cada posição exige seus próprios overrides; com container queries, o componente carrega seus breakpoints e se adapta onde quer que seja colocado. É isso que torna os componentes de um design system reutilizáveis entre layouts, e não entre páginas.

Como aplicar

• Faça do wrapper o contêiner, e não do próprio componente. Um elemento não pode responder ao seu próprio tamanho: o conteúdo alteraria o tamanho e inverteria o resultado da consulta, o que a MDN descreve como um loop infinito e como o motivo de se aplicar a contenção de tamanho.
• Prefira inline-size. O valor size também aplica contenção ao eixo de bloco, de modo que o elemento deixa de crescer com o conteúdo, a menos que tenha uma altura explícita.
• Dê nomes aos contêineres quando os componentes forem aninhados (container-name: card) e consulte pelo nome, para que uma consulta interna não corresponda a um ancestral não pretendido.
• Use cqi para tipografia e espaçamento fluidos dentro de um componente, envolvido em clamp() para que os valores extremos continuem legíveis.
• Mantenha as media queries de viewport para o layout da página (número de colunas, navegação) e use container queries para os componentes; os dois mecanismos coexistem.
• Os breakpoints dentro de @container precisam ser valores literais, pois propriedades personalizadas não são permitidas nas condições de consulta; mantenha-os num único lugar por componente.

Armadilhas

A contenção altera o layout: a largura de um contêiner inline-size precisa vir do contexto (um elemento de bloco que se estende até a largura do pai) ou ser definida explicitamente; caso contrário, ele colapsa e a consulta nunca é satisfeita. As container style queries (@container style(--x: y)) são um recurso à parte; verifique o suporte a elas separadamente do suporte às consultas de tamanho. Um contêiner de consulta cujo tamanho é determinado pelos próprios filhos (um item flex com flex: 0 0 auto, uma caixa com posicionamento absoluto sem largura) é a causa habitual de "a consulta nunca dispara".