Container Queries: o que são e como usar na prática

Container Queries são uma adição relativamente recente ao CSS que resolve um problema crucial no design responsivo: a capacidade de aplicar estilos com base no tamanho do elemento pai, e não na viewport. Isso significa que podemos criar componentes reutilizáveis ​​que se adaptam dinamicamente ao seu contêiner, independentemente do tamanho da tela do usuário.

Neste artigo, vou te mostrar um exemplo prático de como utilizei Container Queries para resolver um problema real que enfrentamos no site do Codante.

O problema

Estávamos reestilizando os cards do site do Codante, adicionando um novo design com vídeos no background (depois dá uma olhada como ficou show 😎). O problema era que o título do card precisava ter tamanhos diferentes dependendo do tamanho do próprio card, e não da tela.

Em telas maiores, queríamos um título grande e chamativo. Já em telas menores, precisávamos de um título menor para evitar que ele ocupasse muito espaço e quebrasse o layout.

No entanto, o problema era que o tamanho do card mudava dependendo da resolução da tela, mesmo que o tamanho da viewport não fosse tão diferente. Ou seja, o card poderia ser pequeno em uma tela grande, ou grande em uma tela menor, dificultando o uso de media queries tradicionais.

A solução: Container Queries

A solução ideal para esse tipo de problema são as Container Queries. Com elas, podemos aplicar estilos com base no tamanho do container do elemento, e não na viewport.

No nosso caso, utilizamos o plugin @tailwindcss/container-queries para integrar Container Queries ao nosso projeto com Tailwind CSS.

Instalação

Primeiro, instalamos o plugin via npm:

npm install @tailwindcss/container-queries

Em seguida, adicionamos o plugin ao arquivo tailwind.config.js:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}

Marcação do container

Para utilizar Container Queries, precisamos marcar o elemento pai como um container. No nosso caso, o container era o elemento <article> que representava o card. Adicionamos a classe @container a ele:

<article class="... @container">
  </article>

Aplicação dos estilos

Com o container definido, podemos agora aplicar estilos utilizando as Container Queries. Para isso, utilizamos a diretiva @container seguida do breakpoint desejado.

No exemplo abaixo, definimos o tamanho da fonte do título como text-2xl para telas maiores, text-xl para telas médias e text-base para telas menores, tudo com base no tamanho do container:

<article class="... @container">
  <h2 class="text-base @sm:text-xl @md:text-2xl">
    {workshop.name}
  </h2>
</article>

Resultados

Com a implementação das Container Queries, conseguimos controlar o tamanho da fonte do título de acordo com o tamanho do card, independentemente da resolução da tela. O resultado final foi um layout responsivo e consistente em todos os dispositivos.

Conclusão

Container Queries são uma ferramenta poderosa para o design responsivo, permitindo a criação de componentes mais flexíveis e reutilizáveis. Com a crescente adoção pelos navegadores, as Container Queries se tornarão cada vez mais essenciais para o desenvolvimento web moderno.

Espero que este artigo tenha sido útil para demonstrar o poder das Container Queries e inspirar você a utilizá-las em seus projetos.

Para ver o código completo do projeto, acesse o repositório codante-io-front no GitHub.

Assista ao vídeo