Range syntax for style container queries and if()

concepts

1. Range Container Queries

   Slide --density and --scale custom properties — the card restyles whenever the value crosses a range threshold like style(--density >= 3).

2. if() Thermostat

   The other surface this work unlocks: the inline if() function with style-range comparisons in a single property value. A thermostat reading drives background and text colour with three branches, all in pure CSS.

3. Density Stepper

   Two custom properties feeding eight overlapping range rules. Slide --density and --temp; data-tile padding, type size, and background restyle as each value crosses a band — pure CSS, no JS class toggling.

4. CSS if() Playground

   Write if() expressions with range comparisons directly in a live CSS editor. Sliders drive the custom property values; the rendered card updates instantly. A syntax guide maps each comparison operator to its spec form, and a browser-support badge lights up when your engine parses the rule.

5. Priority Card

   A task card where --priority (1–10) and --score (0–100) custom properties drive colour, border weight, padding, and visible sections via range style container queries. @container style(3 <= --priority <= 4) matches the "high" band; no JavaScript class toggling — CSS range arithmetic handles every state transition.

why it shipped

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() a

references

• ChromeStatus entry
• Spec