KLUTCHE

【HTML】条件付きコメントでIEとそれ以外のブラウザでの処理を分岐する方法

アーチ式ダム
あなたのブラウザはIEではないですね!

今このサイトを閲覧しているブラウザがIEか否かによって上の文章と写真が変わるはずです。

わかりやすいように
IEの場合は重力式コンクリートダム
IE以外はアーチ式コンクリートダム
の画像を表示します。

HTML

HTMLはこんな感じになっています。

<!--[if !IE]><!-->
<img src="arch.jpg" alt="アーチ式ダム" width="400" height="200" />
あなたのブラウザはIEではないですね!<br />
<!--<![endif]-->
<!--[if IE]>
<img src="gravity.jpg" alt="重力式ダム" width="400" height="200" />
あなたのブラウザはIEですね!<br />
<![endif]-->

コメント内の[if !IE]で、IEかどうかの判別をしています。
他にもIEのバージョン毎に処理を分岐することも可能です。

<!--[if IE 8]>
IE8の場合
<![endif]-->
<!--[if lt IE 8]>
IE8未満の場合、IE7, IE6など
<![endif]-->
<!--[if gte IE 8]>
IE8以上の場合、IE8, IE9など
<![endif]-->

IE以外の指定の書き方に注意!

「IEでなければ」という分岐部分のタグに注目です。

<!--[if !IE]><!-->

<!--<![endif]-->

IEの場合の分岐と書き方が違います。
本来のMicrosoftの文法ではIE以外の条件は

<![if !IE]>

<![endif]>

と書きます。
ですが、これはHTMLやXHTMLでは文法違反です。
なので、無理やりWEB標準を遵守する形にしたのが上のタグです。
これであればvalidエラーを起こさずにブラウザでの分岐を実現できます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です