As part of reviewing this I was looking back at the Explainer <https://docs.google.com/document/d/1mbHBUR40jUBay7QZxgbjX7qixs5UZXkdL9tVwGvbmt0/edit?usp=sharing> and TAG review <https://github.com/w3ctag/design-reviews/issues/1045> for the CSS if() function, and saw that the TAG left some good feedback <https://github.com/w3ctag/design-reviews/issues/1045#issuecomment-2653010192> 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 On Wednesday, August 6, 2025 at 11:41:20 AM UTC-7 [email protected] wrote: > 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/925dc284-aa15-4f5e-adcd-84273091b79en%40chromium.org.
