CSS Range Style Queries: style(--progress > 50%)
Range style queries without multiple blocks
Testing custom property ranges used to require multiple @container style() blocks or JavaScript comparisons. Range style queries let you write numeric comparisons directly: style(--progress > 50%).
/* Multiple discrete checks */@container style(--progress: 0%) { .bar { background: red; }}@container style(--progress: 25%) { .bar { background: orange; }}@container style(--progress: 50%) { .bar { background: yellow; }}/* ... repeat for every threshold *//* Or use JavaScript to set classes *//* based on the numeric value */@container style( /* [!code ++] */--progress > 75% /* */) { .bar { background: var(--green); }}style query range syntax Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Numeric ranges
Compare custom property values with >, <, >=, <=. No need to enumerate every possible value.
Progress-based styling
Perfect for progress bars, sliders, and meters. Style changes at thresholds without JavaScript.
Combinable
Use 'and' to create ranges: style(--x > 25%) and style(--x <= 75%). Clean, readable thresholds.
How it works
Style queries (@container style()) landed with equality checks: you can test style(--theme: dark). But for numeric values like progress, temperature, or scores, you had to write separate blocks for each discrete value, or fall back to JavaScript for range-based class toggling.
Range style queries add comparison operators to style queries. You write @container style(--progress > 75%) to match any value above 75%. Combine ranges with and: style(--progress > 25%) and style(--progress <= 75%). This enables pure CSS progress bars, data visualizations, and state-dependent styling without any JavaScript.