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.
Learning resources on MDN
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