Container queries

Media queries olham a viewport. No Laboratório Belavista, o mesmo cartão de inscrição pode ir na coluna estreita da lateral ou no miolo largo — o componente reage ao tamanho do contêiner, não à janela inteira.

O exemplo deste capítulo é 57-container-queries, no pacote que acompanha o volume. Reduza a largura da coluna (ou da janela do exemplo), preveja o empilhamento, confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Definir contêiner com container-type.
• Nomear com container-name (opcional).
• Escrever @container com condições de tamanho.
• Combinar unidades cqmin / cqi quando fizer sentido.
• Distinguir de @media.

Dois passos

1. Marque o ancestral como contêiner.
2. Estilize descendentes dentro de @container.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Container queries — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="layout">
      <aside class="coluna">
        <form class="inscricao" action="#" method="get">
          <h2>Lista de espera</h2>
          <label for="nome">Nome</label>
          <input id="nome" name="nome" type="text" required>
          <button type="submit">Quero vaga</button>
        </form>
      </aside>
      <main class="miolo">
        <form class="inscricao" action="#" method="get">
          <h2>Lista de espera</h2>
          <label for="nome2">Nome</label>
          <input id="nome2" name="nome" type="text" required>
          <button type="submit">Quero vaga</button>
        </form>
      </main>
    </div>
  </body>
</html>

.coluna,
.miolo {
  container-type: inline-size;
  container-name: painel;
}

.inscricao {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #1a1a1a;
  background: #f7f4ef;
}

@container painel (min-width: 28rem) {
  .inscricao {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .inscricao h2 {
    grid-column: 1 / -1;
    font-size: 1.5rem;
  }
}

Tipos de contêiner

• inline-size — consulta o eixo de linha (o mais comum).
• size — bloco e linha; exige cuidado porque o tamanho deixa de depender dos filhos da mesma forma.

Sem largura explícita ou contexto de layout, um contêiner size pode “colapsar”. Prefira inline-size no cartão Belavista.

Unidades de contêiner

@container (min-width: 20rem) {
  .inscricao h2 {
    font-size: clamp(1rem, 4cqi, 1.75rem);
  }
}

cqi ≈ 1% do inline-size do contêiner. Útil para tipografia fluida do componente.

Erro comum: escrever @container sem container-type no ancestral. A query não encontra contêiner e o estilo nunca aplica. Inspecione o elemento pai.

Media vs container

Critério para avançar

Você avança se: marca .coluna/.miolo como contêiner; muda o grid do formulário só com @container; explica a diferença para media query.

Atividades

1. Qual propriedade transforma um elemento em contêiner de tamanho?
2. Por que o mesmo .inscricao pode parecer diferente na lateral e no miolo com a mesma viewport?
3. O que acontece se faltar container-type?

Respostas comentadas

1. container-type (ex.: inline-size), às vezes com container-name.
2. Cada um é contêiner com largura própria; a query responde a essa largura.
3. O @container não casa e os estilos internos não aplicam.