【HTML】Conditional Comments
今日、たまたま職場で話が出たので、Conditional Commentsについて書こうと思います。
例えば、画面にアルファチャンネル付PNGを表示したい場合、IE6以下ではそのまま表示することは 出来ませんのでCSSでIE独自のフィルタを使うことになります。（IE5はそれでもダメだったかな...？）
でも、Firefoxとかは標準でサポートしているので、そんな必要はありません。
つまり、IEの指定バージョンにのみCSSファイルを読ませればよいわけですが、そんな時にこの Conditional Commentsが役に立ちます。
CとかC#とかがわかる方は、プリプロセッサを思い浮かべていただければ早いと思います。
具体的には以下のように書きます。
下のlinkタグは、コメント内にありますのでIE以外には認識されませんが、IEはこれを認識して 条件に合っていれば中に書いてあるHTMLが有効になります。
IE独自のCSSファイルを作成して、style.cssで定義しているクラス名と同じクラス名を定義してIE特有のスタイルを記述することで スタイルは上書きされ、IEにのみIE独自のスタイルを設定できるという感じです。
書式は以下のようになっています。
<!--[if expression]> ..... <![endif]-->
以下に簡単な例を示します。
まず、普通にアルファチャンネル付のPNGを表示してみましょう。
上の画像は、2枚のPNGが重なっています。
上の画像は半透明なのですが、IE6でご覧の方には青い背景の上に赤い四角が表示されていると思います。
FirefoxやOperaでご覧の方には、ちゃんと下の画像が透けて見えていると思います。
以下のようなHTMLを記述しています。
今度は、IE6のみ正しく表示されるようにConditional Commentsを使って記述してみましょう。
今度は、IE6の方は、ちゃんと赤い四角の下に画像が透けて見えていると思いますが、それ以外の方は赤い四角の画像が表示されていないと思います。
こちらは以下のようなHTMLです。
background-image:url(layer.png);
が、
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='layer.png',sizingMethod=scale);
に変わっているだけですね。
つまり、IEにはIE独自のCSSであるfiler: ....の部分を設定すればよいことになります。
したがって、style.cssには、
このように、JavaScriptなどを使ってブラウザを判定しなくてもHTMLレベルで設定することも可能な場合もありますので、知っていて損はないと思います。
参考資料
About Conditional Comments(MSDN)
例えば、画面にアルファチャンネル付PNGを表示したい場合、IE6以下ではそのまま表示することは 出来ませんのでCSSでIE独自のフィルタを使うことになります。（IE5はそれでもダメだったかな...？）
でも、Firefoxとかは標準でサポートしているので、そんな必要はありません。
つまり、IEの指定バージョンにのみCSSファイルを読ませればよいわけですが、そんな時にこの Conditional Commentsが役に立ちます。
CとかC#とかがわかる方は、プリプロセッサを思い浮かべていただければ早いと思います。
具体的には以下のように書きます。
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style-ie6.css" />
<![endif]-->
上のlinkタグは普通にすべてのブラウザに認識されますので、共通のスタイルを定義しておきます。下のlinkタグは、コメント内にありますのでIE以外には認識されませんが、IEはこれを認識して 条件に合っていれば中に書いてあるHTMLが有効になります。
IE独自のCSSファイルを作成して、style.cssで定義しているクラス名と同じクラス名を定義してIE特有のスタイルを記述することで スタイルは上書きされ、IEにのみIE独自のスタイルを設定できるという感じです。
書式は以下のようになっています。
<!--[if expression]> ..... <![endif]-->
以下に簡単な例を示します。
まず、普通にアルファチャンネル付のPNGを表示してみましょう。
上の画像は半透明なのですが、IE6でご覧の方には青い背景の上に赤い四角が表示されていると思います。
FirefoxやOperaでご覧の方には、ちゃんと下の画像が透けて見えていると思います。
以下のようなHTMLを記述しています。
<div style="width:443px;height:262px;background-image:url(back.png);padding:0px;
border:solid 1px black;">
<div style="width:443px;height:262px;background-image:url(layer.png);
background-repeat:no-repeat;padding:0px;margin:0px;"></div>
</div>
今度は、IE6のみ正しく表示されるようにConditional Commentsを使って記述してみましょう。
こちらは以下のようなHTMLです。
<div style="width:443px;height:262px;background-image:url(back.png);padding:0px;
border:solid 1px black;">
<!--[if IE 6]>
<div style="width:443px;height:262px;
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src='layer.png',sizingMethod=scale);
background-repeat:no-repeat;padding:0px;margin:0px;"></div>
<![endif]-->
</div>
表示の関係上、途中で折り返してますのでちょっと見辛いですが、よくよく見てみると、中のdivタグのbackground-image:url(layer.png);
が、
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='layer.png',sizingMethod=scale);
に変わっているだけですね。
つまり、IEにはIE独自のCSSであるfiler: ....の部分を設定すればよいことになります。
したがって、style.cssには、
div.alpha_image
{
width:443px;
height:262px;
background-image:url(layer.png);
background-repeat:no-repeat;
padding:0px;
margin:0px;
}
と記述しておき、style-ie6.cssには
div.alpha_image
{
background-image:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='layer.png',sizingMethod=scale);
}
のように記述し、以下のように<head>～</head>内に記述すれば、
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style-ie6.css" />
<![endif]-->
IEでは後の設定が上書きされ設定されるため、IEでもFirefoxでもアルファチャンネル付PNGを綺麗に表示できるようになります。
外部スタイルシートをインクルードする順序が重要です。今回のような場合は、IE独自のものは後でインクルードしてください。このように、JavaScriptなどを使ってブラウザを判定しなくてもHTMLレベルで設定することも可能な場合もありますので、知っていて損はないと思います。
参考資料
About Conditional Comments(MSDN)
| 固定リンク | コメント (3) | トラックバック (0)