Intent to Ship: Range syntax for style container queries and if()

[Munira Tursunova]

Contact emails

moo...@google.com

Specification

https://drafts.csswg.org/css-conditional-5/#typedef-style-range

Summary

This feature enhances CSS style queries and the if() function by adding support for range syntax. This extends style queries beyond exact value matching (e.g., style(--theme: dark)). Developers can now use comparison operators (>, <, etc.) to compare custom properties, literal values (like 10px or 25%), and values from substitution functions like attr() and env(). For a comparison to be valid, both sides must resolve to the same data type. This is limited to the following numeric types: <length>, <number>, <percentage>, <angle>, <time>, <frequency>, and <resolution>. This allows for creating more dynamic components that adapt based on a range of inputs, not just predefined states. Examples: /* Compare a custom property against a literal length */ @container style(--inner-padding > 1em) { .card { border: 2px solid; } } /* Compare two literal values */ @container style(1em < 20px) { ... } /* Using style ranges in if() */ .item-grid { background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white); }

Blink component

Blink>CSS

Search tags

style-ranges, container-style-query, range-style-query, css-if, if

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1270)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/527)

Web developers: Positive (https://github.com/w3c/csswg-drafts/issues/8376) Positive feedback from developers in the original github issue.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

Should be inspectable in devtools like regular container style queries and css if() function (when it's supported), no additional support should be needed.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

css/css-conditional/container-queries/at-container-style-parsing.html css/css-values/if-conditionals.html css/css-conditional/container-queries/query-evaluation-style.html css/css-values/attr-security.html

Flag name on about://flags

CSSContainerStyleQueriesRange

Finch feature name

CSSContainerStyleQueriesRange

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/408011559

Estimated milestones

Shipping on desktop	141
Shipping on Android	141
Shipping on WebView	141

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5184992749289472?gate=5202176242352128

This intent message was generated by Chrome Platform Status.

[Mike Taylor]

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_C-QhZS3gg8ek39wZ8JKiuXHduDNk_Pnuur79_LevgDZg%40mail.gmail.com.

[Dan Clark]

As part of reviewing this I was looking back at the Explainer and TAG review for the CSS if() function, and saw that the TAG left some good feedback about the explainer. This addition of range syntax might not need a standalone explainer doc, but I think it would be useful to update that existing doc for `CSS if()` to include this range syntax and the developer motivation for it, along with the other suggestions from the TAG.

LGTM2 conditional on that.

-- Dan

[Anders Hartvoll Ruud]

https://github.com/w3c/csswg-drafts/issues/12236

Also: did you check if any other relevant issues have appeared lately?

 

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5184992749289472?gate=5202176242352128

This intent message was generated by Chrome Platform Status.

--

[Alex Russell]

LGTM3, contingent on a good answer to Anders' concern. Let's only ship when we've got high confidence.

Best,

Alex

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Munira Tursunova]

Thank you!

https://github.com/w3c/csswg-drafts/issues/12236

This is now specified and addressed in the implementation.

 

Also: did you check if any other relevant issues have appeared lately?

I haven't found any.

As part of reviewing this I was looking back at the Explainer and TAG review for the CSS if() function, and saw that the TAG left some good feedback about the explainer. This addition of range syntax might not need a standalone explainer doc, but I think it would be useful to update that existing doc for `CSS if()` to include this range syntax and the developer motivation for it, along with the other suggestions from the TAG.

The TAG review is already closed, but I sent pr with a modified explainer for if(): https://github.com/w3c/csswg-drafts/pull/12657.

 

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.