Contact [email protected]
Specificationhttps://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 componentBlink>CSS
<https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22>
Search tagsstyle-ranges
<https://chromestatus.com/features#tags:style-ranges>, container-style-query
<https://chromestatus.com/features#tags:container-style-query>,
range-style-query <https://chromestatus.com/features#tags:range-style-query>
, css-if <https://chromestatus.com/features#tags:css-if>, if
<https://chromestatus.com/features#tags: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
<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>
?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://flagsCSSContainerStyleQueriesRange
Finch feature nameCSSContainerStyleQueriesRange
Rollout planWill ship enabled for all users
Requires code in //chrome?False
Tracking bughttps://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
<https://chromestatus.com/>.
--
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 [email protected].
To view this discussion visit
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_C-QhZS3gg8ek39wZ8JKiuXHduDNk_Pnuur79_LevgDZg%40mail.gmail.com.
