IE8のレンダリングモードに関するまとめ

Apr 12, 2008

某所で行われたIE8 Beta 1についてのセミナーで、DOCTYPEスイッチとIE8の複数のモードの話を聞いていたら、頭の中がごちゃごちゃしてきたのでざっくりとまとめてみる。

レンダリングモードの使い分け

まず最初に、IE8には以下の3つのレンダリングモードがあることを覚えておきます。

IE8標準準拠モード (デフォルトのレンダリングモード)
IE7標準準拠モード
Quirksモード (いわゆる互換モード)

IE8のデフォルトでのレンダリングモードは一番上の「IE8標準準拠モード」になります。これらのレンダリングモードを覚えたら、次にIE8が備える「IE7エミュレート機能」について知っておきましょう。エミュレート機能とは「IE7とまったく同じレンダリングをする」ための機能です。つまりこの機能を有効にするとデフォルトのレンダリングモードが「IE7標準準拠モード」に切り替わることになります。よって、通常時は「IE8標準準拠モードかQuirksモード」の組み合わせでレンダリングされ、エミュレート機能が有効の場合のみ「IE7標準準拠モードかQuirksモード」の組み合わせでレンダリングされることになるわけです。

ではQuirksモードにはどのように切り替わるのでしょうか。これは従来のIEと考え方が同じですが、改めて簡単にまとめておくと以下の条件にマッチする場合にQuirksモードに切り替わります。

Webページ中にDOCTYPE宣言が存在しない
HTML3.0以下の文書型を用いている
HTML4.0 TransitionalまたはFramesetのDOCTYPE宣言にURLを含まない

3つ目の「HTML4.0 TransitionalまたはFramesetのDOCTYPE宣言にURLを含まない」というのは、ちょっと特殊な感じなので、次のコードを見てもらえると分かりやすいかもしれません。

// URLを含んでいないので、Quirksモード有効
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

// URLを含んでいるので、Quirksモード無効
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

このように、これらの条件にマッチした場合には、前述したエミュレート機能の状態に関わらず、常にQuirksモードに切り替わります。Qurksモードについては、MicrosoftのDOCTYPE宣言のページにも詳しく書かれているので、そちらも参照することをおすすめします。

そんなわけでレンダリングモードについてここまでのまとめ。まず、IE8には3つのレンダリングモードが存在します。もしQuirksモードの条件にマッチした場合は「Quirksモード」でレンダリングされます。Quirksモードの条件にマッチしなかった場合は、標準準拠モードでレンダリングされますが、IE7のエミュレート機能の状態によってさらにモードが切り変わります。エミュレート機能が有効であった場合には「IE7標準準拠モード」でレンダリングされ、無効だった場合は「IE8標準準拠モード」でレンダリングされることになります。

レンダリングモードの指定

IE8では、Webページ側からレンダリングモードを指定することが可能になりました。レンダリングモードを指定する方法は以下の2つです。

ページのmeta要素で指定する
HTTPレスポンスヘッダで指定する

今日のベータセミナーで話された内容によると、優先度的にはmeta要素の指定がもっとも優先され、次にHTTPレスポンスヘッダ、その次がDOCTYPE宣言の順だそうです。ではmeta要素の指定方法について解説します。次のコードはIEのそれぞれのレンダリングモードをmeta要素で指定したものです。

// IE8標準準拠モードを指定
<meta http-equiv="X-UA-Compatible" content="IE=8">

// IE7標準準拠モードを指定
<meta http-equiv="X-UA-Compatible" content="IE=7">

// Quirksモードを指定
<meta http-equiv="X-UA-Compatible" content="IE=5">

// 最新の標準準拠モードを指定 (IE8の場合はIE8標準準拠モード)
<meta http-equiv="X-UA-Compatible" content="IE=edge">

// 複数を指定した場合は最新の標準準拠モードを用いる
// (この場合はIE8標準準拠モードになる)
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=7; IE=8">

