条件付きコメント

条件付きコメント（じょうけんつきコメント）とは、Microsoft Internet Explorerに対して、コードを渡したり隠したりするのに使用できるHTMLソースコード中にある条件付きのステートメントである。Internet Explorer 5で初めて登場し、バージョン9までサポートされた。

なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事となった。よって、「IEそのものを検出する」コメントは「IE9以下を検出する」コメントと同義になる。

例
条件付きコメントの仕組みがわかるような簡単な例を以下に示す。

<!--[if IE 6]>
<p>あなたはInternet Explorer 6を使用しています。</p>
<![endif]-->
<!--[if !IE]><!-->
<p>あなたはInternet Explorerを使用していません。</p>
<!--<![endif]-->

条件付きコメントの文法
条件付きコメントには、下の階層が見えるものと下の階層が隠れるものとの二種類がある。

各種コメントの基本的な文法を以下の表に示す。最初におかれたコメントは比較のために書いた基本のHTMLコメントであり、各種の条件付きコメントで使われる文法との違いをわかりやすくするためのものである。

それぞれの条件付きコメントの文法ブロックの中にあるHTMLは、スクリプトを含めた内容のHTMLのブロックを表している。両方の種類の条件付きコメントにおいて、expressionのところの条件式を使って、コメントブロックの中にある内容を解析するべきか無視するべきかを指示している。条件式はフィーチャーと演算子と値を組み合わせて表現されるが、フィーチャーごとにその形式は違う。以下の表でサポートされているフィーチャーとそれぞれのフィーチャーがサポートしている値を示す。

以下の表で条件式を作るのに使うことができる演算子を説明する。

下の階層が隠れる条件付きコメント
以下の二つの例は下の階層が隠れる条件付きコメントである。

<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

または

<!--[if lte IE 7]>
<style type="text/css">
/* [[CSS]]をここに */
</style>
<![endif]-->

一つ目の例の命令は、IE 8が特定のCSSファイルを読み込むようにするものであり、IE 7やそれより古いバージョンのIEは無視をする。IE以外のブラウザーも標準的なHTMLコメントのように見えるのでこれを無視する。二番目の例のタグはIEバージョン5.0から7までが内部のCSSスタイルを読み込む。このタグの使い方を変えることでIE 6だけ、IE 5だけ、特定のバージョンより新しい（大きい）または古い（小さい）複数のバージョンのIE、を選び出すこともできる。

下の階層が見える条件付きコメント
下記の例は、下の階層が見える条件付き「コメント」であるが、これは実は誤解されやすい名前で、(X)HTMLコメントとはまったく違うものである。デフォルトのMicrosoftの文法を使って:

<![if !IE]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>

この例はIE以外のブラウザーだけに見せる内容を示したもので、この条件式はIEで"false"に評価され（そのため内容は無視される）、一方でIE以外のブラウザーではタグ自体が認識されない（無視される）。これは正当なHTMLやXHTMLではない。

この文法が標準化されたマークアップでないことをMicrosoftは認めていて、これらのタグをほかのブラウザーに大目に見てもらって、中の内容が現れることを望んでいる。W3C標準を遵守する目的で、下の階層が見える条件付きコメントについて以下のような代替手法を使うウェブ開発者もいる。

<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->

いくらかややこしい構造であるが、この特殊な文法は正当な(X)HTMLでありIE以外のブラウザーのための条件セクションに便利である。ただし条件式がtrueに評価されるとき、（例えば、IE以外のブラウザーと特定のバージョンのIEで表示するためのコードを書く場合）IEはHTMLの内容の前に"-->"を表示してしまう。この問題は以下のように最初の"-->"の前に"<!"を追加することで解決することができる。

<!--[if gt IE 6]><!-->
このコードはIE以外のブラウザーとIE 7以降で表示される。
<!--<![endif]-->

追加した"<!"はIE以外のブラウザーには無視される。条件にかかわらずIEにも無視される。なぜならfalseの場合、条件コメントの中はすべてが無視され、trueの場合、現れた<!-->というタグは認識されず、そのため無視されるからである。

JScriptにおける条件付きコメント
Internet Explorer 4から始まったことだが、JScriptの内部に条件付きコメントを追加するための似たような独自の機構があり、条件付きコンパイルとして知られている。

コード例:
<script>
/*@cc_on
  document.write("あなたはIE4以降を使っています");
@*/
</script>

事前定義された変数もいくらかあったが、MicrosoftはXP SP3でIE6のJScriptエンジンを差し替えたのでもはや以下の方法に頼ることはできない。現在では次のように報告する。

@_jscript_version == 5.7

その結果、条件付きコンパイルを使ってIE 6を検出する方法は以下のようになる。

<script>
/*@cc_on

  @if (@_jscript_version > 10)
    document.write("あなたはIE10よりも新しいバージョンを使っています");
  @elif (@_jscript_version == 10)
    document.write("あなたはIE10を使っています");
  @elif (@_jscript_version == 9)
    document.write("あなたはIE9を使っています");
  @elif (@_jscript_version == 5.8)
    document.write("あなたはIE8を使っています");
  @elif (@_jscript_version == 5.7 && window.XMLHttpRequest)
    document.write("あなたはIE7を使っています");
  @elif (@_jscript_version == 5.6 || (@_jscript_version == 5.7 && !window.XMLHttpRequest))
    document.write("あなたはIE6を使っています");
  @elif (@_jscript_version == 5.5)
    document.write("あなたはIE5.5を使っています");
  @elif (@_jscript_version < 5.5)
    document.write("あなたはIE5.5よりも古いバージョンを使っています");
  @else
    document.write("あなたはバージョン不明のIEを使っています");
  @end

@*/
</script>

関連項目
CSSハック

脚注

ウェブデザイン
HTML
Internet Explorer