Aprimorando a Responsividade com Consultas de Contêiner (Container Queries)

Com o avanço das tecnologias front-end, as Consultas de Contêiner (Container Queries) surgem como uma poderosa alternativa às tradicionais Media Queries, permitindo que o design de um componente seja adaptado ao tamanho do contêiner em que ele está inserido, em vez de depender do tamanho total da janela.

Este tutorial explica como usar Consultas de Contêiner, com exemplos práticos e claros para aplicar em seus projetos.

O que são Consultas de Contêiner?

Diferentemente das Media Queries, que baseiam suas condições no tamanho da viewport, as Consultas de Contêiner respondem ao tamanho, dimensões e estilo do contêiner que envolve um elemento. Isso é útil para designs de componentes independentes que podem ser usados em diferentes contextos.

Exemplo:

• Media Queries: “Se a largura da viewport for maior que 768px, aplique o estilo X.”
• Consultas de Contêiner: “Se a largura do contêiner for maior que 300px, aplique o estilo Y.”

Suporte de Navegadores

As Consultas de Contêiner estão atualmente em fase de adoção, sendo suportadas por navegadores modernos como Chrome, Edge e Firefox. Verifique sempre o suporte atualizado em caniuse.com.

Estrutura Básica

Para usar Consultas de Contêiner, siga os seguintes passos:

1. Habilitar o contêiner: O elemento pai deve ter a propriedade container-type definida.
2. Escrever a consulta: Dentro do CSS, utilize o at-rule @container para definir os estilos condicionalmente.

Exemplo Básico

HTML:

<div class="card">
  <h2>Exemplo de Consulta de Contêiner</h2>
  <p>Este é um exemplo de texto responsivo.</p>
</div>

CSS:

/* Habilitando o contêiner */
.card {
  container-type: inline-size;
  container-name: card;
  padding: 1rem;
  border: 1px solid #ccc;
}

/* Estilos responsivos com consultas de contêiner */
@container card (min-width: 300px) {
  .card {
    background-color: lightblue;
    font-size: 1.2rem;
  }
}

@container card (min-width: 600px) {
  .card {
    background-color: lightgreen;
    font-size: 1.5rem;
  }
}

Neste exemplo:

• O estilo da .card muda de cor e tamanho de fonte conforme a largura do contêiner.

Trabalhando com Múltiplos Contêineres

As Consultas de Contêiner permitem que diferentes contêineres sejam configurados para diferentes componentes.

HTML:

<div class="gallery">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

/* Habilitando o contêiner na galeria */
.gallery {
  container-type: inline-size;
}

.item {
  padding: 1rem;
  border: 1px solid #000;
}

@container (min-width: 400px) {
  .item {
    display: inline-block;
    width: calc(33.333% - 1rem);
  }
}

@container (min-width: 800px) {
  .item {
    width: calc(25% - 1rem);
  }
}

Neste exemplo:

• O layout da galeria se adapta à largura do contêiner.

Consultas de Contêiner com Propriedades Específicas

Além do tamanho, é possível usar consultas para propriedades como estilo de fonte.

HTML:

<div class="text-container">
  <p>Texto responsivo baseado no estilo do contêiner.</p>
</div>

CSS:

.text-container {
  container-type: inline-size;
  font-size: 14px;
}

@container (font-size: 16px) {
  .text-container p {
    font-weight: bold;
  }
}

Neste caso:

• Se a fonte do contêiner for ajustada para 16px, o texto dentro dele ficará em negrito.

Consultas de Contêiner Aninhadas

Componentes podem ser aninhados, e cada contêiner pode ter suas próprias consultas.

HTML:

<div class="parent">
  <div class="child">
    Componente Filho
  </div>
</div>

CSS:

.parent {
  container-type: inline-size;
  padding: 1rem;
}

.child {
  container-type: inline-size;
  padding: 0.5rem;
}

@container (min-width: 400px) {
  .parent {
    background-color: lightcoral;
  }
}

@container (min-width: 200px) {
  .child {
    background-color: lightyellow;
  }
}

Neste caso:

• O estilo do componente pai e do filho mudam de forma independente, dependendo de seus contêineres respectivos.

Dicas Avançadas

1. Nomes de Contêiner: Use container-name para criar nomes de contêineres reutilizáveis. Isso permite aplicar consultas mais facilmente em diferentes componentes.
2. Fallback para Media Queries: Nem todos os navegadores suportam Consultas de Contêiner. Inclua Media Queries como alternativa para garantir compatibilidade.

Exemplo com Fallback:

/* Media Query como fallback */
.card {
  padding: 1rem;
  background-color: lightgray;
}

@media (min-width: 600px) {
  .card {
    background-color: lightblue;
  }
}

/* Consulta de Contêiner */
@container (min-width: 600px) {
  .card {
    background-color: lightgreen;
  }
}

3. Debugging: Use ferramentas do navegador para inspecionar Consultas de Contêiner e verificar o tamanho dos contêineres em tempo real.

Maninho, talvez você curta?

• 
  Melhor Linguagem de Programação 2025: Explorando as Opções para sua Carreira em Tecnologia
• 
  Hidratação no Front-End: O que é e como ela resolve problemas de SSR e CSR
• 
  Como Sair de Pleno para Senior em 2025: O Guia Definitivo Sem Ficar Batendo Cabeça
• 
  Guia Definitivo: Como e Quando Usar find e findIndex no JavaScript
• 
  Diferença entre every e some no JavaScript: O Guia Definitivo para Quem Já Quebrou a Cabeça com Arrays

Conclusão

As Consultas de Contêiner trazem flexibilidade e poder para criar designs verdadeiramente responsivos, centrados no componente. Experimente integrá-las em seu próximo projeto para uma abordagem moderna e escalável de design responsivo.

Combinando Consultas de Contêiner e Media Queries, você pode atingir o máximo de compatibilidade e performance, garantindo uma experiência fluida para todos os usuários.

Angular performance Angular Signals Apps Multiplataforma automação de tarefas Backend Boas Práticas boas práticas Git controle de versão desenvolvedores desenvolvimento backend Desenvolvimento de Software Desenvolvimento Frontend Desenvolvimento Mobile Desenvolvimento Web desenvolvimento ágil devops dicas para devs escalabilidade ferramentas de Git ferramentas de programação Front-end Git Hooks integração contínua inteligência artificial JavaScript Linguagens de Programação Media Queries mercado de tecnologia Mercado de Trabalho Tech Node.js produtividade dev Programação Programação Orientada a Objetos programação para iniciantes programação reativa Python React React Suspense Rust Tecnologia Trunk-Based Development web development workflow Git workflows Git