LGTM1
On 8/6/25 9:41 a.m., 'Munira Tursunova' via blink-dev wrote:
Contact emails
[email protected]
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
<https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22>
Search tags
style-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://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
<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
<https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_C-QhZS3gg8ek39wZ8JKiuXHduDNk_Pnuur79_LevgDZg%40mail.gmail.com?utm_medium=email&utm_source=footer>.
--
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/82070205-2aec-442e-964b-987e12ca9f52%40chromium.org.
