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%).
2 --progress > 75%
3) {
4 .bar {
5 background: var(--green);
6 }
7}
2@container style(--progress: 0%) {
3 .bar { background: red; }
4}
5@container style(--progress: 25%) {
6 .bar { background: orange; }
7}
8@container style(--progress: 50%) {
9 .bar { background: yellow; }
10}
11/* ... repeat for every threshold */
12
13/* Or use JavaScript to set classes */
14/* based on the numeric value */
Browser Support for Style query range syntax
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
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.