CSS Media Range Syntax: Browser Support, Operators

What is CSS Media Range Syntax?

CSS media range syntax is the range context defined in the W3C Media Queries Level 4 specification. It lets a CSS @media rule use the comparison operators <, <=, >, >=, and = on range-type features such as width, height, aspect-ratio, and resolution, replacing the older min- and max- prefix forms.

Which browsers does CSS media range syntax support?

CSS media range syntax works in every modern Chromium, Gecko, and WebKit release, with Internet Explorer as the only major engine that never shipped it. Global support sits above 93% of tracked browser usage.

What are the comparison operators in CSS media range syntax?

Range syntax exposes five comparison operators that map to the math symbols a developer already knows. Each operator works on any range-type media feature.

• Less than (<): matches when the feature value is strictly below the comparison value, for example (width < 600px) matches viewports up to 599 pixels wide.
• Less than or equal (<=): matches when the feature value is at or below the comparison value, equivalent to the older max- prefix form.
• Greater than (>): matches when the feature value is strictly above the comparison value, for example (width > 1024px) matches 1025 pixels and up.
• Greater than or equal (>=): matches when the feature value is at or above the comparison value, equivalent to the older min- prefix form.
• Equal (=): matches when the feature value matches the comparison value exactly, useful for resolution and aspect-ratio checks.
• Bounded range: wrap a feature with two operators, like (400px <= width <= 1000px), to test a min and max bound in one expression instead of chaining with and.

How do you write a CSS media range query?

Drop the new operators inside the parentheses of an @media rule. The rule body is identical to a classic media query, only the feature expression changes.

• Open an @media block: Start with @media followed by an optional media type, such as screen, then an opening parenthesis.
• Pick a range-type feature: Type a feature name like width, height, aspect-ratio, or resolution. Discrete features such as hover and orientation do not accept the new operators.
• Add a comparison operator: Choose <, <=, >, >=, or = and follow it with the value, for example (width >= 600px).
• Bracket a range when needed: For a min and max bound, wrap the feature with two operators, like (400px <= width <= 1000px), instead of chaining min-width and max-width with and.
• Confirm in DevTools: Open Chrome 104, Firefox 63, or Safari 16.4 DevTools, resize the viewport, and watch the matched rules in the Styles panel light up at the boundary value.

A common pattern looks like the snippet below, which combines a single-bound rule and a bounded-range rule on the same selector.

/* Single-bound rule: matches viewports 600px wide and up. */
@media (width >= 600px) {
  .card {
    padding: 24px;
  }
}

/* Bounded-range rule: matches 400px through 1000px inclusive. */
@media (400px <= width <= 1000px) {
  .card {
    border-radius: 12px;
  }
}

If a browser does not understand the new operators, the entire @media block is skipped, so always pair production-critical layout rules with a min-width or max-width fallback for older Safari and Android Browser builds.

Which media features support range syntax?

Range syntax only applies to features the spec marks as range type. Discrete features keep the equals-and-keyword form.

• Width and height: the most common pair, used for viewport breakpoints with (width >= 768px) and similar checks.
• aspect-ratio: match a viewport ratio with (aspect-ratio >= 16/9) for letterboxed layouts and split panes.
• resolution: serve high-density assets with (resolution >= 2dppx) for Retina, HiDPI, and 4K displays.
• color, color-index, monochrome: test color depth and palette size for grayscale e-readers and limited-color devices.
• device-width and device-height: the original device-screen features keep working with the new operators, although width and height are preferred for responsive layouts.
• Discrete features stay literal: orientation, hover, pointer, prefers-color-scheme, prefers-reduced-motion, and display-mode reject <, <=, >, and >=, since their values are keywords, not numbers.

What are the limitations of CSS media range syntax?

Range syntax is a clean win for modern browsers, but a small set of cross-engine quirks still bite real projects. The common pain points cover the Safari pre-16.4 gap, IE 11 fallbacks, sanitizer behavior, and Sass mixed-mode parsing.

• Safari shipped late: Safari 16.3 and earlier on macOS and iOS skip range syntax entirely, so a (width > 600px) rule has no effect on iPhones still on iOS 16.3. Pair critical layout rules with a min-width fallback or run a PostCSS transform.
• IE 11 has no fallback path: Internet Explorer never parsed the new operators. Projects that still serve IE 11 must keep min-width and max-width rules, since rule blocks that use range syntax are dropped on IE.
• Mixed Sass and CSS parsers can choke: Older Sass and PostCSS plugin chains parse <= and >= as boolean operators in interpolation contexts. Upgrade to Dart Sass 1.55+ and PostCSS 8.4+, or wrap the values in # interpolation.
• Discrete features still need keywords: orientation, hover, pointer, and prefers-color-scheme reject the new operators. Mixing range and discrete features in one query needs and chains, just like the legacy syntax.
• No partial fallback: when a browser fails to parse a range expression, the entire @media rule body is skipped, not the single rule. A typo in one feature kills every selector inside that block.
• Equal (=) is rarely useful: exact-match equality on width or height almost never matches a real viewport, so the = operator mostly applies to resolution and aspect-ratio rather than width.

In my experience, the trickiest production failure is the Safari 16.3 gap. A rule using (width >= 768px) renders perfectly in Chrome and Firefox, then silently drops on a tester's iPhone running iOS 16.2, and the bug looks like a CSS specificity issue. Always test the new syntax on real Safari builds before shipping.

Citations

All CSS media range syntax version numbers and platform notes in this guide come from these primary sources:

• W3C - Media Queries Level 4: w3.org/TR/mediaqueries-4
• MDN Web Docs - @media at-rule: developer.mozilla.org/en-US/docs/Web/CSS/@media
• MDN Web Docs - Using media queries: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using
• web.dev - New syntax for range media queries: web.dev/articles/media-query-range-syntax
• WebKit Blog - Safari 16.4 release notes: webkit.org/blog/13966
• Mozilla Hacks - CSS category: hacks.mozilla.org/category/css
• Chrome Platform Status - Media Queries 4 range: chromestatus.com/feature/5124753045913600
• Apple Developer - Safari Release Notes: developer.apple.com/documentation/safari-release-notes
• W3C - CSS Working Group: w3.org/Style/CSS
• Wikipedia - Media queries: en.wikipedia.org/wiki/Media_queries