[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ

Post on:2011年5月25日

IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。

サイトのキャプチャ

In defense of CSS hacks — introducing "safe CSS hacks"

[ad#ad-2]

下記は各ポイントを意訳したものです。

[ad#ad-2]

Conditional stylesheets -条件付きコメント：スタイルシート

条件付コメントはInternet Explorerの特定のバージョンでロードさせるべきスタイルシートを簡単に指定することができます。IE以外のブラウザではこの条件付きコメントは、HTMLのコメントとして扱われます。
条件付コメントの指定方法は、下記のようになります。

CSS

<!--&#91;if lte IE 8&#93;><link rel="stylesheet" href="lte-ie-8.css"><!&#91;endif&#93;-->
<!--&#91;if lte IE 7&#93;><link rel="stylesheet" href="lte-ie-7.css"><!&#91;endif&#93;-->
<!--&#91;if lte IE 6&#93;><link rel="stylesheet" href="lte-ie-6.css"><!&#91;endif&#93;-->

「lte」は「Less than or equal to」の略で「以下」をあらわしています。
「lte IE8」と指定すると、IE8, IE7, IE6でそのスタイルシートをロードします。同様に「lte IE7」は、IE7とそれより古いバージョンでロードします。上記の3つの指定では、IE6ではすべてのスタイルシートがロードされることになります。

CSS

各スタイルシートファイルは、下記のように利用します。

.foo { color: black; }

/* lte-ie-8.css, for IE8 and older */
.foo { color: green; }

/* lte-ie-7.css, for IE7 and older */
.foo { color: blue; }

/* lte-ie-6.css, for IE6 and older */
.foo { color: red; }
長所
  • 条件付きコメントを使ったスタイルシートの指定方法はvalidなHTMLです。
  • CSS hackを使用する必要がありません。そのためCSSもvalidな記述でいけます。
短所
  • 多数のHTTPリクエストが生じるため、ブラウザのパフォーマンスが減少します。
  • 一つの条件付きコメントをロードしている間、ダウンロードを阻止します。
  • 条件付きコメントはすべてのHTMLファイルに繰り返して使用すると、ファイルサイズは肥大化します。これはすべてのCSSファイルの選択を繰り返す、ということです。
  • メンテナンス性はよくありません。上記の3つ使用する例の場合、メインとなるスタイルシートを含む4ファイルを管理する必要があります。もしメインスタイルシートを変更した際は、IE用のスタイルシートも忘れずに確認・変更する必要があります。

Conditional classnames -条件付きコメント：class名

CSS hackを使用することを望まない場合は主に、下記のような<html>や<body>にclass名を付与した方法を使用します。この方法は、HTMLに条件付きコメントを加えるという犠牲を払って、hack無しのCSSを記述することができます。

CSS

<!--&#91;if lt IE 7&#93;><html class="ie6"><!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;>   <html class="ie7"><!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;>   <html class="ie8"><!&#91;endif&#93;-->
<!--&#91;if gt IE 8&#93;><!--><html><!--<!&#91;endif&#93;-->

この方法は一つのスタイルシートファイルに、IEの特定のバージョンだけに適用されるスタイルを記述することができます。

CSS

.foo { color: black; }
.ie8 .foo { color: green; } /* IE8 */
.ie7 .foo { color: blue; } /* IE7 */
.ie6 .foo { color: red; } /* IE6 and IE5 (but who cares, right?) */
長所
  • 条件付きコメントを使ったclass名の方法はvalidなHTMLです。
    ※HTML5より前のものは、<body>にclassを付与します。
  • CSS hackを使用する必要がありません。そのためCSSもvalidな記述でいけます。
  • IE用に余分のHTTPリクエストを増やすことはありません。
  • 特定のケースで、条件付きコメントはダウンロードを阻止しません。
短所
  • この方法を使用するHTMLファイルのサイズを増やします。
  • IEの各バージョン用にclass名を増やすため、スタイルシート内のセレクタを増やします。
  • IE用のスタイルのために、メインとは別にIE用のスタイルを定義する必要があります。
  • metaによる文字コードの宣言は、HTMLドキュメントの最初の1024バイト内に配置するのが望ましいものです。
    例：<meta charset="utf-8">
    しかし、この方法を使用すると、数多くの<html>を記述するので、その際はその上限を超えるでしょう。
  • サーバーサイドで指定をしない限り、この方法ではIEの互換ビュー（X-UA-Compatible）を正常に機能させない可能性があります。

<meta http-equiv="X-UA-Compatible">の前に条件付きコメントを使用すると、IEは<meta>を無視する、という報告があります。
via: @zcorpan
そのため、X-UA-Compatibleのヘッダはサーバーサイドで設定する必要があります。

CSS hack -安全なCSS hackとは

CSS hackには安全でないものと、安全なものがあります。下記はIEの各バージョン用のCSS hackです。

IE以外の他のブラウザ用のCSS hackは下記ページを参照ください。

CSS

.foo {
  color: black;
  color: green; /* IE8 and older, but there’s more… */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}

「\9」hackの使用に注意してください。これはIE8とそれ以前のバージョンをターゲットにしたものですが、その後IE9がリリースされ、hackの影響が与えられることが分かりました。これを使用するときはもちろん、IE8を対象してスタイルを定義するものであり、IE9を対象とするものではありません。これは「安全ではない」CSS hackの例です。

安全なCSS hack

「安全な」CSS hackとはどのようなものででしょうか？ CSS hackはしょせんhackです。CSS hackの一番の欠点は将来リリースさせるブラウザのCSS hackを予測することができない、ということです。しかしながら、ある程度の推測をもって現在リリースされているブラウザ用のCSS hackをつくることはできます。「安全な」CSS hackのポイントは下記のようになります。

  • 特定のバージョンのブラウザで機能します。
  • 将来リリースされるバージョンも含めて、他のブラウザで解析させることはおそらくないです。

プロパティには仕様があり、これを元に推測します。
CSS 2.1の仕様によると、「-」「_」の文字はベンダープレフィックス用に確保されています。そしてプロパティには[a-zA-Z0-9]が使用でき、「-」「_」から始めることができないとあります。

これらの仕様により、「_property」「*property」のCSS hackは安全なCSS hackと言えるでしょう。

もし、新しいバージョンのブラウザでCSS hackを見つけたときは、そのブラウザの更新されたバージョンのパーサーバグが修正されたものがリリースされるまでは安全なCSS hackとは言えません。
これはIE9のことです。IE9のCSS hackが一つ見いだされましたが、IE10がリリースされるまで、これを使用するのはやめたほうがよいでしょう。

「\9」hackの歴史を繰り返さないでください。

参考：IE9用のCSS hack

※IE10のリリースまで利用は控えてください。

#element {
    color:orange;
}
#element {
    *color: white;    /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
    _color: red;     /* IE6 */
}
#element {
    color: green
#element {
    color:orange;
}
#element {
    *color: white;    /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
    _color: red;     /* IE6 */
}
#element {
    color: green\0/; /* IE8+9  */
}
:root #element { color:pink \0/; }  /* IE9 */

