メディア・クエリーのandキーワード周囲の空白文字

メディア・クエリーではandキーワードを使って、複数の式を組み合わせることが出来る。min-width等を使う式では括弧を使うので、それらをandキーワードで組み合わせる場合に周囲の空白文字は必要ないように思えるが、どうもないと解釈できないらしい。

Demo: Spaces around Media Queries' "and" Keyword

Internet Explorer 11とChrome 37、Firefox 31共に周囲の空白文字がないと、そのメディア・ブロックに書かれたルールセットが無視される。

仕様にはMalformed media queryの例として載っている。つまり空白文字がないと、CSS関数(url()など)が式で直接使えるようになった場合に、and()と解釈されてしまう可能性があることから、今から制限を加えているということのようだ。そのためデモの3番目のようにandキーワードの後ろに空白文字があれば、適切な式として解釈される。