CSS 2.1では@mediaや@pageの子に@mediaや@pageがくることはない。それぞれ子にはルールセット、または宣言(declaration)しか取れないことが文法で決まっているからだ。CSS 3においてはConditional Rules Module Level 3での定義が採用されるため、ネストできる。仕様上は無限に、だ。
実際の利用例としては@mediaで@supportsをネストするか、その逆だろう。とにかくネストできるのか、そしてその限界はあるのかは知っておきたい。
View Demo: Nested Media Queries
ざっとテストしてみたところ、ネストを1000レベルしてもきちんと解釈できるようだ。Edge 15、Chrom 58、Firefox 53、Mobile Safari 10で確認できる。Mobile Safari 10では981から無効になるが、それは描画領域が980ピクセル(<meta name="viewport">が未設定の場合)だからに過ぎない。
Internet Explorer 11ではまったくネストできず、CSS 2.1相当の実装になっている。上記のように@supports絡みでの利用が主なはずなので、@supportsが実装されていないIE11では些末な問題だろう。@mediaを親にして書けば良いからだ。