New Syntax to Set Width Ranges for Your CSS Media Queries

New syntax for range media queries

Photo by KOBU Agency on Unsplash

In almost ~80% of the website media queries are being used.

Here is a glimpse of how we use media query:

@media screen and (min-width: 400px) {
  // Screen width should be greater than 400px or equal to 400px
}
@media screen and (max-width: 400px) {
// Screen width should be less than 400px or equal to 400px
}

Sometimes this syntax doesn’t seem to look self exploratory specially if you are coming from JS or any other coding background.

With Chrome version 104 and Firefox 63 we have new syntax for using media queries.

Here let’s see the new syntax in action along side with its counterpart.

< width and < = width

@media (max-width: 300px) {
  // Viewports sizes with a width of 300px or less.
}
@media (width < 300px) {
  // Viewports sizes with a width less than 300px.
}
@media (width <= 300px) {
  // Viewports sizes with a width of 300px or less.
}

> width and > = width

@media (min-width: 400px) {
  // Viewports sizes with a width of 400 pixels or greater.
}
@media (width > 400px) {
  // Viewports sizes with a width greater than 400px.
}
@media (width >= 400px) {
  // Viewports sizes with a width of 400 pixels or greater.
}

Combining Multiple Size Ranges

@media (min-width: 600px) and (max-width: 800px)  {
 // Viewports sizes between 600px and 800px.
}
@media (width <= 600px) and (width <= 800px) {
 // Viewports sizes between 600px and 800px.
}

Better way for combining multiple media query ranges.

@media (min-width: 600px) and (max-width: 800px) {
  // Viewports sizes between 600px and 800px.
}
@media (600px <= width <= 800px )  {
  // Viewports sizes between 600px and 800px.
}

For the other browsers which do not support this syntax, there is a POST CSS plugin available for them.
POST CSS Plugin

Thanks for Reading :)