2011-12-03

不明なCSSセレクター

ブラウザーがCSSをパースする際、不明なセレクターに遭遇するとどうなると思いますか？　実はそのセレクターを含むルール全体が無視されます。何を当たり前のことを言っているんだと思われるかもしれませんが、そのルールが複数のセレクターを持っていて、そのうちひとつだけが不明なものだとしてもルール全体が無視されるということはあまり知られていないような気がします。知られていないというよりも意識する必要があまりなかったという方が近いですかね。

つまり以下のようなCSSコードは無意味です。

:-moz-any(article, aside, nav, section) h1,
:-webkit-any(article, aside, nav, section) h1,
:matches(article, aside, nav, section) h1 {
  color: red;
}

CSS4の:matches()セレクター、そしてその元ネタとなった:-moz-any()とそれに追随した:-webkit-any()を指定して幅広く対応しようとするとこう書いてしまいそうです。ですが、Firefoxでは:-webkit-any()や:matches()で、Chromeでは:-moz-any()と:matches()でそれぞれエラーになるので、結果としてこのルール全体が無効になります。

Demo: Unknown Selector

上記コードのデモです。:-*-any()が実装済みのFirefoxとChromeの現行バージョンでも文字が赤くならないのがわかると思います。このことについてはCSS 2.1の仕様書でもちゃんと触れられており、仕様通りの挙動です。この仕様を利用すると以下のような比較的安全なCSSハックを色々と作ることが可能です。

x::-moz-selection, .test {
  color: red;
}

:-webkit-any(x), .test {
  color: green;
}

x:-o-prefocus, .test {
  color: blue;
}

Demo: Unknown Selector Hack

どうしてもCSSハックを使わざるを得ないような状況に追い込まれた場合には一考の価値はあるかもしれませんね。比較的安全な……というのはブラウザーのバグを利用したものではないということに過ぎません。今のところ各ブラウザーベンダーはベンダー拡張プリフィックス付きのセレクター(やプロパティー)からプリフィックスを外すことにあまり積極的ではないので、CSSハックとして成立しやすいような気はしますが、将来に渡って安全なものではないでしょう。他のCSSハックと同様に過信は禁物でしょうね。