Day 57: media queries: range syntax

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

With CSS Media Queries Level 4, it's possible to use mathematical comparison operators in media queries.

Instead of (min-width: 768px) you can now write (width >= 768px).

Before 

@media(min-width: 768px) {
  body {
    background-color: aqua;
  }
}

After 

@media(width >= 768px) {
  body {
    background-color: aqua;
  }
}

Before 

@media(min-width: 400px) and (max-width: 800px) {
  body {
    border: 40px dotted yellow;
  }
}

After 

@media(400px <= width <= 800px) {
  body {
    border: 40px dotted yellow;
  }
}

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS