Web platform features explorer

Media query range syntax

The range syntax of CSS media queries allows you to use mathematical comparison operators such as <, >, <=, and >= to define a range of values for a media query. For example, (400px < width < 1000px) returns true if the viewport width is between 400px and 1000px.

Status

Baseline Widely Available (since 2025-09-27)

MDN documentation

Specifications

Browser support (view on caniuse.com)

  • Chrome 104 Released on 2022-08-02
  • Chrome Android 104 Released on 2022-08-02
  • Edge 104 Released on 2022-08-05
  • Firefox 102 Released on 2022-06-28
  • Firefox for Android 102 Released on 2022-06-28
  • Safari 16.4 Released on 2023-03-27
  • Safari on iOS 16.4 Released on 2023-03-27

Surveys

Usage (according to Chrome Platform Status)

~7.257% of page loads. More data at chromestatus.com.

Interop

Web Platform Tests (WPT)

View the latest WPT test results for this feature

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist