Container Queries are coming to Chromium!

Just announced on the Chromium mailing list is an “Intent to Prototype” Container Queries, which is quite exciting news 🎉

🤔 Container Queries?

Container Queries allow authors to style elements according to the size of a container. This is similar to a @media query, except that it evaluates against a container instead of the viewport.

The experimental implementation will follow Miriam Suzanne’s proposal, which looks like this:

main,
aside {
  contain: size; /* (1) Create an implicit "container root" or "containment context" */
}

.media-object {
  display: grid;
  gap: 1em;
}

@container (max-width: 45em) { /* (2) When the nearest `contain: size` ancestor has a max-width of 45em … */
  .media-object { /* … apply these rules onto .media-object */
    grid-template: 'img content' auto / auto 1fr;
  }
}

Using contain: size (1) will create an implicit “container root” or “containment context” on that element. Elements contained inside it can then have container queries applied onto them, by use of a new at-rule @container (<container-media-query>) (2). The target selector and CSS rules to apply in that case are nested within the @container at-rule, just like we already do with other at-rules.

In the example above extra rules will be applied to .media-object whenever its nearest ancestor with size containment set — such as <main> or <aside> — has a max-width of 45em.

~

A previous version of this proposal by L. David Baron required a context selector to be set, but that has been dropped here. The @container rule from Miriam’s version will work in any containment context (read: the nearest parent element that has contain: size set). The syntax might still change, but that’s irrelevant to the prototype which is to be implemented:

This is not at all finalized, but the underlying problems we need to solve in Blink are (mostly) the same regardless of how the feature is accessed, so we’ll for now use this proposal as the temporary syntax.

~

Intent to Prototype: Container Queries →
Chrome Tracking Bug →

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)