Is it safe to use grouped media queries?

Question

Is it safe to use grouped media queries?

Navigation

#1 by (3 votes)

3

All the topics I have found in relation to media grouped queries are for a few years.

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

Does any browser that supports CSS3 fully support grouped media queries? Or would not that 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;
        }
    }
}

css css3 media-queries

asked by anonymous 17.12.2017 / 17:57

1 answer

Remove accents - [\\ p {InCombiningDiacriticalMarks}] vs [^ \\ p {ASCII}] How to change the background of the JTable header without removing the border?

score 3 · Accepted Answer

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

link

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 for @means of different types

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

In the site www.caniuse.com you can consult and see that only IE does not accept Nesting

link

IalsosuggestreadingtheMozilladocumentation

link

And here's a Media Queries with Sass article that can be useful to you too

link