Limited support Useful when Range syntax for style queries helps structure space, flow, or sizing without relying on brittle manual adjustments.

Range syntax for style queries

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

Layout

Browser support

Feature Desktop Mobile
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)

Syntax

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

Live demo

Priority > 3 (high)

CSS Priority > 3 (high) demo.

PreviewFullscreen

Priority = 3 (middle)

CSS Priority = 3 (middle) demo.

PreviewFullscreen

Priority < 3 (low)

CSS Priority < 3 (low) demo.

PreviewFullscreen

Use cases

  • 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.

Cautions

  • 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.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links