スターハックの代替手段

「@Style」さんからのトラックバックで知ったのですが、僕が多用しているCSSハックの一つ「スターハック」は止めなさいと、IEBlogで呼びかけているそうです…ってお前らのせいでどれだけ苦労していると…IE7が標準準拠すればいいだけだろうが！

と怒っていても問題は解決しないので、早速対策しました。

問題の記事「IEBlog : Call to action: The demise of CSS hacks and broken pages」を参照すると、他にもご丁寧に止めといた方がいいよハックを紹介しています。つうかおまえらが…（略）。問題のハックはこれらだそうです。

Here is a list of common CSS hacks to look out for (please also consider their variations):
html > body
∗ html
head:first-child + body
head + body
body > element

Quotations from IEBlog : Call to action: The demise of CSS hacks and broken pages

で、これらを止めたとして、IE6がまともに表示してくれるかというとそんなことは絶対ないわけで、別のハックが必要です。でもこれはCSSハックというより、IEの独自仕様を利用しているのでしょうか。head内に特殊なコメントタグを利用することで、IEのみ適用させるスタイルを記述することができます。ヘッダに特殊なタグを記述してソースが汚れるのがなんとなく嫌だったのですが、使ってみるとこっちの方が管理しやすいですね。

参考にさせていただいたのは、スタイルシートにはまった人なら必ず1度はお世話になっている「スタイルシートスタイルブック」さんのこの記事「IE用CSSの指定方法」です。バージョンごとの指定方法なんかもあって、とても分かりやすいです。

IEblogで指示しているような、head内にスタイルを直接するのは嫌だったので、現在使用しているスタイルシートから「* html」を検索して新たに作った「ie_hack.css」に次々コピペ。そして、そのスタイルシートを以下のようにして読み込ませれば終了です。

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="http://blog.heartfield-web.com/skins/heartfield/css/ie_hack.css" />
<![endif]-->

ついでに気になっていた左のサイトメニューのdivタグを削除して、すっきりしました。

貴重な情報を教えてくださった「@Style」さん、どうもありがとうございました。

Category

• Music [15]
• Column [78]
• Mac [29]
• Web [47]