このようにバージョン番号を指定することで、レンダリングに用いるモードをページ側が指定することができます。また「IE=edge」という値を用いると最新のレンダリングモードが選択されます。なお、複数のモードを同時に選択した場合は新しい方のレンダリングモードが採用されるようです。

HTTPレスポンスヘッダを用いる場合も、meta要素の指定と同様に「X-UA-Compatible」という名前で値を送信すればモードを指定することができます。サーバー単位でレンダリングモードを指定してしまいたい場合などは、HTTPヘッダを用いる方が楽そうですね。レンダリングモードの切り替えについてはInternet Explorer 8 Beta 1 Whitepapersの「Versioning and Internet Explorer Modes」という文書に詳しく書かれていますので、そちらも参照してください。

レンダリングモードを確認する

最後にレンダリングモードを確認する方法も書いておきます。レンダリングモードはJavaScriptから document.documentMode プロパティの値で確認することができます。以下にコード例を示します。

// レンダリングモードを取得
var engine = document.documentMode;

上記コードではengineの値が「5」ならばQuirksモード、「7」ならばIE7標準準拠モード、「8」ならばIE8標準準拠モードとなるため、レンダリングモードを確認することができます。より詳しい情報はInternet Explorer 8 Beta 1 Whitepapersの「Versioning and Cross-Document Interaction」を参照するのがいいでしょう。

まとめ

長くなってしまったのでとても簡単なまとめを。

IE8には3つのレンダリングモードがあります
IE7のエミュレート機能の状態により使われるレンダリングモードが変わります
IE8からは、レンダリングモードをページ側から指定することが可能になります
JavaScriptで使われているレンダリングモードを知ることもできます

なお、IE8 Beta 1には「Emulate IE7」というエミュレート機能を有効にするためのボタンが搭載されていますが、一般ユーザーはこのボタンを使うことは基本的にないだろうということから、正式版では外される可能性が高そうです。とはいえ、ユーザー側がどのレンダリングモードが使われているのかを確認する手段は何かしら欲しい気はしますね。

追記1: X-UA-Compatibleの値の検証

vant先生がX-UA-Compatibleに「IE=6」と指定した場合の挙動を気にしていたので、軽く検証してみた。検証は、meta要素のX-UA-Compatibleに「IE=xx」と適当な数字を入れて、JavaScriptから document.documentMode プロパティの内容を表示させる方法を用いました。結果は以下の通り。

// IE=6を指定
<meta http-equiv="X-UA-Compatible" content="IE=6">
alert(document.documentMode) //=> 5 (Quirksモード)

// IE=5.5を指定
<meta http-equiv="X-UA-Compatible" content="IE=5.5">
alert(document.documentMode) //=> 5 (Quirksモード)

// IE=6.9を指定
<meta http-equiv="X-UA-Compatible" content="IE=6.9">
alert(document.documentMode) //=> 5 (Quirksモード)

// IE=4を指定
<meta http-equiv="X-UA-Compatible" content="IE=4">
alert(document.documentMode) //=> 8 (IE8標準準拠モード)

// IE=100を指定
<meta http-equiv="X-UA-Compatible" content="IE=100">
alert(document.documentMode) //=> 8 (IE8標準準拠モード)

// IE=abcを指定
<meta http-equiv="X-UA-Compatible" content="IE=abc">
alert(document.documentMode) //=> 8 (IE8標準準拠モード)

どうもIE=5からIE=6までの値はQuirksモードとして扱われるみたいです。IE=5未満の値と、IE=8以上の値、そしてIE=abcといった文字列のパターンは全て最新の標準準拠モードが使われるみたいですね。ちなみにIE=6aとかも試しましたが、やはりQuirksモードに切り替わりました。

追記2: IE8 Beta 2での変更点

IE8 Beta 2では、新たにEmulateIE8モードやEmulateIE7モードが追加されました。これらのモードの詳細についてはIE8のEmulateIE8/EmulateIE7モードをご覧ください。