CSSの識別名にアンダースコアを使う

CSSの識別名(identifier)には、アンダースコア(_)が使えるわけですが、どうやらInternet Explorer 5以降には、これにまつわるちょっとしたバグがあるみたいです。そのバグというのは、「識別名の先頭にあるアンダースコアを無視する」というもの。CSS: The Underscore Hackで見つけました。

  • Underscore ("_") is allowed in CSS identifiers by the CSS2.1 Specification
  • Browsers have to ignore unknown CSS properties
  • Windows IE 5+ doesn't recognize the "_" at the beginning of CSS property name

このページの例にもあるように、こんな書き方をするとMozillaやOperaとInternet Explorer 5以降で適用されるスタイルを切り分けられるようです。

#menu {
  position: fixed;
  _position: absolute;
}

MozillaやOperaではfixed、Internet Explorer 5以降ではabsoluteが適用されるということになりますね。

子セレクタ使って切り分けるよりすっきりしそうですな。存在しないプロパティ(上記の例で言うと_position)を指定するため、アレなテクニックではありますが、実用度は高いですね。