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

If you liked this post, you might like these ones, too

  1. Easy horizontal and vertical centering in CSS

    🔥 A handy quick tip.

    Continue
  2. Flow CSS Utility

    🔥 A handy quick tip.

    Continue
  3. Create a responsive grid layout

    Even with no media-queries, we can create a flexible and powerful responsive layout.

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.