Here’s a really smart approach to creating container queries today—it uses ResizeObserver to ensure that listening for size changes is nice and performant.
There’s a demo site you can play around with to see it in action.
While the strategy I outline in this post is production-ready, I see us as being still very much in the early stages of this space. As the web development community starts shifting its component design from viewport or device-oriented to container-oriented, I’m excited to see what possibilities and best practices emerge.
Everyone wants it, but it sure seems like no one is actively working on it.
Zach traces the earliest inklings of container queries to an old blog post of Andy’s—back when he was at Clearleft—called Responsive Containers:
For fun, here’s some made-up syntax (which Jeremy has dubbed ‘selector queries’)…
Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!
Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp() values, the clamp calculator has you covered.
It’s got permalinks too!
Container queries can’t be used in the sizes attribute for responsive images. Here, Jason breaks down why that is (spoiler: it’s the lookahead pre-parser) and segues into a truly long term solution: a “magical” image format.
If you’ve ever thought it felt weird to put media conditions inside the HTML for responsive images, this will resonate.
I feel like we need a name for this era, when CSS started getting real good.
I think this is what I’ve been calling declarative design.
The joy of getting hands-on with HTML and CSS.
Houdini to the rescue?
Don’t let the name distract you—progressive web apps are for everyone.
A CSS fix for sluggish tap responses on mobile.
Hats off to Graham.