Não é nenhuma novidade que o Google sempre vem trazendo novidades para o CSS, uma dessas novidades foi o Container Queries. Nessa publicação venho explicar o que é e como usar Container Queries.

O que é container queries

Ao falar de Container Queries lembramos de Media Queries, antes de iniciarmos devemos estar cientes das diferenças entre elas. Enquanto Media Queries aplicam um estilo a um elemento baseado no tamanho da tela os Container Queries aplicam o estilo baseado no elemento.

Veja um exemplo abaixo na prática:

No exemplo acima toda vez que o card for maior ou igual a 500px a cor irá mudar, a mesma lógica. Porém ele altera com base no elemento e não no viewport.

Como usar

Primeiramente devemos informa que ao elemento que ele é um container. E logo mais informaremos seu nome, para podermos utiliza-lo.

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

Após fazermos isso podemos manipular qualquer elemento referenciando no elemento com a classe card.

Podemos também abreviar, ou seja em vez de utilizar uma linha para informa o tipo do container e outra para declarar seu nome, podemos fazer em uma linha apenas. Colocamos primeiramente o nome que desejamos para o container e logo mais seu tipo.

.card{
  container: card / inline-size;
}

Conclusão

Como vimos no decorrer do artigo, é um grande avanço para a criação de layouts responsivos a criação de container queries. Pois agora não dependemos unicamente do tamanho da tela mas agora do tamanho do elemento, e isso abre um leque de possibilidades de melhoria de código e isso torna melhor a manutenção dos templates e reuso de componentes.