条件付きコメント
From Wikipedia, the free encyclopedia
条件付きコメント（じょうけんつきコメント）とは、Microsoft Internet Explorerに対して、コードを渡したり隠したりするのに使用できるHTMLソースコード中にある条件付きのステートメントである。Internet Explorer 5で初めて登場し、バージョン9までサポートされた。
なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事となった[1]。よって、「IEそのものを検出する」コメントは「IE9以下を検出する」コメントと同義になる。
条件付きコメントの仕組みがわかるような簡単な例を以下に示す。
<!--[if IE 6]>
<p>あなたはInternet Explorer 6を使用しています。</p>
<![endif]-->
<!--[if !IE]><!-->
<p>あなたはInternet Explorerを使用していません。</p>
<!--<![endif]-->
条件付きコメントの文法
条件付きコメントには、下の階層が見えるものと下の階層が隠れるものとの二種類がある。
各種コメントの基本的な文法を以下の表に示す。最初におかれたコメントは比較のために書いた基本のHTMLコメントであり、各種の条件付きコメントで使われる文法との違いをわかりやすくするためのものである。
| コメントの種類 | 文法ととりうる値 |
|---|---|
| 標準のHTMLコメント | <!-- コメントの内容 --> |
| 下の階層が隠れる | <!--[if expression]> HTML <![endif]--> |
| 下の階層が見える | <![if expression]> HTML <![endif]> |
それぞれの条件付きコメントの文法ブロックの中にあるHTMLは、スクリプトを含めた内容のHTMLのブロックを表している。両方の種類の条件付きコメントにおいて、expressionのところの条件式を使って、コメントブロックの中にある内容を解析するべきか無視するべきかを指示している。条件式はフィーチャーと演算子と値を組み合わせて表現されるが、フィーチャーごとにその形式は違う。以下の表でサポートされているフィーチャーとそれぞれのフィーチャーがサポートしている値を示す。
| 項目 | 例 | 説明 |
|---|---|---|
| IE | [if IE] | "IE"の文字列はウェブページを見るのに使っているInternet Explorerのバージョンに対応するフィーチャーである。 |
| 値 | [if IE 7] | ブラウザーのバージョンに対応する整数または浮動小数点数。この数字がブラウザーのバージョンに一致したときにtrueのブール値を返す。詳しくはバージョンベクターを参照。 |
| WindowsEdition | [if WindowsEdition] | Windows 7上のInternet Explorer 8。"WindowsEdition"の文字列はウェブページを見るのに使っているMicrosoft Windowsのエディションに対応するフィーチャーである。 |
| 値 | [if WindowsEdition 1] | ウェブページを見るのに使っているWindowsのエディションに対応する整数。この値が使われているエディションに一致したときtrueのブール値を返す。サポートされる値とそれが表すエディションに関する情報については、GetProductInfo関数のpdwReturnedProductType引数を参照のこと。 |
| true | [if true] | 常にtrueに評価される。 |
| false | [if false] | 常にfalseに評価される。 |
以下の表で条件式を作るのに使うことができる演算子を説明する。
| 項目 | 例 | 説明 |
|---|---|---|
| ! | [if !IE] | NOT演算子。フィーチャーや演算子や部分式の直前に置かれ、式のブール値を反転させる。 |
| lt | [if lt IE 5.5] | 小なり演算子。最初の引数が二番目の引数より小さいときtrueを返す。 |
| lte | [if lte IE 6] | 小なりイコール演算子。最初の引数が二番目の引数より小さいか等しいときtrueを返す。 |
| gt | [if gt IE 5] | 大なり演算子。最初の引数が二番目の引数より大きいときtrueを返す。 |
| gte | [if gte IE 7] | 大なりイコール演算子。最初の引数が二番目の引数より大きいか等しいときtrueを返す。 |
| ( ) | [if !(IE 7)] | 部分式演算子。より複雑な式を作るためにブール演算子と組み合わせて使う。 |
| & | [if (gt IE 5)&(lt IE 7)] | AND演算子。すべての部分式がtrueに評価されたときにtrueを返す。 |
| | | [if (IE 6)|(IE 7)] | OR演算子。部分式がひとつでもtrueに評価されたときにtrueを返す。 |
下の階層が隠れる条件付きコメント
以下の二つの例は下の階層が隠れる条件付きコメントである。
<!--[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は認めていて[2]、これらのタグをほかのブラウザーに大目に見てもらって、中の内容が現れることを望んでいる。W3C標準を遵守する目的で、下の階層が見える条件付きコメントについて以下のような代替手法を使うウェブ開発者もいる[3]。
<!--[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の内部に条件付きコメントを追加するための似たような独自の機構があり、条件付きコンパイルとして知られている[4]。
コード例:
<script>
/*@cc_on
document.write("あなたはIE4以降を使っています");
@*/
</script>
事前定義された変数もいくらかあったが[5]、MicrosoftはXP SP3でIE6のJScriptエンジンを差し替えたので[6]もはや以下の方法に頼ることはできない。現在では次のように報告する。
@_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>