[csswg-drafts] [css-conditional-5] comma-separated container query aren't supported on browsers (#11015)

Monknow has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-conditional-5] comma-separated container query aren't supported on browsers ==
According to [the spec](https://www.w3.org/TR/css-conditional-5/#example-b320e2d0), it should be possible to query multiple containers with different conditions using a comma-separated list:

> Using a single comma-separated [container query](https://www.w3.org/TR/css-conditional-5/#container-query), we can query multiple containers:
> 
> ```css
> @container card (inline-size > 30em), style(--responsive: true) {
>   /* styles */
> }
> ```
>
>The styles above will apply for an element inside either a container named "card" that meets the [inline-size](https://www.w3.org/TR/css-conditional-5/#descdef-container-inline-size) condition, or a container meeting the [style](https://www.w3.org/TR/css-conditional-5/#container-style-query) condition. 

However, it doesn't seem to work on any browser: https://codepen.io/monknow/pen/BaXQjpm?editors=0110 In the demo, all texts should have a different underline color applied by a container query.

Is there any awareness of this? The spec and most third-party documentation say it should be possible, so just curious to know if it's a bug, a feature to be shipped soon, or a misunderstanding on my end.

Thanks :)



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11015 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 9 October 2024 15:59:01 UTC