The New CSS Media Query Range Syntax | CSS-Tricks

• Read original article here

The New CSS Media Query Range Syntax
Preethi Selvam on
Oct 31, 2022
Let’s put those CSS skills to work! Claim $50 in free hosting credit on Cloudways with code CSSTRICKS.
We rely on CSS Media Queries for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall into two camps: (1) the type of media that’s being used, and (2) a specific feature of the browser, device, or even the user’s environment.
So, say we want to apply certain CSS styling to a printed document:
@media print { .element { /* Style away! */ } }
The fact that we can apply styles at a certain viewport width has made CSS Media Queries a core ingredient of responsive web design since Ethan Marcotte coined the term . If the browser’s viewport width is a certain size, then apply a set of style rules, which allows us to design elements that respond to the size of the browser.
/* When the viewport width is at least 30em... */ @media screen and (min-width: 30em) { .element { /* Style away! */ } }
Notice the and in there? That’s an operator that allows us to combine statements. In that example, we combined a condition that the media type is a screen and that it’s min-width feature is set to 30em (or above). We can do the same thing to target a range of viewport sizes:
/* When the viewport width is between 30em - 80em */ @media screen and (min-width: 30em) and (max-width: 80em) { .element { /* Style away! */ } }
Now those styles apply to an explicit range of viewport widths rather than a single width!
But the Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators — things like , and = — that make more sense syntactically while writing less code.
Let’s dig into how that works.
New comparison operators
That last example is a good illustration of how we’ve sort of “faked” ranges by combining conditions using the and operator. The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:
< evaluates if a value is less than another value
> evaluates if a value is greater than another value
= evaluates if a value is equal to another value
= evaluates if a value is greater than or equal to another value
Here’s how we might’ve written a media query that applies styles if the browser is 600px wide or greater:
@media (min-width: 600px) { .element { /* Style away! */ } }
Here’s how it looks to write the same thing using a comparison operator:
@media (width >= 600px) { .element { /* Style away! */ } }
Targeting a range of viewport widths
Often when we write CSS Media Queries, we’re creating what’s called a
breakpoint
— a condition where the design “breaks” and a set of styles are applied to fix it. A design can have a bunch of breakpoints! And they’re usually based on the viewport being between two widths: where the breakpoint starts and where the breakpoint ends.
Here’s how we’ve done that using the and operator to combine the two breakpoint values:
/* When the browser is between 400px - 1000px */ @media (min-width: 400px) and (max-width: 1000px) { /* etc. */ }
You start to get a good sense of how much shorter and easier it is to write a media query when we ditch the Boolean and operator in favor of the new range comparison syntax:
@media (400px = 1000px) { /* Becomes a 12-column grid */ main { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 250px; } /* Places the .title on the grid */ .title { grid-row: 1; } /* Bumps up the font-size */ .title p { font-size: 7.75rem; } /* Places .images on the grid */ .images { grid-row: 1 / span 2; align-self: end; position: relative; } /* Displays the button */ .images .button { display: block; position: absolute; inset-block-end: 5rem; inset-inline-end: -1rem; } }
Have a play with it:
CodePen Embed Fallback
Why the new syntax is easier to understand
The bottom line: it’s easier to distinguish a comparison operator (e.g. width >= 320px) than it is to tell the difference between min-width and max-width using the and operator. By removing the nuance between min- and max-, we have one single width parameter to work with and the operators tell us the rest.
Beyond the visual differences of those syntaxes, they are also doing slightly different things. Using min- and max- is equivalent to using mathematical comparison operators:
max-width is equivalent to the = 320px)).
Notice that neither is the equivalent of the > or < operators.
Let’s pull an example straight from the Media Queries Level 4 specification where we define different styles based on a breakpoint at 320px in the viewport width using min-width and max-width:
@media (max-width: 320px) { /* styles for viewports = 320px */ }
Both media queries match a condition when the viewport width is equal to 320px. That’s not exactly what we want. We want either one of those conditions rather than both at the same time. To avoid that implicit changes, we might add a pixel to the query based on min-width:
@media (max-width: 320px){ /* styles for viewports = 321px */ }
While this ensures that the two sets of styles don’t apply simultaneously when the viewport width is 320px, any viewport width that fall between 320px and 321px will result in a super small zone where none of the styles in either query are applied — a weird “flash of unstyled content” situation.
One solution is to increase the second comparison scale value (numbers after the decimal point) to 320.01px:
@media (max-width: 320px) { /* styles for viewports = 320.01px */ }
But that’s getting silly and overly complicated. That’s why the new media feature range syntax is a more appropriate approach:
@media (width 320px */ }
Wrapping up
Phew, we covered a lot of ground on the new syntax for targeting viewport width ranges in CSS Media Queries. Now that the Media Queries Level 4 specification has introduced the syntax and it’s been adopted in Firefox and Chromium browsers, we’re getting close to being able to use the new comparison operators and combining them with other range media features besides width, like height and aspect-ratio