Media syntax rage, oh sorry range

You know media queries? Same old, same old… or not? Media Queries Level 4 spec includes some new stuff including syntax improvements with a range type. This is suppose to make media queries less verbose when using it with propeties like width or height.

It used to look like this.

@media (min-width: 600px) {
  .element {
  }
}
@media (min-width: 600px) and (max-width: 1000px) {
  .element {
  }
}

And now we have this, which is readable in a way we are more used to.

@media (width >= 600px) {
  .element {
  }
}
@media (600px <= width <= 1000px) {
  .element {
  }
}

A new way of thinking about it. Stay tuned for more media query stuff!