IEの条件付きコメントについて

IE6が position: fixed; に対応してなかったので、この機能を利用させていただきました。IE独自のバグや非対応の属性などには、IEの機能で対処するのも悪くないかと。

どんなときに使用するか

Internet Explorer(IE)は、CSSでのバグが多く、CSSを適用したページを表示してみると、他のブラウザ(Firefox,Google Chrome等)に比べ、全く違う結果が表示されることがあります。 しかし、IEはWindowsに最初から付属されているため、ブラウザシェアが最も多く、無視するわけにはいきません。

そのため、CSSを使用する以上、IEでも閲覧可能にしなくてはならず、そんな場合に利用できる方法として、ブラウザのCSSに対する解釈やバグを利用して、異なるスタイルを適用させる「CSSハック」と、 IEの独自拡張である「条件付きコメント(Conditional comments)」があります。

CSSハックと条件付きコメント

CSSハックは、IE以外のブラウザに対しても細かく利用できますが、そもそもバグを利用しているので、CSSの文法的にも間違いであり、ゴチャゴチャしてソースが汚くなるため、あまり使うべきではありません。

それに対して、条件付きコメントはIE5から実装された独自拡張であるけれど、他のブラウザではあくまでコメントとして扱うので、文法的な問題は発生しませんし、別の外部CSSファイルを読み込むことができます。

以上の理由から、IEに別のスタイルを適用する場合は、条件付きコメントによって適用するのがベストだと思われます。

記述方法

当然ですが、IE5から実装されている機能ですので、それ以前のバージョンには、適用できません。

条件付きコメントの書式

指定バージョンのみ
<!--[if IE 6]> IE6にのみ適用する内容 <![endif]-->
指定バージョン以上
<!--[if gte IE 6]> IE6以上に適用する内容 <![endif]-->
指定バージョン未満
<!--[if lt IE 7]> IE7未満に適用する内容 <![endif]-->

実用例

下記のように、条件付きコメントは<head>内で、本来読み込むスタイルシートの後に記述します。

  • <head>
    • <link rel="stylesheet" href="style.css" type="text/css" />
    • <!--[if lt IE 7]>
    • <link rel="stylesheet" href="ie6.css" type="text/css" />
    • <![endif]-->
  • </head>

このサイトでは、こんな感じに使って「style.css」の読み込みの後に、IE7未満を条件とし、「ie6.sys」を外部スタイルシートとして読み込ませています。

なお、条件付きコメントで読み込ませるスタイルシートの方には、代替したい部分の記述だけでよいです。他の部分は、本来のものが適用されます。

スポンサードリンク

inserted by FC2 system