Is it safe to use grouped media queries?

Question

All topics I found regarding media queries grouped are a few years.

With the wide range of CSS3, grouped media queries are now considered safe to use in production?

Do any browsers that support CSS3 fully support grouped media queries? Or would that not always be the case? In this case, which browsers do not support nested media queries?

Nested media query example for illustration:

@media screen and (min-width: 1024px) {
    body {
        background-color: blue;
    }

    @media (-webkit-min-device-pixel-ratio: 1.5) {
        body {
            background-color: red;
        }
    }
}

Answer 1

Bernardo Here’s a tip. By the W3C orientation it would be possible to use the nested @media. As you can see in the official documentation:

https://www.w3.org/TR/css3-conditional/#Processing

But to avoid problems with the Browser what you see is to use this way:

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
    /* seu CSS */
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) {
    /* seu CSS */
}

Here is another nesting option from @medias of different types

@media screen and (min-width: 35em),
       print and (min-width: 40em) {
  /* seu CSS */
}

At www.caniuse.com you can check and see that only IE does not accept Nesting

https://caniuse.com/#feat=css-mediaqueries

I also suggest reading the Mozilla documentation

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

And here’s an article on Media Queries with Sass that might be useful to you, too

https://css-tricks.com/approaches-media-queries-sass/ (in English)