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 Newly Available (since 2023-03-27)

This feature is expected to reach Baseline Widely Available status on: 2025-09-27

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

Developer signals

Usage (according to Chrome Platform Status)

~5.210% of page loads. More data at chromestatus.

Interop