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); }