Aya's curiosity Conditional comments -IE独自-

Conditional comments -IE独自-

Conditional commentsというInternetExplorerの独自拡張を発見したので,JavaScriptを使わずにCSSファイルをブラウザによって振り分けてみようかと。
と言ってもJavaScriptのように各ブラウザで細かく分けるのではなく、IE5以降のバージョンと他のブラウザを分けるというものですが。
私の場合　とりあえずIE6でのCSSレイアウトを他のブラウザ用のCSSファイルから隔離したかったので、IE6用のCSSファイルを新たに作ってこれで振り分けてみようかなと思ってます。
IEの独自拡張。。あんまり使いたくはないけれど、とりあえずの策として。。。
でも、IE6用のCSSファイルをまだ作ってないので実際にはできてませんが。

Conditional commentsの覚え書き。 Conditional comments
IEの独自拡張で日本語では条件付きコメント(カナ?)。

＜特徴＞
・IE4とそれ以前のバージョンはサポートされていない。
・IE4とIE以外のブラウザではふつうのコメントと解釈されるので、何も表示されない。
(普通のコメントとして解釈される。)
・IE(5以降)かIE(5以降)でないかを判別することができる。
・スタンダード(X)HTMLのコメントタグ(＜!----＞)で記述できる。

＜構文＞


<!--[if (条件) IE (バージョン)]>
	HTMLの中でIEに表示されるコメント
<![endif]-->

条件を指定することでどのIE(バージョン)でコメント以外として解釈させるかを指定できる。

＜ifの条件の指定＞
・if ブランク：指定したIEバージョンのみ
・if It :指定したIEバージョンより古いバージョン
・if Ite :指定したIEバージョンより古いバージョンか同じバージョン
・if gt :指定したIEバージョンより新しいバージョン
・if gte :指定したIEバージョンより新しいか同じバージョン
・if ! :指定したIEバージョン以外のバージョン

＜versionの書き方＞
・メジャーバージョンの半角数字(5, 6, 7)
・小数点付きの細かい指定もできる(5.5や6.01など)

＜記述例＞


<!--[if lte IE 6]>
	<p>Internet Explorer</p>
<![endif]-->

の場合、IE6とIE5で"Internet Explorer"と表示されるがそれ以外のブラウザやバージョンではコメントとして解釈されるため何も表示されない。

＜IEと他のブラウザーでのCSSの振り分け。＞


<head>
　.......
  <link href="styles.css" media="screen" type="text/css" />
  <!--[if IE]>
  <link href="ie_styles.css" media="screen" type="text/css" />
  <![endif]-->
  ........
</head>

＜head＞内に通常(他ブラウザ共通)の外部スタイルシートのリンクを記述する。
その後、Conditional comments内でIE(バージョン)のみに適用するスタイルシートのリンクを記述すると、Conditional commentsを認識できる指定されたIEのみがConditional comments内の外部スタイルシートを再読込するので振り分けることができる。

Microsoft Developer NetworkのConditional commentsのページはココ。