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;
}
}
}
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,background: green
orbackground: blue
if and only if the(min-width: 50em)
media query is met;@supports
and supportsflex-wrap: wrap
.Since your two examples mean subtly different things, which one you choose will depend on your use case:
@supports
orflex-wrap: wrap
to see either declaration, and to instead always applybackground: red
, choose B.background: green
at the specified viewport width, even if it will never applybackground: blue
due to not supporting@supports
orflex-wrap: wrap
, choose A.