New syntax for range media queries

Range media queries get a cleaner syntax

Range media queries are the backbone of responsive design — roughly 80% of sites that use media queries test for min or max viewport dimensions. The Media Queries Level 4 specification introduces a more concise syntax for these queries, and support is already available in Chrome 104, Edge 104, Firefox 102, and Safari 16.4.

Under the traditional syntax, testing a minimum viewport width looks like this:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

The Level 4 syntax replaces the min- prefix with a comparison operator, making the intent more direct:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Maximum-width queries follow the same pattern:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Streamlining range checks

The real benefit of the new syntax emerges when querying between two values. The old approach requires chaining two separate conditions — one for the lower bound and one for the upper bound:

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

With the Level 4 syntax, the tested feature (in this case width) sits directly between the two thresholds:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

This not only reduces verbosity, but also improves clarity. The min- and max- variants are inclusive — min-width: 400px matches a viewport of 400px or wider — whereas the comparison operators let you express boundaries precisely, reducing the chance of overlapping or conflicting queries.

For projects that must support older browsers, a PostCSS plugin can rewrite the new range syntax back into the legacy form during the build step.