Nesting CSS @supports and @media queries

Question

I have been trying to figure out whether it's possible to nest CSS feature queries (also known as “CSS @supports”) and regular media queries, and what would be the correct way to do it.

Example A shows the feature query inside the media query.
Example B shows the media query inside the feature query.

Is it even possible to nest them at all? If so, is there a preferred nesting style? A or B?

.foo {     background: red; }  /* EXAMPLE A */ @media (min-width: 50em) {     .foo {         background: green;     }      @supports (flex-wrap: wrap) {         .foo {             background: blue;         }     } }  /* EXAMPLE B */ @supports (flex-wrap: wrap) {     .foo {         background: green;     }      @media (min-width: 50em) {         .foo {             background: blue;         }     } } 

Answer 1

Both examples are valid CSS according to section 3 of the spec, and for the time being they seem to be consistently supported by browsers that understand both @supports rules and nested @media rules (also new to CSS3).

Although both examples will only apply the background: blue declaration when both the @media and @supports conditions are met,

• A will apply either background: green or background: blue if and only if the (min-width: 50em) media query is met;
• B will apply either declaration if and only if the browser understands @supports and supports flex-wrap: wrap.

Since your two examples mean subtly different things, which one you choose will depend on your use case:

• If you do not want browsers that don't support @supports or flex-wrap: wrap to see either declaration, and to instead always apply background: red, choose B.
• Otherwise, if you want any browser (that understands media queries anyway) to apply background: green at the specified viewport width, even if it will never apply background: blue due to not supporting @supports or flex-wrap: wrap, choose A.