hail2u.net

アスタリスクをプロパティ名の頭につけるというCSSハック

Posted at 2006-08-24T04:28:00+09:00 in Web Design

CSSの各セレクタのブロック内でInternet ExplorerとFirefoxやOperaなどで分けてプロパティを設定するハックとしてUnderscore Hackという有名なものがあるが、Details on our CSS changes for IE7によるとInternet Explorer 7では修正されている。だが、アンダースコアのかわりにアスタリスク(*)をプロパティ名の頭につけるというAsterisk Hack(勝手に命名)は健在だったりとか。

Asterisk HackはUnderscore Hackとほとんど同じで、

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

というような記述をするハック(サンプル・ページ)。結果はInternet Explorerでabsolute、FirefoxやOperaなどではfixedというように適用されるスタイルを切り分けることが出来る。

Underscore Hackと同じく記述が簡単でそこそこ読みやすいので実用性は高そう。しかしアンダースコアと違いアスタリスクはプロパティ名に使用できる文字ではないため、invalidなCSSになることは知っておくべき。それを踏まえた上であえて使うというのなら誰も止めない。きっと。

Internet Explorer 7のCSSパーサーはバグの修正とかは頑張っているみたいだけど、このハックが通用してしまうことは、きっと上で触れたCSS2のトークン定義に従って根本的に修正したというわけではなさそう。という感想を持った(実際はどうだか知らんけど)。ということを書きたかった。