1795622 - [css-contain-3] Support style() container queries

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[Bramus]

Steps to reproduce:

Spec: https://drafts.csswg.org/css-contain-3/#style-container

Comment 1

[Bramus]

Spec still a draft right now. Filed this issue so there’s something to track across all vendors.

• Blink/Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1302630
• WebKit/Safari: https://bugs.webkit.org/show_bug.cgi?id=246605

Comment 2

[Woody Li]

Chrome has implemented style query of custom property values at version 111.
Webkit position is also supportive of the CSS variables use case: https://github.com/WebKit/standards-positions/issues/57#issuecomment-1691159042

Suggest to split the feature into variables usage and standard properties usage.
And Implement the CSS variables usage at first.
It maybe resolve some problems, even the another way for enviroment queries in shadow dom (Current supported with :host-context() in Chrome).

Comment 3

[Woody Li]

Update:
WebKit has enable Style queries by default WebKit/WebKit#24251

Comment 4

[Woody Li]

Safari 18 will enable it by default: https://developer.apple.com/documentation/safari-release-notes/safari-18-release-notes#CSS

Comment 5

[Arun Das]

Very very sad that this is not supported yet. (Along with a few others.)

Hope to get support for it soon, because I use it as part of a "scroll-triggered animations" hack. There's no workaround for it, I think.

PS: Nice to see you here Bramus!

Comment 6

[Woody Li]

CSS WG has resolved to drop :host-context(), and suggest using container style queries to replace its use cases.

So is it possible to raise it priority?

Comment 7

[Ana Tudor]

(In reply to Arun Das from comment #5)

Hope to get support for it soon, because I use it as part of a "scroll-triggered animations" hack. There's no workaround for it, I think.

There is no need for style queries for scroll-triggered animations. See this demo I made back in 2023.

---

For anyone itching to try style queries in Firefox, you can now set the layout.css.style-queries.enabled flag to true in about:config. I've just used it to set different pseudo content values depending on a computed modulo value and it worked.

Comment 8

[Takahiro Arai]

Hello. I enabled the layout.css.style-queries.enabled flag and gave it a try, but it seems that switching custom properties based on state changes doesn't respond correctly.

Here's a sample.
https://codepen.io/tak-dcxi/pen/GgpojbL

In both Chrome and Safari, switching custom properties on hover works as expected.

Comment 9

[Kaare Hoff Skovgaard]

Just wanted to drop by and state that I am also hoping for support for this to land in Firefox :)

I have tried setting the option layout.css.style-queries.enabled for my use-cases and that works without issues. I have found several use cases that I believe to be fairly nice (in a design system/component system use case)

1. By having every flex container be a named container and setting custom properties indicating flex-flow attribute, I can create semantic classes for stretching vertical/horizontal, that will do what the user would expect. It is especially nice here as this would require different properties to be set depending on the flex-flow property, which is nicely handled here.
2. Propagate information regarding the "size" of the current UI element being rendered, and make components that alter their size based on this. Of course this can be done by adding lots of custom properties indicating the size of various elements, but doing it this way I find much more composable.

In general I find it to be a nice way of passing "context" through the stylesheets much the same way as one would use context in react components, and style queries in container queries lets me avoid storing quite a bit of context in javascript and push it down to CSS instead.

I don't know if having these sorts of use cases are of value or not, hope it is not unwanted noise here.