Thank you! https://github.com/w3c/csswg-drafts/issues/12236 > This is now specified <https://drafts.csswg.org/css-conditional-5/#style-container:~:text=a%20unitless%20zero%20must%20be%20treated%20as%20being%20a%20zero%2D%3Clength%3E%20when%20compared%20against%20a%20%3Clength%3E> and addressed in the implementation <https://chromium-review.googlesource.com/c/chromium/src/+/6874120>.
> 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 > <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. The TAG review is already closed <https://github.com/w3ctag/design-reviews/issues/1045>, but I sent pr with a modified explainer for if(): https://github.com/w3c/csswg-drafts/pull/12657. On Wed, Aug 13, 2025 at 5:08 PM Alex Russell <slightly...@chromium.org> wrote: > 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/CAAO7W_A6Px_REDVoszRMXKNNkLRbODrGsmJhJ7WoOAR2dLhAiQ%40mail.gmail.com.
