I don’t know about y’all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on David Baron’s proposal) but it was news in a late-March tweet from Una Kravets that they dropped in Chrome Canary 91.0.4459.0 behind the #enable-container-queries
flag in chrome://flags
.
![](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/05/chrome-canary-flags-css-container-queries.png?resize=735%2C290&is-pending-load=1#038;ssl=1)
So much about container queries has already been covered in so many places in such a short amount of time — and the specification isn’t even final! I’m just pleased as punch to see so much excitement about a CSS feature and wanted to bottle some it up. Chris also just to happened to be collecting a pile of links on the topic, so here’s a roundup of everything that’s crossed our desks.
Container Queries Explainer & Proposal
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/05/miriam-oddbird-container-explainer-1.jpg?resize=636%2C456&is-pending-load=1#038;ssl=1)
Miriam’s article is an excellent starting point to kick things off. This is sort of like the elevator pitch that introduces the idea while providing a bunch of examples and resources that are worth checking out.
Container Queries are actually coming
Andy Bell has wanted container queries as long as anyone. He wasted no time jumping into them with a card example of his own. And hey, he can finally retire his sticker.
Quite a bit, right? Before we sign off, Chris has a challenge for all of us he wanted to share:
A common refrain, from me included, has been that if we had container queries we’d use them for the vast majority of what we use media queries for today. The challenge is: look through your CSS codebase now with fresh eyes knowing how the
@container
queries currently work. Does that refrain hold up? Which media queries will you replace (once we reasonably can) and which ones have to remain? Blog that.