【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (18) 04-02 コンディショナルコメント | クリエイティブ

急上昇ワード

[

]

【特集】

正式版完全対応! Internet Explorer 7 CSS攻略法

18 04-02 コンディショナルコメント

エ・ビスコム・テック・ラボ　 [2007/01/18]

印刷

先頭
前へ
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- ／18

IEでは、特定のIEだけにスタイルシートを適用する方法として、コンディショナルコメントと呼ばれる機能が用意されている。HTML/XHTMLのコメントを利用したもので、コメント内に外部スタイルシートを読み込む<link />を記述する。コメントはという形で記述することになっており、コンディショナルコメントを記述しても標準規格には違反しない。

たとえば、以下のソースでは文字の色を変える外部スタイルシートを3つ用意し、IE7にはred.css、IE6以下にはblue.css、IE以外のブラウザにはyellow.cssを適用するように指定している。なお、Macintosh版のIEはコンディショナルコメントに対応しておらず、「IE以外のブラウザ」として処理される。

用意したスタイルシート

red.css: 文字を赤色で表示/li>
blue.css: 文字を青色で表示/li>
yellow.css: 文字を黄色で表示


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 4-4-1 sample04-04-01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>SAMPLE</title>    <link rel="stylesheet" type="text/css" href="yellow.css" />  </head> <body> <h1>見出し</h1> </body> </html>

コンディショナルコメントの記述形式

コンディショナルコメントの基本的な記述形式は以下のようになっている。

expressionの条件と一致するIEだけに適用する

expressionの条件と一致しないIEだけに適用する

expressionの条件指定

expressionの部分には、次の形式でスタイルシートの適用条件を記述する。comparisonとversionは省略することが可能だ。

comparison feature version

feature: ブラウザの種類を指定

version: ブラウザのバージョンを指定

comparison: バージョンとの比較により適用対象の範囲を指定

featureで指定できる値
値	指定内容
IE	Internet Explorerを指定。現在、featureで指定できる値はこれだけとなっている

versionで指定できる値
値	指定内容
7	IE7を指定
6	IE6を指定
5.5	IE5.5を指定
5	IE5.xを指定

comparisonで指定できる値
値	指定内容
lt	versionより下のIEに適用する。versionで指定したIEには適用しない
lte	version以下のIEに適用する。versionで指定したIEも適用対象に含む
gt	versionより上のIEに適用する。versionで指定したIEには適用しない
gte	version以上のIEに適用する。versionで指定したIEも適用対象に含む