WEBサイト制作上、避けたいけれど避けられない障害物 『IE』…。
CSSハックしたり、JavaScriptを読み込んだりして色々とサイトの裏側で施術を行うわけですがその施術の内の一つとしてコンディショナルコメントというものがあります。
目次
コンディショナルコメントって何？
コンディショナルコメントとは、特定のIEだけにスタイルシートを適用するためのコメントアウトです。
<!--[if IE ●]>
･･･
<![endif]-->この記述は標準規格には違反しないので、気にせずHTML内に書きこめます。
コンディショナルコメントの使い方
コンディショナルコメントの基本的な使い方は以下の通り。
expressionの条件と一致するIEだけに適用する
<!--[if expression]>
･･･
<![endif]-->
expressionの条件と一致しないIEだけに適用する
<!--[if !expression]>
･･･
<![endif]-->
※ビックリマークがつきます。このexpressionの部分には、次の形式でスタイルシートの適用条件を記述します。
- feature: ブラウザの種類を指定
- version: ブラウザのバージョンを指定
- comparison: バージョンとの比較により適用対象の範囲を指定
<!--[if expression]>
↓↓↓↓
書き方の順番は
<!--[if comparison feature version ]>comparison → feature → version となります。
ちなみにcomparisonとversionは省略することも出来ます。
featureで指定できる値
| IE | Internet Explorerを指定。現在、featureで指定できる値はこれだけ |
versionで指定できる値
| 9 | IE9を指定 |
| 8 | IE8を指定 |
| 7 | IE7を指定 |
| 6 | IE6を指定 |
| 5.5 | IE5.5を指定 |
| 5 | IE5を指定 |
comparisonで指定できる値
| lt | versionより下のIEに適用する。versionで指定したIEには適用しない |
| lte | version以下のIEに適用する。versionで指定したIEも適用対象に含む |
| gt | versionより上のIEに適用する。versionで指定したIEには適用しない |
| gte | version以上のIEに適用する。versionで指定したIEも適用対象に含む |
コンディショナルコメント サンプルソース
※IE全ての場合
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="●●.css">
<![endif]-->※IE7のみの場合
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="●●.css">
<![endif]-->※IE6以下の場合
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="●●.css">
<![endif]-->※IE以外の場合
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="not_ie.css" />
<![endif]-->
comment