Gerador de CSS Container Query

O que faz

O Gerador de CSS Container Query constrói uma regra @container pronta para colar — o CSS que permite a um componente se restylar com base no tamanho (ou uma custom property) de seu próprio container, em vez do viewport do navegador. Escolha um tipo de container, defina um breakpoint ou uma condição de custom-property, e digite os estilos que devem ser aplicados quando combinarem. Uma visualização ao vivo é atualizada conforme você altera qualquer opção: arraste a alça de redimensionamento do container de amostra para uma query size/inline-size, ou alterne a caixa de seleção para uma query style.

O que é uma container query

Uma media query só vê o viewport. Uma container query permite que um elemento responda ao tamanho de seu contexto de contenção mais próximo — então o mesmo componente de card pode ser organizado de uma forma em uma barra lateral ampla e de outra forma quando é espremido em uma coluna estreita, independentemente do tamanho geral da tela:

.container {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

container-type opta o elemento por contenção (inline-size apenas para largura, size para largura e altura); container-name é opcional e permite direcionar esse container específico por nome em vez do ancestor mais próximo com container-type definido.

Os três tipos de container

• Inline-size — a escolha mais comum. Estabelece contenção no eixo inline (largura em um modo de escrita horizontal) apenas, então as condições min-width/max-width podem consultá-la.
• Size — contenção em ambos os eixos, então as condições baseadas em altura também se tornam possíveis. Requer que o container tenha uma altura explícita ou restrita; um container com altura automática não pode ter contenção de tamanho.
• Style — consulta o valor de uma custom property em vez de uma dimensão, via style(--prop: value). Não requer container-type: size ou inline-size — qualquer container estabelece um contexto de style-query. Útil para um componente que deve se restylar com base em uma variável de tema ou estado definida mais acima na árvore.

Como usar

1. Opcionalmente, nomeie o container — deixe em branco para um container anônimo que corresponda ao ancestor mais próximo com contenção definida.
2. Escolha um Tipo de Container.
3. Para Inline-size/Size, escolha uma condição (min-width, max-width ou um intervalo min+max) e defina o(s) breakpoint(s) em pixels. Para Style, defina o nome da custom property e o valor que deve corresponder.
4. Digite os estilos que se aplicam quando a condição é correspondida — eles são envolvidos em um seletor .card dentro do bloco @container, correspondendo à visualização. Precisa de ajuda para construir as regras flex ou grid em si? Experimente o Gerador de CSS Flexbox ou o Gerador de CSS Grid e cole o resultado aqui.
5. Copie o CSS, mais o markup de demonstração se quiser reutilizar a estrutura da visualização, e ajuste o seletor .card para corresponder ao seu próprio componente.

FAQ

Por que minha regra @container precisa de um seletor, diferentemente de @media? Uma media query trata apenas do viewport, então seu corpo pode conter declarações simples. Uma container query trata do tamanho do próprio elemento — e esse elemento pode não carregar as propriedades que você está alternando — então o navegador precisa de um seletor dentro do bloco para saber o que restylar.

Por que a contenção size não funciona no meu elemento? container-type: size requer que o elemento tenha uma altura definida (ou aspect-ratio). Sem uma, o navegador não pode estabelecer contenção de tamanho e a query nunca corresponde — mude para inline-size se a altura não for fixa.

Posso combinar uma condição de tamanho e uma condição de estilo? Não em uma regra @container — escolha aquela que a condição desta ferramenta tem como alvo, então aninhe um segundo bloco @container manualmente se precisar de ambas.

Esta ferramenta armazena ou carrega algo? Não. Tudo, incluindo a visualização ao vivo, é executado localmente em seu navegador — nada que você digita sai do seu dispositivo.

E se eu precisar de um breakpoint baseado em viewport? Use o Gerador de CSS Media Query — mesma ideia, mas vinculado ao viewport do navegador em vez de um container de elemento.