The Range Syntax Has Come to Container Style Queries and if() | CSS-Tricks

"The range syntax isn't a new thing. We're already able to use it with media queries to query viewport dimensions and resolutions, as well as container size queries to query container dimensions. Being able to use it with container style queries - which we can do starting with Chrome 142 - means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the function."

"Range syntax with custom properties In the next demo coming up, I've cut out the if() stuff, leaving only the container style queries. What's happening here is that we've created a custom property called --lightness on the #container. Querying the value of an ordinary property isn't possible, so instead we save it (or a part of it) as a custom property, and then use it to form the HSL-formatted value of the background."

Chrome 142 enables range-syntax comparisons inside container style queries and extends the capability to the if() function, allowing numeric comparisons between custom properties and literal values. A custom property such as --lightness can store a numeric value and be used inside hsl() for background color while being evaluated with expressions like style(--lightness < 50%). Container style queries can conditionally apply rules to descendants based on those comparisons. Ordinary property values cannot be directly queried, so values must be saved as custom properties. Both container style queries and the if() function support the same range-comparison behavior.

Read at CSS-Tricks