LGTM3, contingent on a good answer to Anders' concern. Let's only ship when we've got high confidence.
Best, Alex On Tuesday, August 12, 2025 at 12:09:35 AM UTC-7 Anders Hartvoll Ruud wrote: > On Wed, Aug 6, 2025 at 1:41 PM 'Munira Tursunova' via blink-dev < > blink-dev@chromium.org> wrote: > >> Contact emailsmoon...@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 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 >> > > 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 >> <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 blink-dev+unsubscr...@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 >> >> <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 blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/9e827773-2a12-4f7a-9ba5-cbc56b9fb2d5n%40chromium.org.
