CSS: is it safe to use nested media queries in 2016? [duplicate]

Question

All the threads I've found regarding nested media queries are a few years old.

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

Would any browser that supports CSS3 fully support nested media queries? Or would that not always be the case? In that case, which browsers do not support nested media queries?

EDIT:

Example of a nested media query 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

According to CanIUse, yes you're probably safe... Most of the unsupported browsers don't have a huge market share. But, if your audience is using any version of IE, it will break. This means much of Corporate America, Healthcare, Education, and Government will be out...

The catch is that I struggle to find beneficial use cases to support the need. Is there a better example of something that's a lot easier with nested queries?

Given your example code... (yes I understand it's just an example)

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

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

Is would give the same result as

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

@media screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5) {
       body {
           background-color: red;
       }
   }

The second version is barely more code. It's easier to read and follow. Likely easier to maintain down the road AND proven to work on most browsers.

Personally, the question of "can I...?" isn't as important as "should I...?". But only your specific situation will dictate if its a good idea or not.