Responsive design and container queries? Oh my!

As it happens, the original “Responsive Web Design” article turned eleven this week. After hitting a milestone anniversary last year I wasn’t planning to write anything to commemorate it — how would one write a happy eleventh birthday post? — but quite a bit’s happened in the last year.¹ Namely, it looks as though container queries might finally become reality.

I’ve written about container queries before — twice before, in fact, because it’s the thing I’ve wished was available in CSS. As my designs have become more component-based, media queries have felt like an increasingly creaky tool. After all, using the shape of the viewport to determine how individual modules should change and adapt? It feels…weird.

That’s where container queries come in. Once they’re finished², they’ll allow us to look at how much space a given element has available to it, and then write rules to adapt that element accordingly. And thanks to the efforts of Miriam Suzanne, Nicole Sullivan, and many others, there’s an experimental implementation of container queries available in Canary, the nightly developer release of Google Chrome.

I’m just giddy about this.

Ahem. If you’d like to learn about container queries, well, you’re in luck! Ahmad Shadeed, Andy Bell, and David A. Herron have each written excellent overviews of how container queries work. Max Böck shared how they used container queries alongside web components. Of course, Stu Robson’s keeping a running list of container query articles, resources, and demos. And maybe most importantly for using container queries right now, Miriam’s written about using the @supports rule to test for container query support.

With responsive design turning eleven this week, all this (exciting!) activity around container queries has me wondering: how will container queries change responsive design? I don’t necessarily mean how it’ll reshape making a responsive layout — it certainly will — but rather, how it might redefine responsive design. Because ever since the original article, a responsive design’s been defined as a layout that uses flexible grids, flexible images, and media queries. Can we consider a flexible layout to be “responsive” if it doesn’t use any media queries, but only uses container queries?

(I know, this is a singularly academic and boring question. Also, I’m wildly fun at parties.)

This is just my personal opinion, mind you. But I’d be inclined to answer: yes, absolutely. That’s absolutely a responsive layout. When I’m defining “responsive design” to less technical folks, I don’t talk about fluid grids or media queries. Instead, I like talking about “a flexible layout — one that doesn’t have an ideal shape — that changes and adapts at different breakpoints.” So yeah, if you’re using container queries to provide those breakpoints — those points of adaptation and change? That feels pretty responsive to me. In fact, if I was writing the original article today, I’d probably define a responsive layout’s ingredients as fluid grids, flexible images, and some combination of media queries and/or container queries.

But as I said, that’s just my take. I wrote the original article, but I didn’t have any influence on what happened after that: the articles, the discussions, the new techniques, the redesigns that took the original idea in directions I never anticipated.

And that is, I think, the other thing I’ve been meditating on this week. When something like container queries comes along, there’s often an impulse to stamp it as heralding a new kind of responsive design — as if it’s a major point release, something markedly different than everything that came before. And I completely understand that.

But from where I sit, responsive design’s been something new almost constantly since that article came out. It was something new when Jon Hicks first responsively redesigned, which was the first responsive design I remember seeing in the wild; it was something new when The Boston Globe launched the first large-scale responsive redesign; it was something new when Trent Walton wrote about device-agnostic design; it was something new when the responsive images specification shipped; it’s something new each time Lynn Fisher releases another one of her responsive masterpieces; and so on, and so on.

The responsive work I do today is different than it was eleven years ago, much less one year ago. That’s not because of Grid, flexbox, Figma, or even container queries…or at least, that’s not simply because of them. The people in the responsive design community continually experiment and discuss — and each of those experiments, and each of those discussions, is another brick on the path we’re still walking. I remain, as ever, excited to see where it takes us next.