IEをバージョンで振り分けて、CSSやJavaScriptを適用

IE6とか、いろいろ困った動きをするブラウザなので、JavaScriptとかCSSを振り分けたい気分になるときがあります。
CSSハックを使ったり、JavaScriptの振り分けも有りますが、裏技は今後のことやメンテナンスを考えると、あまりやりたくない気がする。(新しいブラウザがその裏技でどういう動作をするか予想できない) そういうときに使えるのが、IEが独自に実装している「条件付きコメント」とやら。
囲んだ部分を特定のIEバージョン(あるいはそれ以外)に対してのみ有効にすることができる。条件に当てはまらないブラウザでは、普通のコメントとして無視される。


書き方は、例えばIE6だけに該当部分を読み込ませたい場合は、

<!--[if IE 6.0]-->
内容
<![endif]-->

これだけ。
内容部分がIEでは普通に表示されるが、他のブラウザでは「<!--」で始まり「-->」で終わっているので、コメントとして無視されるという仕組み。
この内容部分に、IEのみで使用したいJavaScriptとかCSSを書いておく。

この方法が便利なのは、HTMLの仕様上コメントになるという点を利用しているため、今後予期しないブラウザでも不具合が起こる可能性が極めて低いこと。
ハックとか裏技的なものは、当然、編み出された時点のブラウザでしか検証していないわけで、将来的に何か不具合が起きる可能性はあるけど、これなら安心して使えそう。

まぁ、はやくIE6のシェアが無視できるくらいになれば、こんなことしなくてすむんですけどね。

コメント