What Else Might Container Queries… Question?

I’ll admit, when container queries first shipped again in 2022, I didn’t actually concentrate. I imply, why container measurement queries once we have already got media queries? Why container fashion queries when customized properties inherit anyway (they don’t work with normal properties… but)? Their use circumstances appeared like edge circumstances to me, enabling us to do issues that we might already do however otherwise.

Right here’s a container measurement queries demo by Kevin Powell. As a word, all main browsers assist measurement queries within the following demo, however different demos on this article might require the newest Chrome.

Container fashion queries (with the brand new vary syntax) demo by, uh, me:

And extra just lately, we’ve seen a pair extra kinds of container queries pop up.

Container Scroll-State Queries

Container scroll-state queries got here together with their distinctive capabilities — the power to seek out out whether or not a container is scrollable, or is scroll-snapped to a scroll goal, or has place: sticky and is ‘caught.’ Actually, as I’m penning this, Chrome introduced scrolled assist, which is a bit completely different to scrollable.

Container scroll-state queries demo by our very personal Geoff Graham:

And that’s not all we’ve received…

Anchored container queries

The most recent container question characteristic is anchored container queries, which allow us to question fallback positions. Think about that you simply anchor-position a tooltip caret to the left aspect of a tooltip, however then there’s no room to show the tooltip, so that you flip it to the alternative aspect of no matter triggers it utilizing position-try-fallbacks: flip-inline. Nicely, an anchored container question can detect when the tooltip place is flipped in order that we are able to additionally flip the tooltip caret to the alternative aspect of the tooltip.

What else?

So, it received me considering, how far can we actually go along with container queries? There are dozens of media queries now, so what if there have been dozens of container queries as properly? What might we use them for?

Get any computed worth

Just lately I used to be exploring the present and future strategies of getting the worth of a CSS property and utilizing it with one other property, and as you possibly can think about, container measurement queries had been talked about since they unlock container question items. I imply, have you ever ever added a wrapper aspect or outlined an current one as a container simply to entry container question items?

 {
  /* Gimme container question items! */
  container-type: inline-size;

   {
    width: 100cqi;
  }
}

Now, I don’t love container queries as a method of getting values as a result of the syntax generally is a bit long-winded for that (longer than the instance above, and measurement queries specifically are a bit quirky), however the truth that we are able to use them to perform a little greater than querying is testomony to how versatile they’re as a characteristic. Instead, I prompt a CSS operate known as compute(), the place for those who wished the peak of one thing (or the “one thing” of something), we might steal it from one other aspect like this:

 {
   {
    /* Computed peak of  */
    property: compute(peak, self);
    /* Computed peak of the mum or dad */
    property: compute(peak, inherit);
    /* Computed peak of #abc aspect */
    property: compute(peak, #abc);
  }
}

This could save us from having to implement a container measurement question simply to make use of its container question items, and would additionally apply to all properties. Moreover, a container measurement question wouldn’t assist us to amass the un-computed declared worth that we really typed out. For that, the inherit() operate has been proposed and Roma even reveals us the best way to use it in Chrome Canary.

So as to add, I actually just like the key phrase method and would like to see extra key phrases like currentColor (e.g., currentBackgroundColor has been proposed).

Nonetheless, if container queries may very well be prolonged to get the worth of any CSS property, I positively wouldn’t say no to that! The flexibleness to cross properties/values between components is approach too attractive.

Question any CSS property

This characteristic has really been on the slate since container fashion queries had been first proposed, however there’s no telling when it would arrive. This container fashion question improve will allow us to question the (un-computed/declared) worth of any CSS property as an alternative of simply customized properties (though you received’t be capable to ‘get’ and use these values, a minimum of so far as I do know).

Any CSS property? Uh, doesn’t that make all the different container queries redundant? Not fairly, no.

Container scroll-state queries detect snapping and stickiness, for which there are not any pseudo-classes — however possibly there ought to be? In addition they detect scrollability, since, for instance, overflow: scroll and overflow: seen doesn’t imply that the content material is definitely overflowing, solely that we’re allowed to scroll the container if it does. Lastly, anchored container queries don’t question the position-try-fallbacks worth, they detect when, for instance, the position-area is flipped.

So, you understand, they do an entire bunch of stuff, and that’s why this improve for container fashion queries received’t change them. In truth, I can completely see dozens of latest container question options hitting the net throughout the subsequent few years.

So, what else might container queries do?

Earlier than container queries had been even a factor, nice concepts had been being put ahead. In fact, a few of them really turned container queries whereas others are nonetheless simply that — nice concepts that haven’t gone wherever (once more…but?).

I’m assured that we’ll see these concepts realized sooner or later, both as container queries or as another syntax. Heck, because it’s December, I’ll make it my prediction for 2026: container queries will rule 2026.

What else do you need container queries to do?

References