Media query range syntaxBaseline · Widely available
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.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 27, 2023. Widely available since Sep 27, 2025.
Browser support
DesktopChrome
1–103Not supported
104+Supportedsince Aug 2, 2022
Current: 155Edge
12–103Not supported
104+Supportedsince Aug 5, 2022
Current: 154Firefox
1–101Not supported
102+Supportedsince Jun 28, 2022
Current: 157Safari
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27MobileChrome Android
18–103Not supported
104+Supportedsince Aug 2, 2022
Current: 155Firefox Android
4–101Not supported
102+Supportedsince Jun 28, 2022
Current: 157Safari iOS
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN — see the links below.
Feature detection
There’s no simple runtime check for this feature; rely on the support table and test in your target browsers.