I don’t know about everyone, but my feeds are full of articles CSS container queries last weeks. The retention survey actually started as early as December Miriam Suzanne submitted the proposal (on Proposal by David Baron) but it was news in a late March tweet from Una Kravets that they fell in Chrome Canary 91.0.4459.0 behind
#enable-container-queries ticket in
So many container queries have already been processed in so many places in such a short amount of time – and the definition isn’t even final! I’m just glad to see so much excitement about the CSS feature and I wanted to bottle it up. Chris also said he occasionally collected a bunch of links on the topic, so here’s a summary of everything that has crossed our desktop.
Explanation and suggestion of container surveys
Miriam’s article is a great starting point to get started. This is kind of like elevator height, which introduces the idea and provides a set of examples and resources that are worth checking out.
Container Inquiries: A Quick Start Guide
David Herron jumps straight to the concept on the Oddbird blog, which fits because Miriam Suzanne also works there. This is a great introduction to container queries that get into syntax with an example that looks at a card component.
The idea of CSS container queries
Stephanie Eckles goes very deep into Smashing Magazine’s container surveys. I love that the article starts by saying which container queries will resolve before you switch to syntax and how.
Container inquiries are really coming
Andy Bell has wanted container surveys for as long as anyone. He didn’t waste time jumping on them with his own card example. And hey, he may eventually retire his sticker.
Say hello to container surveys
I always appreciate both the way Ahmed Shadeed explains things in the simplest way possible and the fact that his demons go beyond general examples and interesting use cases.
CSS container queries: first impression + introduction
OK, this is a scam since Bramus released this at the end of March. But it was really after this post when I started seeing others crash.
Next generation CSS: @container
Yes, CSS-Tricks was also added to the chat! So far, Una Kravets has my favorite presentation on container queries: a calendar that adjusts everything from font size to layout
Tank queries in network components
Max Böck does what I love best: take two ideas and crush them together! He made a constellation of a network component to present and integrate books
Component-level art direction with CSS Container Queries
Sara Soueidan shows how container queries can be used for live images, including
Pretty little, right? Before we sign out, Chris has a challenge for all of us that he wanted to share:
The general abstention, including from me, has been that if we had container surveys, we would use them for the most part in what we use media surveys today. The challenge is: Look at your CSS code information now with fresh eyes knowing how
@containerthe queries are currently running. Does this abstinence hold? Which media polls will be replaced (when we can reasonably) and which are left? Blog that.