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.

Legacy vs. Modern Range Syntax: Side-by-Side

Every legacy min- and max- prefix query has a direct range-syntax equivalent, and the modern form adds exclusive bounds the old syntax never had.

How Exclusive Operators Fix the 1px Breakpoint Overlap

Legacy min- and max- prefixes are both inclusive bounds. That creates a classic bug: at a viewport of exactly 768px, both (max-width: 768px) and (min-width: 768px) match, so mobile and desktop rules apply at the same instant and the winner depends on source order. The ecosystem workaround was to subtract a fraction from the upper breakpoint, which is why frameworks like Bootstrap write (max-width: 767.98px), choosing 0.02px over a full 1px so fractional viewport widths between 767px and 768px do not fall through the gap.

Exclusive operators make the hack unnecessary. Writing (width < 768px) and (width >= 768px) partitions the viewport cleanly: every width matches exactly one of the two rules, with no overlap and no fractional magic number.

/* Legacy: both rules match at exactly 768px - overlap bug */
@media (max-width: 768px) { /* mobile styles */ }
@media (min-width: 768px) { /* desktop styles */ }

/* The old workaround: subtract 0.02px from the upper bound */
@media (max-width: 767.98px) { /* mobile styles */ }
@media (min-width: 768px)    { /* desktop styles */ }

/* Modern: exclusive < partitions cleanly, no hack needed */
@media (width < 768px)  { /* mobile styles */ }
@media (width >= 768px) { /* desktop styles */ }

If you are standardizing your breakpoint scale while migrating, our guide to common CSS breakpoints covers the values most production sites use.

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.

How do you use range syntax in production today?

With Baseline Widely Available status since September 2025, the honest 2026 guidance is to write range syntax natively and treat a build-time transform as an optional fallback, not a default requirement. A transform is only justified when your audience includes Safari or iOS below 16.4 (devices stuck on iOS 15 and earlier), Chromium below 104 (old Android WebView or enterprise fleets), or similar legacy long-tails. One nuance worth knowing: Firefox shipped feature-first comparisons like (width > 500px) back in Firefox 63, but full interval forms like (400px <= width <= 700px) required Firefox 102, so audit which form your stylesheet uses if you support old Firefox ESR builds.

When you do need the fallback, use PostCSS. The maintained plugin is @csstools/postcss-media-minmax, and the simplest path is postcss-preset-env, which includes that transform by default as the media-query-ranges feature and applies it only when your browserslist actually contains a browser that needs it. Avoid the older unscoped postcss-media-minmax package, which has not shipped a release since January 2021 and has been superseded by the @csstools fork.

/* You write modern range syntax: */
@media (400px <= width <= 1000px) {
  .card {
    padding: 24px;
  }
}

/* The PostCSS transform outputs legacy syntax for old browsers: */
@media (min-width: 400px) and (max-width: 1000px) {
  .card {
    padding: 24px;
  }
}

The transform maps >= and <= directly onto min- and max- prefixes, so it covers inclusive bounds perfectly. Exclusive bounds like (width < 768px) compile to fractional values such as (max-width: 767.98px), the same 0.02px step Bootstrap uses, which restores the very hack the syntax was designed to remove, but only in the legacy output that old browsers see. Your source stays clean.

Range syntax pairs naturally with the rest of the modern responsive toolkit: viewport breakpoints for page-level layout, and CSS container queries for component-level responsiveness. For choosing the breakpoint values themselves, see media queries for standard devices.

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