When container queries first arrived in 2022, their significance was not immediately apparent to everyone. Questions arose about the necessity of container size queries when media queries were already available, and the utility of container style queries given that custom properties inherit (though they do not yet work with standard properties). Their initial use cases seemed to replicate existing functionalities in a different manner.
Here is a demonstration of container size queries by Kevin Powell. It is worth noting that all major browsers support size queries in this example, but other demonstrations in this article might require the latest Chrome.
A demonstration of container style queries, utilizing the new range syntax:
More recently, additional types of container queries have emerged.
Container Scroll-State Queries
Container scroll-state queries introduced unique capabilities, allowing detection of whether a container is scrollable, snapped to a scroll target, or has ‘position: sticky’ and is currently ‘stuck’. As of this writing, Chrome has announced scrolled support, which differs slightly from scrollable.
A demonstration of container scroll-state queries by Geoff Graham:
And there are even more developments.
Anchored container queries
The latest feature in container queries is anchored container queries. These enable querying fallback positions. For instance, if a tooltip caret is anchor-positioned to the left of a tooltip, but insufficient space requires flipping the tooltip to the opposite side using ‘position-try-fallbacks: flip-inline’, an anchored container query can detect this flip. This allows the tooltip caret to also be flipped to the opposite side of the tooltip, maintaining visual consistency.
What else?
This raises the question: what are the full capabilities of container queries? With dozens of media queries available, it is worth considering if container queries could also expand significantly. What potential applications could they have?
Get any computed value
Recent explorations into methods for obtaining and utilizing CSS property values highlighted container size queries, as they unlock container query units. Developers might even define a wrapper element as a container solely to access these units.
<parent> {
/* Gimme container query units! */
container-type: inline-size;
<child> {
width: 100cqi;
}
}While container queries might have a verbose syntax for simply retrieving values, their versatility is evident. As an alternative, a CSS function named ‘compute()’ was suggested. This function could allow developers to retrieve a property’s value from another element, for example:
<parent> {
<child> {
/* Computed height of <child> */
property: compute(height, self);
/* Computed height of the parent */
property: compute(height, inherit);
/* Computed height of #abc element */
property: compute(height, #abc);
}
}Such a function would eliminate the need for a container size query just to use its container query units and would apply to all properties. Furthermore, a container size query would not provide the un-computed declared value that was originally typed. For this, the ‘inherit()’ function has been proposed, and Roma demonstrates its use in Chrome Canary.
The keyword approach is also appealing, with a desire for more keywords similar to currentColor (e.g., currentBackgroundColor has been proposed).
Extending container queries to retrieve the value of any CSS property would offer immense flexibility, making the ability to pass properties and values between elements highly desirable.
Query any CSS property
This capability has been considered since container style queries were first proposed, though its arrival date remains uncertain. This enhancement to container style queries would allow querying the (un-computed/declared) value of any CSS property, not just custom properties (though retrieving and using these values might not be possible, as far as current understanding goes).
Does querying any CSS property render other container queries redundant? Not entirely.
Container scroll-state queries detect snapping and stickiness, states for which no pseudo-classes currently exist (though perhaps they should). They also detect scrollability, as ‘overflow: scroll’ or ‘overflow: visible’ only indicates permission to scroll, not actual content overflow. Anchored container queries, on the other hand, do not query the ‘position-try-fallbacks’ value; instead, they detect when, for example, the position-area is flipped.
These specialized queries perform distinct functions, meaning the upgrade for container style queries will not replace them. It is plausible that numerous new container query features could be introduced to the web in the coming years.
So, what else could container queries do?
Even before container queries became a reality, many innovative ideas were put forth. Some of these concepts eventually materialized as container queries, while others remain promising ideas that have not yet been implemented.
- Adam Argyle suggested several interesting functionalities that later became scroll-state queries. Additionally, he proposed querying whether an element is on-screen, wrapping, or ellipsing, which would be valuable additions.
- Adam also suggested the ability to count child nodes, an idea that evolved into ‘sibling-count()’ and ‘sibling-index()’, though a container query approach is still desired.
- Similarly, Matthew Dean noted that some container queries could also be implemented as pseudo-classes, a point of agreement. Matthew further proposed that container queries could detect if a flex container is wrapped, and determine the row/column within a flexbox or grid container.
These ideas are likely to be realized eventually, either as container queries or through alternative syntaxes. A prediction for 2026 is that container queries will become a dominant force in web development.
What other functionalities would be beneficial for container queries?
References
- Learn container queries with interactive examples (Ahmad Shadeed)
- Detect fallback positions with anchored container queries from Chrome 143 (Una Kravets)
- Play With Inherit Function (Roma Komarov)
- On Inheriting and Sharing Property Values (Daniel Schwarz)
- Browser support for current and future container queries (CanIUse)
