Range syntax for style queries | Frontend Practical Guide

Overview

The @container style() CSS at-rule and if(style()) CSS function queries accept a range syntax, such as >, <, >=, <=, to query for inexact values.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.at-rules.container.style_queries_for_custom_properties.range_syntax` Experimental	142	142			142
CSS type
`style.range syntax` Experimental Range syntax for style queries	142	142			142

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

@container style(--priority > 3) {
  .item {
    font-weight: bold;
    color: red;
  }
}

CSS Priority > 3 (high) demo.

CSS Priority = 3 (middle) demo.

CSS Priority < 3 (low) demo.

Component layout
Use Range syntax for style queries to create more predictable spacing and placement inside reusable UI patterns.
Responsive structure
Adapt containers and flow rules so layouts stay stable across viewport changes.

Test layout rules with real content, long labels, and small screens before depending on them broadly.
Prefer simpler layout primitives if they already solve the problem clearly.