SummerWind

Web, Photography, Space Development.

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

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

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

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

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

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

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レスポンスヘッダ、その次が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 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モードをご覧ください。

Moto Ishizawa

Moto Ishizawa
プラットフォームエンジニア。HTTP/2 などのネットワークプロトコルや、サーバーサイド JavaScript などに強い興味を持つ。ロケットの打上げを見学するために、たびたびフロリダや種子島にでかけるなど、宇宙開発分野のファンでもある。