/; /* IE8+9  */
}
:root #element { color:pink 
#element {
    color:orange;
}
#element {
    *color: white;    /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
    _color: red;     /* IE6 */
}
#element {
    color: green\0/; /* IE8+9  */
}
:root #element { color:pink \0/; }  /* IE9 */

/; }  /* IE9 */
長所
  • サイトのすべてのページに条件付きコメントを加える必要はありません。
  • IE用にHTTPリクエストを追加する必要はありません。
  • CSSのセレクタを増やす必要はありません。
  • CSSのルールを繰り返す必要はありません。
短所
  • これらはCSS hackと呼ばれています。使用する場合には、安全なCSS hackを使ってください。
  • IE8用には（まだ？）安全なCSS hackがありません。
  • 条件付きコメントとは異なり、validなCSSではありません。
  • しかし、CSS3のプロパティやベンダープレフィックスがついたプロパティもvalidではありません。

条件付きコメント：class名とCSS hackのコンビネーション

もし、IE9用にスタイルを書かなければならないなら、何が望ましいでしょうか？ 少なくともIE10がリリースされるまでは、IE9用の安全なCSS hackはないでしょう。
IE8ではどうでしょうか？　IE8も私が知る限り、安全なCSS hackはありません。

では、どうしたらよいでしょうか？
ここに一つの方法があります。まず、条件付きコメントにclass名を使用した方法を使います。

CSS

<!--&#91;if lt IE 9&#93;><html class="lte-ie8"><!&#91;endif&#93;-->
<!--&#91;if gt IE 8&#93;><!--><html><!--<!&#91;endif&#93;-->

IE8とそれ以前のバージョンをターゲットにするために、class名に「lte-ie8」をつけました。そして、安全なCSS hackと組みあせて、IE9に影響を与えないようにIE8とそれ以前のバージョンをターゲットにすることができます。

CSS

.foo {
  color: black;
}

.lte-ie8 .foo {
  color: green; /* IE8 and older */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}

この方法は短所を最小限にし、条件付きコメントのclass名を使用する方法とCSS hackの利点を結合したものです。

sponsors

top of page

©2024 coliss