モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

IE用のスタイルシートの話

恥ずかしながら最近知ったんですけど、もうIE6用に css をどうのこうのするのはこの方法でいいかなと思っています。

<link rel="stylesheet" href="基本スタイルシート.css" type="text/css" media="screen" />
<!--[if lte IE 6 ]>
	<link rel="stylesheet" href="IE6用スタイルシート.css" type="text/css" media="screen" />
<![endif]-->

(注:なぜか記事個別ページだとうまく表示されないので、その場合はこちらを見てね)

IE独自の条件付コメント機能で、"<!--[if lte IE 6 ]>" と "<![endif]-->" とで囲まれた部分は IE6以下のバージョンでしか処理されませんよ、という指定。他のブラウザでは完全にコメントとして扱われます。"lte IE 6" の部分を変えれば IE5のみだとか、7以外だとか、そういう指定も可能。
これで通常は基本のスタイルシートを読み込み、IE6以下の時だけ IE用スタイルシートを追加で読み込む、と。

けっきょく IE のためだけにスターハックやらなんやらを使うとコードが汚くなってしまうわけで、あとからコード見てうんざりしてしまうわけで、それだったらもう IEの独自機能だろうがそれを使って(他のブラウザではコメント扱いになり、文法上も問題ないし) IE用のコードは完全に別に分けてしまうほうがすっきりするよね、ていう。
はい。すっきりするし、はっきりもする。

注意点としては、IE4 以下と mac の IE には効果がないそうです。ただ、もうそれらのブラウザについては現実的には無視してもいい場面のほうが多い気がします。