メディア・クエリーでは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
キーワードの後ろに空白文字があれば、適切な式として解釈される。