On Wed, Aug 6, 2025 at 1:41 PM 'Munira Tursunova' via blink-dev < [email protected]> wrote:
> Contact [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 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 [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/CAKFBnUpVkZ7BO1bDUkQ96rLs6q%3DcKEqWFOesKsXr3o6cC5E8Dw%40mail.gmail.com.
