hail2u.net

IOM Filter

Posted at 2005-03-06T20:27:00+09:00 in Web Design

Opera 7.5とMozilla 1.7.5(Firefox 1.0/1.0.1のコア)でCSSを切り分けたいというケースは、両ブラウザとも実装はかなり優秀なので(←偉そう)まず無いです。が、どうもうまくいかないケースに遭遇してしまったので、IOM Filter(ダサいネーミング)と名づけたInternet Explorer 6とOpera 7.52、Mozilla 1.7.5で違うCSSルールを適用できるような書き方を考えてみました。

コアのコードは以下の通り。

#filterTest {
  color:red;
  background-color:transparent;
}

body > #filterTest {
  color:green;
  background-color:transparent;
}

:root #filterTest {
  color:blue;
  background-color:transparent;
}

Mozilla 1.7.5では全てのルールが有効、Opera 7.52では最初と二番目のルールが有効、Internet Explorer 6では最初のルールだけ有効というわけで、CSSの後出し最強ルールによりそれぞれ違う前景色になるというわけ。この順に書かないとならないことにさえ注意すれば、特にややこしい方法でも無い気がします。

:root擬似クラスはCSS2 Specificationでは定義されていないので、CSS Validatorではエラーでるけど。underscore hackと同じで、どうしても必要というのでない限り鮭避けた方が無難ぽい。