So, say we want to apply certain CSS styling to a printed document:<\/p>\n\n\n\n
@media print {\n .element {\n \/* Style away! *\/\n }\n}<\/code><\/pre>\n\n\n\nThe 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<\/a>. If the browser\u2019s 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.<\/p>\n\n\n\n\/* When the viewport width is at least 30em... *\/\n@media screen and (min-width: 30em) {\n .element {\n \/* Style away! *\/\n }\n}<\/code><\/pre>\n\n\n\nNotice the and<\/code> in there? That\u2019s an operator that allows us to combine statements. In that example, we combined a condition that the media type is a screen<\/code> and that it\u2019s min-width<\/code> feature is set to 30em<\/code> (or above). We can do the same thing to target a range of viewport sizes:<\/p>\n\n\n\n\/* When the viewport width is between 30em - 80em *\/\n@media screen and (min-width: 30em) and (max-width: 80em) {\n .element {\n \/* Style away! *\/\n }\n}<\/code><\/pre>\n\n\n\nNow those styles apply to an explicit range of viewport widths rather than a single width!<\/p>\n\n\n\n
But the Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators \u2014 things like <<\/code>, ><\/code>, and =<\/code> \u2014 that make more sense syntactically while writing less code.<\/p>\n\n\n\nLet\u2019s dig into how that works.<\/p>\n\n\n\n\n\n\n
New comparison operators<\/h3>\n\n\n
That last example is a good illustration of how we\u2019ve sort of \u201cfaked\u201d ranges by combining conditions using the and<\/code> operator. The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:<\/p>\n\n\n\n<<\/code> evaluates if a value is less than<\/strong> another value<\/li>><\/code> evaluates if a value is greater than<\/strong> another value<\/li>=<\/code> evaluates if a value is equal<\/strong> to another value<\/li><=<\/code> evaluates if a value is less than or equal t<\/strong>o another value<\/li>>=<\/code> evaluates if a value is greater than or equal t<\/strong>o another value<\/li><\/ul>\n\n\n\nHere\u2019s how we might\u2019ve written a media query that applies styles if the browser is 600px<\/code> wide or greater:<\/p>\n\n\n\n@media (min-width: 600px) {\n .element {\n \/* Style away! *\/\n }\n}<\/code><\/pre>\n\n\n\nHere\u2019s how it looks to write the same thing using a comparison operator:<\/p>\n\n\n\n
@media (width >= 600px) {\n .element {\n \/* Style away! *\/\n }\n}<\/code><\/pre>\n\n\nTargeting a range of viewport widths<\/h3>\n\n\n
Often when we write CSS Media Queries, we\u2019re creating what\u2019s called a breakpoint<\/dfn> \u2014 a condition where the design \u201cbreaks\u201d and a set of styles are applied to fix it. A design can have a bunch of breakpoints! And they\u2019re usually based on the viewport being between two widths: where the breakpoint starts and where the breakpoint ends.<\/p>\n\n\n\nHere\u2019s how we\u2019ve done that using the and<\/code> operator to combine the two breakpoint values:<\/p>\n\n\n\n\/* When the browser is between 400px - 1000px *\/\n@media (min-width: 400px) and (max-width: 1000px) {\n \/* etc. *\/\n}<\/code><\/pre>\n\n\n\nYou 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<\/code> operator in favor of the new range comparison syntax:<\/p>\n\n\n\n@media (400px <= width <= 1000px) {\n \/* etc. *\/\n}<\/code><\/pre>\n\n\n\nMuch easier, right? And it\u2019s clear exactly what this media query is doing.<\/p>\n\n\n
Browser support<\/h3>\n\n\n
This improved media query syntax is still in its early days at the time of this writing and not as widely supported at the moment as the approach that combines min-width<\/code> and max-width<\/code>. We\u2019re getting close, though! Safari is the only major holdout at this point, but there is an open ticket for it<\/a> that you can follow.<\/p>\n\n\n
![\"A](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/range-query-layout-full.jpg?resize=1600%2C948&ssl=1\")
<\/figure>\n\n\n\n![\"Side-by-side](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/VtDSolCP.jpeg?resize=800%2C479&ssl=1\")
<\/figure>\n\n\n\n