WPT details: https://wpt.fyi/results/css/css-conditional/container-queries/at-container-style-parsing.html https://wpt.fyi/results/css/css-values/if-conditionals.html https://wpt.fyi/results/css/css-conditional/container-queries/query-evaluation-style.html https://wpt.fyi/results/css/css-values/attr-security.html
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); }