Você já conhece as Container Queries no CSS? Essa é uma nova forma de criar e estilizar layouts responsivos com base no tamanho do container.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Container Queries no CSS – Nova Forma de Criar Designs Responsivos
O desenvolvimento web tem evoluído significativamente, especialmente no que diz respeito à criação de designs responsivos.
A Media Query é uma ferramenta essencial para adaptar os layouts de sites e aplicativos ao tamanho da tela do usuário. No entanto, essa abordagem apresenta algumas limitações.
Para resolver esse problema, surge uma nova funcionalidade chamada Container Queries, que permite controlar o layout responsivo com base no container em que o elemento está inserido.
Material da Aula – Página de Exemplo
No material disponível para download, você encontrará os arquivos index.html e style.css.
Esse material é responsável por estruturar a página da web que utilizaremos como exemplo.
Essa é uma página bem simples, contendo um título principal (<h1>), seguido de um parágrafo e dois blocos: o bloco principal e o bloco de colunas (à direita na tela).
Dentro de ambos os blocos, temos caixas organizadas contendo uma imagem e um parágrafo. Cada uma dessas caixas compartilha a mesma classe .caixa.
Problema com Media Queries
As Media Queries funcionam monitorando o tamanho da tela do usuário e, a partir dessa informação, é possível definir regras CSS para modificar o layout da página, garantindo que ele se adapte a diferentes dispositivos.
No entanto, essa abordagem pode ser restritiva em layouts mais complexos, como no exemplo em que múltiplos elementos compartilham a mesma classe.
Ao aplicar uma Media Query, qualquer mudança feita na classe .caixa será replicada para todos os elementos que a utilizam, independentemente do tamanho individual de cada um.
Perceba que se isso acontecer nosso layout ficará desconfigurado e inconsistente, pois a caixa do bloco principal, deve ser maior do que as caixas no bloco de colunas.
O ideal, nesse caso, seria modificar os elementos com base no tamanho disponível dentro de cada container, e não apenas no tamanho da tela. Para isso, podemos utilizar as Container Queries.
Para saber mais sobre Media Queries e responsividade no CSS confira nossa aula: Responsividade no CSS: Criando Layouts para Diferentes Dispositivos
Container Queries no CSS
As Container Queries são a abordagem mais indicada quando desejamos que o layout responda ao tamanho do contêiner, em vez de ser baseado no tamanho da tela.
Com essas regras, você pode especificar que um determinado elemento altere seu comportamento visual conforme o espaço disponível no container onde está inserido.
Isso nos dá muito mais controle e flexibilidade na criação de layouts responsivos, garantindo que o estilo se mantenha adequado, independentemente do dispositivo que o usuário esteja utilizando.
Para usar uma Container Query, o primeiro passo é definir qual elemento será o contêiner. Isso é feito no CSS, utilizando a propriedade container-type.
Uma vez que o contêiner é declarado, você pode usar as Container Queries para modificar o layout com base no seu tamanho.
Como qualquer nova funcionalidade do CSS, é sempre importante verificar o suporte dela nos navegadores. O site Can I Use é uma excelente ferramenta para isso.
Atualmente, mais de 90% dos navegadores já suportam as Container Queries, o que as torna uma opção viável e segura para seus projetos.
Analisando o Layout
Antes de aplicarmos as container queries à nossa página, é importante analisarmos o layout para verificar em que dimensão o contêiner precisa ser modificado.
Podemos fazer essa verificação usando as Ferramentas do Desenvolvedor, um recurso que nos ajuda a visualizar informações da página e realizar testes com diferentes configurações.
Diferentes navegadores podem ter formas distintas de acessar essa opção, mas ela estará disponível em todos eles.
No Chrome, por exemplo, você pode clicar nos três pontos no canto superior direito do navegador, ir em Mais ferramentas e selecionar Ferramentas do desenvolvedor, ou utilizar o atalho Ctrl + Shift + I.
Ao acessar essa ferramenta, você verá a opção Toggle device toolbar, localizada no canto superior esquerdo da janela recém-aberta (segunda opção à esquerda de Elements).
Essa ferramenta permite alterar o tamanho do layout, facilitando a verificação da responsividade em diferentes dispositivos.
Ao modificar o tamanho da tela, você notará que, em larguras menores que 1430px, as caixas no bloco de colunas ficam com o texto e a imagem apertados.
No entanto, perceba que a caixa no bloco principal ainda possui espaço suficiente para ajustar o conteúdo.
Esse é o motivo pelo qual container queries são essenciais: com elas, podemos controlar o layout de acordo com o container específico de cada caixa.
Para verificar as dimensões de um elemento específico, você pode usar a primeira opção à esquerda de Toggle device toolbar e selecionar o elemento desejado.
No nosso caso, vamos selecionar o container da coluna e observar suas dimensões nas Ferramentas do Desenvolvedor.
Verificamos que, a partir de 550px de largura, o layout do elemento começa a ficar apertado, prejudicando a visualização do texto e da imagem.
Portanto, a regra de estilo dos nossos elementos deve ser aplicada quando o contêiner em que eles estão inseridos tiver 550px ou menos. Nesse caso, vamos alterar a direção dos elementos internos para orientação em coluna, usando flex-direction: column.
Aplicando as Container Queries no CSS
Agora que já identificamos as dimensões nas quais precisamos alterar o layout, vamos definir as regras de estilo no CSS.
O primeiro passo é declarar os elementos que serão os containers das nossas caixas. Isso é feito utilizando a propriedade container-type, como vimos anteriormente. Ela recebe o valor inline-size, que se refere à largura do container (eixo horizontal).
Aplicamos essa propriedade aos seletores dos elementos com as classes .principal e .coluna.
.principal {
display: flex;
width: 60%;
container-type: inline-size;
}
.coluna {
display: flex;
flex-direction: column;
gap: 10px;
width: 40%;
container-type: inline-size;
}Uma vez que o contêiner é declarado, podemos usar a Container Query para modificar o layout com base no seu tamanho, de forma semelhante ao que fazemos com Media Queries.
No nosso exemplo, queremos que, quando o container tiver 550px ou menos, o layout mude a direção dos elementos internos para orientação em coluna. Isso pode ser feito através da propriedade flex-direction com o valor de column.
@container (max-width: 550px) {
.caixa {
flex-direction: column;
}
}Com essa regra, o flex-direction: column só afetará os elementos com a classe .caixa quando o container onde eles estão inseridos tiver uma largura menor que 550 pixels.
Assim, quando o bloco de colunas atingir 550px ou menos, as caixas dentro dele serão reorganizadas. Já a caixa no bloco principal permanecerá inalterada até que o bloco principal também chegue a essa medida.
Isso nos proporciona um controle mais refinado e preciso dos elementos que compartilham a mesma classe em nossa página.
Conclusão – Container Queries no CSS
As container queries representam um avanço significativo no design responsivo, oferecendo maior controle sobre como os layouts se adaptam ao espaço disponível.
Nessa aula, você aprendeu o que são e como implementar container queries, permitindo aplicar regras específicas aos elementos com base no tamanho de seus containers, e não no tamanho da tela.
Essa abordagem torna o layout dos seus projetos mais flexível e eficiente, permitindo um controle mais preciso dos elementos. Com o suporte crescente nos navegadores, essa é uma ferramenta poderosa que você pode explorar nos seus projetos.
Para aprofundar seus conhecimentos em HTML e CSS e aprender a criar projetos e páginas de destaque no mercado, confira o nosso Curso Completo HTML e CSS Impressionador.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- Funções do Copilot no Excel que vão TRANSFORMAR seu Trabalho
Você sabia que o Copilot no Excel faz muito mais do que tirar dúvidas? Essa IA pode criar fórmulas, formatar dados e até gerar gráficos por você. - Automação Whatsapp Web com com Python: Guia Completo para Enviar Mensagens com PyWhatKit Você já imaginou programar o envio de mensagens com uma automação WhatsApp Web com poucas linhas de código?
- 30 Frases de Small Talk em Inglês: Tenha Conversas Naturais em Inglês Domine o Small Talk em Inglês com 30 frases práticas para conversas rápidas. Aprenda a pronúncia, os usos e dicas para falar com mais naturalidade.
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.