Finalmente elas chegaram! Saiba o que são container queries e como elas mudam o jogo do Web Design Responsivo.
Web Design Responsivo mudou a maneira como a Web é feita e usada. Há muitos anos, sabemos que a Web deve ser feita para todos, independentemente do dispositivo que esteja sendo usado.
O advento das media queries certamente trouxe uma gama de ilimitadas possibilidades que, até então, não eram possíveis. Mas as media queries também têm suas limitações.
Agora, com container queries, praticamente tudo o que era bem difícil (ou impossível) de se fazer com CSS puro na Web é destravado!
Container queries permitem definir o estilo de elementos com base no tamanho de seu contêiner em vez do tamanho da viewport do navegador. E essa diferença é COLOSSAL.
Se, por exemplo, você tem um componente responsivo de card, agora ele pode ser estilizado baseado nas dimensões do container em que se encontra, adaptando-se ao elemento em que foi inserido, pouco importando o tamanho atual da viewport.
Já deu para ver que isso muda o jogo completamente, né? Agora, teremos Web Design Responsivo DE VERDADE.
Assista ao vídeo e veja na prática a implementação de um componente usando container queries.
✏️ CodePen
🌐 Container Queries na MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
🌐 Melhor artigo do momento sobre container queries (inglês)
https://ishadeed.com/article/say-hello-to-css-container-queries/
==========
Assine o canal! http://bit.ly/dpw-youtube
– Facebook: https://www.facebook.com/desenvolvweb/
– Instagram: https://www.instagram.com/desenvolvweb/
– Twitter: https://twitter.com/desenvolvweb
Conheça o blog desenvolvimento para web: https://desenvolvimentoparaweb.com/