📝 CSS-Tricks 285: The Year of the Container Query

[Robin]: My hunch is that 2022 will be The Year of the Container Query. Everyone’s excited about them, and for good reason: this new and fancy addition to CSS makes a component respond to whatever container they’re placed in. For the first time ever we’ll be able to create truly isolated components that can shrink and expand depending wherever you put them, like this:

See how this weather component has entirely changed because it’s in a sidebar? That’s the power of container queries right there.

Although there’s no word when they’ll ship in browsers yet, it seems like they’re gathering steam in the community and they’re an official draft spec now. I have a feeling that container queries are going to move fast and ship in browsers pretty darn quickly (although this is just a hunch).

But the big news of the week here is that Surma made a polyfill—a chunk of code that lets other code work on older browsers—and it rather magically allows us to use container queries today!

To get started, we first need to load the script:

// Test if container queries are supported already by the browser const supportsContainerQueries = "container" in document.documentElement.style; // If not, load the polyfill if (!supportsContainerQueries) { import("https://cdn.skypack.dev/container-query-polyfill"); }

(Although I would probably just download the polyfill and throw it in here instead of making another request to a CDN that can break, this is just a quick example.)

Next up, we can write our HTML…

<div class="weather-wrap"> <dl class="weather"> <!-- the rest of our component markup goes here --> </dl> </div>

We need that extra div of .weather-wrap to apply our container query logic to. Now, we can apply our styles that “activates” the container:

.weather-wrap { container-type: inline-size; container-name: weather-wrapper; }

Two new CSS properties here. Fear not!

When we say container-type: inline-size that translates to “I want this container query to be used on the inline axis (so for English-speaking languages that means left/right or perhaps you can think of this as width). inline-size is an odd thing that I’m still trying to get my head around (more on that in a future newsletter).

container-name on the other hand is telling the browser that we want to refer to this query as weather-wrapper elsewhere in our CSS, like this:

.weather { display: flex; } @container weather-wrapper size(max-width: 700px) { .weather { flex-direction: column; } }

The way I think about it is prep work first: tell the browser you want a wrapper that acts as a container query, then somewhere else in your CSS you can give it instructions. It’s a bit weird but not too weird and unfamiliar. If you squint at the code above it does look odd but you can read it and parse it, even if you’ve never seen anything like it before. And that’s neat!

If you’re interested in reading more about this polyfill then I’d recommend checking out Bramus’s post on the matter since it clarified a few things for me.

This polyfill is so exciting because it makes something that has been theoretical for such a long time suddenly tangible, real. You can go and use them today! And sure, it’s not perfect, but holy hot dang mackerel we have container queries in browsers!

(Almost.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s