The New CSS Media Query Range Syntax
So, say we want to apply certain CSS styling to a printed document:
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:
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
= — that make more sense syntactically while writing less code.
Let’s dig into how that works.
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:
Here’s how we might’ve written a media query that applies styles if the browser is
600px wide or greater:
Here’s how it looks to write the same thing using a comparison operator:
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:
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:
Much easier, right? And it’s clear exactly what this media query is doing.
Here’s a layout for that’s nicely suited for larger screens, like a desktop:
This layout has base styles that are common to all breakpoints. But as the screen gets narrower, we start to apply styles that are conditionally applied at different smaller breakpoints that are ideally suited for tablets all the way down to mobile phones:
To see what’s happening, here’s a how the layout responds between the two smaller breakpoints. The hidden nav list getting displayed as well as
title in the
main gets increased in
That change is triggered when the viewport’s changes go from matching one media’s conditions to another:
We’ve combined a few of the concepts we’ve covered! We’re targeting devices with a
screen media type, evaluating whether the viewport width is greater than or equal to a specific value using the new media feature range syntax, and combining the two conditions with the
OK, so that’s great for mobile devices below
768px and for other devices equal to or greater than
768px. But what about that desktop layout… how do we get there?
As far as the layout goes:
Assuming we’ve done our homework and determined exactly where those changes should take place, we can apply those styles when the viewport matches the
width condition for that breakpoint. We’re going to say that breakpoint is at
Have a play with it:
The bottom line: it’s easier to distinguish a comparison operator (e.g.
width >= 320px) than it is to tell the difference between
max-width using the
and operator. By removing the nuance between
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
max- is equivalent to using mathematical comparison operators:
Notice that neither is the equivalent of the
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
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
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
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
But that’s getting silly and overly complicated. That’s why the new media feature range syntax is a more appropriate approach:
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
If you need help creating a digital marketing strategy for your business, don’t hesitate to contact one of Digidude’s consultants.