Yes, you can, and it doesn’t really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
This works:
@supports(--a: b) {
@media (min-width: 1px) {
body {
background: red;
}
}
}
And so does this, the reverse nesting of the above:
@media (min-width: 1px) {
@supports(--a: b) {
body {
background: green;
}
}
}
You can keep going with the nesting, if it ever makes sense:
@media (min-width: 2px) {
@media (min-width: 1px) {
@supports (--a: b) {
@supports (display: flex) {
body {
background: pink;
}
}
}
}
}
There is probably a point where the logic of that gets out of hand, so careful. But hey, it works. Presumably, you can “infinitely” nest at-rules.
To look at nested code like that looks a little like a CSS preprocessor is in use, but that’s not the case here. Regular ol’ CSS handles this just fine, and in fact, CSS preprocessors don’t meaningfully manipulate it at all (tested Sass, Less, and Stylus).
Nested media queries don’t work on any version of Internet Explorer.
I recently had a weird issue where a media query wrapped in an @supports would not work on the production version of a site, it was fine on localhost. I switched it around so it was an @supports wrapped in a media query and it was fine. No idea why!