Media Queries Level 4におけるキーワード周囲の空白文字

Media Queries Level 4の2014/06/05付けのWDでは、メディア特性を構成するための)(notandorの間にひとつ以上の空白文字が必須になった。この変化が気になるのはCSS最小化ツールを作っている人くらいか。通常は半角空白なり改行なりを挟んで書いているだろうと思われるので、気にする必要はなさそうだ。

Level 3までは閉じ括弧とキーワードの間は空白文字は不要だった。

@media (min-width: 100px)and (min-height: 100px) {}

このように)andキーワードの間に空白文字がなくても良く、バリデーターも実装も許可してくれる。Level 4からは空白文字が必須になる。

@media (min-width: 100px) and (min-height: 100px) {}

このようにandキーワードのにも空白文字を入れる。元々andキーワードのの空白はCSSにおける関数の表記法との兼ね合いのために許可されていない。

Whitespace must be present between a ')' character and a ‘not’, ‘and’, or ‘or’ keyword, and between a ‘not’, ‘and’, or ‘or’ keyword and a '(' character.

3 Syntax

仕様でもこのように明記されている。Level 3での曖昧さ(having no space between ‘and’ and the expression is not allowed)を排除したと考えると良さそうだ。


CSSWringでは特別扱いしていたのをしないようにして対応した。