Container Queries Beyond Sizing

When container queries shipped in 2022, the immediate reaction for many developers was understandably muted. Size queries seemed to overlap with media queries, and style queries for custom properties appeared redundant given that custom properties inherit anyway. The practical use cases felt narrow, almost like solving problems we'd already solved differently.

That perception has shifted considerably. Today, container queries cover ground that media queries simply cannot touch, and the feature set keeps expanding in unexpected directions.

Scroll-State and Anchored Queries

Container scroll-state queries arrived with the ability to detect whether a container is scrollable, whether it's scroll-snapped to a target, or whether a position: sticky element is currently stuck. Chrome recently added scrolled support, which is distinct from scrollable — the latter merely indicates overflow potential, while the former confirms actual scrolling behavior.

The newest addition is anchored container queries, which detect fallback positions. Consider a tooltip caret anchored to the left side of a tooltip. If space runs out and the tooltip flips to the opposite side via position-try-fallbacks: flip-inline, an anchored container query can detect that flip and reposition the caret accordingly. This is state detection that no other CSS mechanism currently provides.

Retrieving Computed Values

Container size queries have become an indirect means of accessing container query units. Developers sometimes add wrapper elements or designate existing ones as containers purely to gain access to those relative units. It works, but the syntax is verbose for such a simple goal.

<parent> {
  /* Gimme container query units! */
  container-type: inline-size;

  <child> {
    width: 100cqi;
  }
}

An alternative proposal is a compute() function that would let you pull a property value from another element directly:

<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);
  }
}

That would eliminate the need to set up a container size query just to use its units, and it would apply to all properties, not just those exposed through container queries. Size queries also can't retrieve the un-computed declared value you actually wrote in the stylesheet. For that, the inherit() function has been proposed, and Chrome Canary already supports experimenting with it.

There's also appeal in the keyword approach — think more keywords like currentColor. A currentBackgroundColor keyword has already been proposed. Still, if container queries could expose the value of any CSS property, the ability to pass property values between elements would be a compelling feature on its own.

Querying Any Property

Container style queries were originally envisioned with a broader scope: querying the declared value of any CSS property, not just custom properties. That upgrade has been on the roadmap since the feature was first proposed, though there's no timeline for its arrival. Even then, it won't make other container query types redundant.

Scroll-state queries detect conditions that have no corresponding pseudo-classes — stickiness and scroll-snapping aren't queryable any other way. They also detect actual overflow, which overflow: scroll alone doesn't confirm; a container can be scrollable without its content overflowing. Anchored container queries similarly detect when a fallback position is actually applied, not just what the position-try-fallbacks value says.

What Might Come Next

Ideas for expanding container queries predate the feature itself. Several proposals from the CSS Working Group discussions have yet to materialize:

  • Adam Argyle suggested querying whether content is on-screen, wrapping, or showing ellipsis — ideas that partly evolved into scroll-state queries.
  • Argyle also proposed counting child nodes, which later became sibling-count() and sibling-index(), though the container query approach remains unrealized.
  • Matthew Dean noted that some container query use cases could alternatively be served by pseudo-classes, and suggested querying whether a flex container has wrapped and which row or column of a flexbox or grid layout an element occupies.

These proposals may eventually surface as container queries or take shape as entirely different syntax. Given the pace of development since 2022, the container query landscape a year from now could look very different from today's.