New and Upcoming CSS: New ways to write media queries

In the past, we've had to write media queries that check for screen/device width as something like this.

This query checks if the screen has a minimum width of 768px

@media (min-width: 768px) {
  …
}

and this query checks if the screen is smaller than 768px

@media (max-width: 768px) {
  …
}

You can also combine tests to determine if the value you're testing is within two values.

@media
  (min-width: 800px)
  and
  (max-width: 1024px) {
  …
}

The new Media Queries spec explains the new syntax for media queries using ranges.

We can write the media queries using smaller or equal than. The new syntax for the query looks like this:

@media (width <= 768px) {
  …
}

The larger than query can use the larger or equal than:

@media (width >= 768px) {
  …
}

And the combined query can be rewritten like this. Width can be larger or equal to 800px and equal or smaller than 1024px.

@media (800px <=width <= 1024px) {
  …
}

The new syntax makes it cleaner and, to me, makes the meaning of the query clearer than it would be in the old syntax.

Notes and links #