CSSを扱う際に1つの壁となるのがクロスブラウザ対応だ。
最近はその定義がスマートフォンを初めとするデバイス単位にまで広がりつつあるが、CSSにおけるクロスブラウザ対応とはそもそもPC環境のブラウザ間におけるCSS対応状況の差から生まれる表示の違いを調整する行為を指す。単なる仕様の違いからバグまで表示の違いを生む原因は様々だが、ブラウザ間だけでなくバージョン間においてもそのあたりがバラバラなため、全てを把握するにはそれなりの知識と経験が必要とされる。
ある程度の仕様の差は書き回しで解決できるのだが、古いものになればなるほどバグの要素が強くどうしようもないことが多い。
そんな時に使われるのがCSSハックである。これは簡単に言えば各ブラウザのバグを逆手にとったフィルタリングテクニックだ。中には記述的にCSSの仕様から外れるものもあるため極力使用しないのが吉ではあるのだが、Rikiyとしては「毒を以て毒を制す」という意味では理にかなっているし、必要悪と考えている。
今回はそんな、世に出回っているCSSハックをまとめてみた。
内容はできる範囲で検証済、随時更新予定だ。主には自身の覚書用だが、興味がある方は参考にして欲しい。
| IE6のみに適応 | セレクタ{ _color: #red; } |
|---|---|
| IE7のみに適応 | *+html セレクタ{ color: red; } |
| IE6,IE7のみに適応 | セレクタ{ /color: red; } |
| IE8のみに適応 | html>/**/body セレクタ{ color /*\**/: red\9; } |
| IE6,IE7以外に適応 | html>/**/body セレクタ{ color: red; } |
| IE6〜8以外に適応 | :root *> セレクタ{ color: red; } |
| Firefoxのみに適応 | セレクタ, x:-moz-any-link{ color: red; } |
| Firefox 3.0以降のみに適応 | セレクタ, x:-moz-any-link, x:default{ color: red; } |
| Firefox 3.5以降のみに適応 | セレクタ, x:-moz-broken, x:last-of-type{ color: red; } |
| Safari 2〜3のみに適応 | html[xmlns*=""] body:last-child セレクタ{ color: red; } |
| Safari 2〜3.1のみに適応 | html[xmlns*=""]:root セレクタ{ color: red; } |
| Safari 3以上, Chromeのみに適応 | @media screen and (-webkit-min-device-pixel-ratio:0) { セレクタ{ color: red; } } |
| Safari 3以上, Chrome, Opera 9以上, Firefox 3.5以上のみに適応 | body:nth-of-type(1) セレクタ{ color: red; } |
(2010年12月27日)
その他のレポート