Webデザイン

コンディショナルコメント(各IEのバージョンにCSSを適用)

Webデザイン

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 となります。

ちなみにcomparisonversionは省略することも出来ます。

featureで指定できる値

IEInternet Explorerを指定。現在、featureで指定できる値はこれだけ

versionで指定できる値

9IE9を指定
8IE8を指定
7IE7を指定
6IE6を指定
5.5IE5.5を指定
5IE5を指定

comparisonで指定できる値

ltversionより下のIEに適用する。versionで指定したIEには適用しない
lteversion以下のIEに適用する。versionで指定したIEも適用対象に含む
gtversionより上のIEに適用する。versionで指定したIEには適用しない
gteversion以上の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

タイトルとURLをコピーしました