Hail2u

At規則のネスト

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を親にして書けば良いからだ。