Container Queries are actually coming

Categories

After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.


It’s finally happening: container queries are actually coming! After years of us being told they can’t be done, last year saw a bit of movement in the right direction. This year, CSS legend, Miriam Suzanne (and others), has been working hard on getting things moving in the right direction and we can finally play with container queries in a browser.

Right now container queries are in a prototype stage and are only available in Chrome Canary. To enable container queries, go to chrome://flags and enable container queries in there.

A progressive enhancement approach permalink

Of course, this is the first place I concentrate: how can we use container queries right now, progressively? If the browser doesn’t understand some CSS, it’ll ignore it and carry on parsing the rest, so we can effectively use container queries today. Here’s how I would implement a card element.

This is a classic card with the classic design problem: how do you deal with the inevitable state where the card is not within a smaller parent element or a small viewport? We can use media queries, sure, but they aren’t very useful if the card were to find itself in multiple contexts—say, in a design system.

One quick and easy thing we can do is add a max-width, so if the card finds itself in big ol’ context, it at least doesn’t look awful.

Still, this is not ideal, but it’s certainly acceptable. It’s a minimum viable experience and will work absolutely fine.

Let’s push the boat out and use a container query, progressively. Firstly, let’s set the <main> element to be our container.

Code language
CSS
main {
  contain: layout inline-size;
}

This uses the existing contain property and helps the browser work with container queries in a performant way. Now that’s sorted, the .card can be enhanced with the all-important @container block.

Code language
CSS
@container (min-width: 40em) {
  .card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: unset;
  }

  .card h2 {
    font-size: 2.5rem;
  }

  .card__media {
    aspect-ratio: 1/1;
    flex-basis: 30%;
    flex-shrink: 0;
  }

  .card__media img {
    border-radius: 0.5em;
  }

  .card__content {
    padding: 0;
  }
}

What we’re doing here is very similar to a media query. When the container has a width equal to or great than 40em, we can change the layout of our card to better suit that extra space. We’re even leaning into aspect-ratio to make the image look better.

The above demo in a Canary browser so the container query works. The card now has an inline layout with flexbox

In Canary, the card now has a nice inline layout and a square image

This is handy as it stands, but the context I need container queries for the most is being able to apply these sort of UI changes and they just work regardless of what we stick in them.

The same card in a grid context which is either stacked or inline, depending on space

The card now responds to its containers dimensions

Take the above example. It’s a flexible layout that allows child elements to grow to fill space. No problem with container queries because we set the flex items to be the containers and the rules we set for the cards do the rest. Handy!

Finally, we can typeset in context permalink

Most importantly with container queries, we can set typography contextually! This for me is the most needed feature in design system implementations and why I constantly wish we had container queries. We can respond with media queries and set font sizes etc that way, but when you have no idea where an element will end up, this isn’t an ideal approach. Now we have container queries, we can make type adjustments that actually make sense a lot easier than before.

There’s more to come with fluid type too. A lot of fluid type methods—like the one I wrote about—rely on viewport units like vw to scale. It looks like we’re getting some container units with container queries too, so we will also be able to make fluid type work in context of a container, rather than on the viewport.

Code language
CSS
/* Before */
h1 {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  );
}

/* After */
h1 {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 5cw)),
    var(--fluid-type-max, 1.3rem)
  );
}

I’m just using a cw unit here which is totally not what it will be, but gives me something to talk about. This is how new all of this is! If you’re interested, there’s a discussion on units here.

Wrapping up permalink

Here’s all of the above, condensed into one handy demo. Play around with it and see what you can come up with.

There’s not loads of stuff to cover with container queries yet because the Chrome Canary implementation of them is effectively a prototype. It is great to finally see movement with container queries and actually use them in a browser. I’ll be covering them a lot on this site as they evolve because I’m pretty convinced that container queries will usher a new phase of web design as important as responsive web design.

For now, go and read Miriam’s proposal and explainer. She is really pushing things forwards with CSS, so always be keeping an eye on what she’s up to!

Also, notice that when you looked at the demos in a non-supporting browser, they looked fine? That’s progressive enhancement in action giving everyone a good experience and where support is available, an optimal experience. You should try it; you might like it 😉

Lastly, here’s a fun demo I made when I first got my hands on container queries.

Until next time, take it easy 👋

p.s I guess I can retire this sticker now.


Comments

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me