条件付コメントを使ったMOSe

TopicPath: Home / CSS / 条件付コメントを使ったMOSe

条件付コメントを使ったMOSe

Date:: 2007.02.16 (Fri) 12:00
Category:: CSS

このブログで何度か取り上げているMOSeという手法。簡単におさらいすると、IE 6以前が対応していないセレクタを意図的に使い、モダンブラウザによりきれいな表示をさせる手法のことです。今回は、条件付コメントを使って実現する方法を紹介します。

MOSeのおさらいは、次のエントリーをご覧ください。

条件付コメントについて

さて、条件付コメントですが、意外と知られていないので簡単に解説します。条件付コメント(Conditional Comments)とは、Windows IE 5以上で利用可能な特殊なコメントのことです(Mac IEは未対応)。この条件付コメントを使うと、特定のバージョンにのみスタイルを適用させることができます。

<!--[if IE 5]>
<link rel="styleshee" type="text/css" href="ie5.css" />
<![endif]-->

head要素内にこのように書くと、IE 5だけが「ie5.css」を読み込み、それ以外のブラウザはコメントとして無視します。また、ifのあとにgteと書くとそのバージョン以上が読み込み、逆にltと書けばそのバージョン以下が読み込みます。

<!--[if lt IE 6]>
<link rel="styleshee" type="text/css" href="ie.css" />
<![endif]-->

このように書くと、バージョン6以下のIEだけが読み込みます(IE 7は読み込まない)。

スタイルシートスタイルブックのMOSe

まずは、長谷川恭久さんが運営されているスタイルシートスタイルブックのサイトを見てみましょう。

スタイルシートスタイルブック

FirefoxやOpera、Safariなどのモダンブラウザでアクセスするとカラーで表示されますが、IE 6以前で見るとモノクロで表示されます。キャプチャ画像を用意しましたのでご覧ください(キャプチャ画像の使用許可は取りました)。

仕組みはとてもシンプルで、条件付コメントを使いIE専用のCSSファイル(ie.css)をIEだけに読み込ませ、スタイルを上書きしているのです。要するに、IEだけがモノクロ画像を読み込むわけですね。

メリットとデメリットを比較してみる

今まで自分が紹介したMOSeの手法は、IE 6以前が対応していないセレクタを意図的に使い、モダンブラウザに別指定を行いました。この方法の最大のデメリットは、CSSのコードが複雑になり管理が大変になることです。

body {
/* IE 6以前はこのスタイルを適用する */
}
html > body {
/* モダンブラウザはこのスタイルを上書きする */
}

このように2つの指定を行わなければならず、MOSeを取り入れるたびにソースが肥大化してしまいます。これでは作業効率も落ちますし、CSS本来のメリットが半減してしまいます。

条件付コメントの場合だとIEだけを確実に狙えますし、何よりCSSファイルの肥大化が防げます(CSSファイルの数は増えますが)。MOSeの目的は、Web標準に正しく準拠したブラウザによりきれいな表示をさせることです。現段階でネックになるのは、IEだけと言ってもいいでしょう。そのIEだけを確実に狙えるこの方法は、理にかなっていると思います。

大規模なサイトでMOSeを取り入れるのならば、条件付コメントを使ったMOSeのほうがいいかもしれませんね。もちろん、この条件付コメントはXHTMLの文法にも違反しませんし、IE以外のブラウザから見ればただのコメントにしか見えません。

Go my way