CSS Container Queries are now available in all major browsers. 🥳 With the release of Firefox 110 yesterday, the stable versions of Chrome, Safari, Edge, and Firefox all support them. There have been many major additions to CSS in recent years, but this one is definitely one of the most impactful game changers. Being able to use not only features of the browser viewport but the dimensions (or other characteristics) of individual containers to change our layouts will once more fundamentally change the way we create responsive and even more flexible layouts on the Web.
During work on the spec, the syntax for Container Queries changed several times. This is also why I held back on writing a longer post exploring container queries in the past. Now, however, the syntax for size queries and units is stable and you can start to use Container Queries in production. So make sure that you use the correct syntax – Miriam has written about this – and that you progressively enhance your layout, of course, so that people with older browsers (which will still be the majority of users for a little bit of time) get a solid baseline experience.
I personally can’t wait to use them more often from now on and I’m sure that if you keep your eyes open, opportunities to effectively apply container queries will surface everywhere, just as with :has(). And particularly because they work so well on smaller elements, I’m quite sure that there will be plenty of ways to also use them without breaking our layouts in older browsers.
And I also can’t wait to see all your demos and best practices emerge. 🎉
~
Here are a few fantastic posts and examples to get you started:
Day 56: container queries, by Manuel Matuzović
https://www.matuzo.at/blog/2022/100daysof-day56/
Use the Right Container Query Syntax, by Miriam Suzanne
https://www.oddbird.net/2022/08/18/cq-syntax/
A Primer On CSS Container Queries, by Stephanie Eckles
https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
CSS container queries are finally here, by Ahmad Shadeed
https://ishadeed.com/article/container-queries-are-finally-here/
A CodePen collection of container query examples by Miriam Suzanne
https://codepen.io/collection/XQrgJo
~
9 Webmentions
5 Reposts
3 Likes
ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.