スターハックとは・・・
スターハック（Star Hack）は、（Macを含むすべての）IEのみにスタイルを適用します。セレクタの始めに「* html 」を付けるだけなので、CSS Validatorに通ります。
* html selector{
propaty:value;
}
| スターハック・ブラウザ変化表 | ||
|---|---|---|
| IE標準モード | Windows IE 6以前・Mac IEすべて | サンプル |
| IE互換モード | Windows・Mac IEすべて | サンプル |
なお、IE7は、後方互換モードになるようにDOCTYPE宣言をするとハックが適用されますが、標準モードでDOCTYPE宣言をすると、ハックは適用されません。
スターハックをもっと詳しく・・・
スターハックのしくみ
<通常のブラウザ>
「* htmlって何だ？」
「htmlには親要素が無い！」
「適用しない！」
「* html」には、全称セレクタ（アスタリスク）が含まれています。このことから、「* html」は「任意の要素の子孫であるhtml要素」となります。
ですが、html(xhtml)だと、ルート要素は必ずhtml要素になるから、html要素が何かの要素の子孫になることは絶対にありえません。なので、IE以外のブラウザはこのハックを適用しないのです。
しかしIEはhtmlに親要素があると解釈しちゃうため、このハックを適用しています。（理由は次からの章にあります）
なんでhtml要素に親要素があるの？：予想1
<IEの考え方：予想1>
「* htmlって何だ？」
「htmlのことか！」
「適用しよう！」
なぜhtml要素に親要素があると解釈する理由に「IEのお行儀が悪いだけ」なんて言われているのをどっかで見ました。でも、どこが行儀悪いのでしょうか？
普通、「* div{ }」と「div{ }」のどちらのセレクタも同じ意味を持ちます。つまりIEは、あってもなくても変わらないからセレクタの先頭に「* 」（全称セレクタ）があっても無視っていう決まりができているのかなぁ・・・？と私は思います。
もし、本当にセレクタの先頭の「*」を無視しているのであれば、かなりお行儀が悪いですが、もう一つの仮説だと、まだマシだと思います。
なんでhtml要素に親要素があるの？：予想2
<IEの考え方：予想2>
「* htmlって何だ？」
「DOCTYPE宣言(の子孫の)htmlのことか！」
「適用しよう！」
もう一つ、予想を立ててみました。個人的にはこっちの方が可能性が高い気がします。（あくまでも「気がする」だけです。単なる直感です。過信しないでください。）
それは、DOCTYPE宣言を要素として見ているのではないか、ということです。「本来記述しなければならないもの」ですから、もし記述されていなくても省略されていると考えて、「html要素の親要素はDOCTYPE宣言」になっている可能性が考えられると思います。
ちなみに、この説では、スター＋ハックも説明できます。スター＋ハックの「*+html」は、何かの要素の直後にhtml要素がある、となります。（直下ではなく、直後です！）この「何かの要素」がまたもやDOCTYPE宣言と考えられます。
そして、スター＋ハックでのIE7は、標準モードのみ適用、スターハックでのIE7は標準モードのみ適用です。すなわち、IE7は後方互換モードだとDOCTYPE宣言の子要素がhtml要素になり、標準モードだとDOCTYPE宣言の弟要素がhtml要素になる、と考えられるのです。
名称について
どーでもいい話ですが、このハック名は、星型に例えられる「*」を使っているから「スター」。そのまんまですね。似たようなハックに「スター7ハック」があります。
でも、名前から効果がすぐに分かるようにするには、「IEハック」なんていう名称も悪くない気がします。（少しかっこ悪いネーミングですが・・・）
ちなみに、英語圏ではStar Html Hackって言われているそうです。日本語サイトでは、ほぼすべて「スターハック」とHtmlが省略されているので、当サイトでも「スターハック」を使用しています。
関連ページ
似たようなハック
理解を深めるページ
MEMO
- 2008,1,1
- Labの公開と一緒にこのページをアップしました！
