CSS Container Queries: Responsividade 2.0

Media queries estão obsoletas. Container Queries são o novo padrão para CSS responsivo.

O Problema das Media Queries

Media queries respondem à viewport:

/* Mobile */
@media (max-width: 768px) {
  .card { font-size: 14px; }
}

/* Desktop */
@media (min-width: 769px) {
  .card { font-size: 16px; }
}

Mas e se o .card estiver numa sidebar estreita mesmo no desktop?

Container Queries: Respondem ao Container

Componentes que se adaptam ao próprio espaço:

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

.card {
  padding: 1rem;
}

@container sidebar (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

O .card muda layout baseado no tamanho da sidebar, não da tela.

Exemplo: Card Adaptativo

<div class="container">
  <article class="card">
    <img src="avatar.jpg" alt="Felipe">
    <div class="content">
      <h2>Felipe Moacir</h2>
      <p>Web Developer especializado em performance.</p>
    </div>
  </article>
</div>

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

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Quando o container tem >= 500px */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card img {
    width: 150px;
    height: 150px;
  }
}

Container Query Units

Novas unidades CSS baseadas no container:

• cqw - 1% da largura do container
• cqh - 1% da altura do container
• cqi - 1% do tamanho inline
• cqb - 1% do tamanho block

.card h2 {
  font-size: clamp(1.5rem, 5cqi, 3rem);
}

O heading escala proporcionalmente ao container.

Container Query Names

Você pode nomear containers para queries específicas:

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

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

@container sidebar (min-width: 300px) {
  /* Estilos para sidebar >= 300px */
}

@container main (min-width: 800px) {
  /* Estilos para main >= 800px */
}

Suporte dos Navegadores

✅ Chrome 105+
✅ Safari 16+
✅ Firefox 110+

95%+ dos usuários podem usar hoje.

Quando Usar?

✅ Sempre que possível
✅ Design systems (componentes universais)
✅ Dashboards com layouts flexíveis

❌ Não há desvantagens reais

Migração de Media Queries

/* Antes: Media Query */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Depois: Container Query */
.products {
  container-type: inline-size;
}

@container (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

---

Conclusão: Container Queries são a evolução natural do CSS. Adote hoje mesmo.