CSS range media queries get a deep-dive — and you can stop writing min-width/max-width pairs today
Ahmad Shadeed published a fresh deep-dive on CSS range media queries this week, and the short version is this: if you're still writing `@media (min-width: 400px) and (max-width: 900px)` you can stop. The shorthand `@media (400px <= width <= 900px)` has been supported across every major browser since 2023 and is now safe to use without a fallback.
Why the old syntax has always been annoying
The min-width/max-width pattern is technically correct but cognitively backwards. To say "this rule applies to tablet-sized viewports," you have to write the lower and upper bounds as two separate conditions joined by and. Reading the rule requires mentally unpacking which side is the floor and which side is the ceiling, and the comparison is implicit rather than visible.
Range syntax fixes both problems. You write the comparison the way math notation writes it, with the variable in the middle and the bounds on each side. There's no parsing step — the eye reads "viewport width is between 400 and 900" in one pass.
What the syntax actually supports
The full range syntax accepts <, <=, >, and >= comparisons. Single bounds work: @media (width >= 768px) is the new way to write @media (min-width: 768px). So do open-ended ranges: @media (height < 600px) matches anything below 600px. The syntax also works for any property with a numeric range — aspect-ratio, resolution, color-index — not just width and height.
Browser support is universal in modern engines. Chrome shipped it in version 104, Safari in 16.4, Firefox in 102. The only reason to avoid it is if your audience includes substantial traffic from Chrome below 104 or Safari below 16.4, which at this point means almost no one.
Practical migration
There's no need to refactor existing stylesheets — both syntaxes work side by side, and the old form isn't deprecated. The cleanest approach is to use the new syntax for new code and let the old syntax age out naturally. For teams that want to migrate aggressively, a search-and-replace across the codebase is a one-afternoon job.
The bigger win is in code review readability. A new engineer reading @media (400px <= width <= 900px) understands the intent in a second. The same engineer reading the min/max version spends three seconds parsing it. Multiply that by every responsive style rule in your codebase and the savings add up.