Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns.
And, if you missed it, his latest post on container queries does a wonderful job covering how they work since landing in Chrome 105 this month (we’ll see them in Safari 16 soon). Some choice highlights and takeaways:
container-type
property. Previous demos and proposals had been using contain
instead.@media (min-width: 600px) {}
, we have @container (min-width: 600px) {}
. That should make converting many of those media queries to container queries fairly straightfoward, minus the work of figuring out the new breakpoint values.container-name: blockquote
).Great job, Ahmad! And thanks for sharing!
To Shared Link — Permalink on CSS-Tricks
iShadeed’s Container Queries Lab originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
This is the 3rd post in a small series we are doing on form accessibility.…
This is going to be the 2nd post in a small series we are doing…
Hey all you wonderful developers out there! In this post we are going to explore…
Hey all you wonderful developers out there! In this post, I am going to take…
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…