Media query range syntax
Newly available since 2023-03-27
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.
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
Developer signals
- State of CSS 2025: features/all_features question
- State of CSS 2024: features/all_features question
Usage (according to Chrome Platform Status)
~5.722% of page loads. More data at chromestatus.
Interop
- Included in Interop 2023
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist