Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2008年6月 > IE8のモードスイッチ

IE8のモードスイッチ

2008年6月5日
フロントエンド・エンジニア 矢倉

IEBlogの“IE8 Beta 2 Coming in August”という記事にて、IE8 Beta 2が8月にリリースされるというアナウンスがありました。Beta 2ではCSS 2.1準拠に向けたバグ修正や、スクリプトのパフォーマンス向上が見込まれるようです。また、日本語を含む各言語版のBetaも配布されます。

さて、同じ記事にて「meta要素によるレンダリングモード指定の文書を公開しました。」という報告がありました。今回はこの“Defining Document Compatibility”という文書を参考に、改めてIE8のレンダリングモードについて解説したいと思います。

3つのレンダリングモード

IE8には3つのレンダリングモードが存在します。

IE8モード
CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
IE7モード
IE7の標準準拠モードと同じ
IE5モード
IE7やIE6の互換モードと同じ

これまで「標準モード」、「互換モード」とされていた呼称が変更されていますが、IE7モード、IE5モードにおいて表示に関する変更はないと考えてよいでしょう。

どのモードでレンダリングされるかは、これまでのIEと同じく、DOCTYPEによって決定されます。
DOCTYPEスイッチで切り替わるのは、IE8モードとIE5モードです。IE6やIE7と同じように、適切なDOCTYPEを記述することで、より標準に準拠したレンダリングモードで表示されることになります。IE8の場合は、IE8モードが該当します。

「metaスイッチ」

互換性という観点から、IE8にはIE7モードが備わっています。しかし、DOCTYPEによる指定で、IE7モードを選択することはできません。このため、IE8では明示的にレンダリングモードを選択するための「metaスイッチ」が導入されました。

たとえば、次のようなmeta要素を記述することで、文書をIE7モードで表示させることができます。

<meta http-equiv="X-UA-Compatible" content="IE=7">

metaによる指定はDOCTYPEを上書きするため、DOCTYPEが記述されていない文書でも、上記の指定をすることでIE7モードを適用させることができます。

選択できるモードは、IE7モードだけではありません。content属性の中にある「IE=○○」の値を書き換えることにより、各レンダリングモードを選択することができます。指定する主な値は次のとおりです。

IE=8
IE8モードで描画します。
IE=7
IE7モードで描画します。
IE=5
IE5モードで描画します。
IE=edge
一番新しいエンジンで描画します。
IE=emulateIE7
IE7としてページを描画します。

現時点では、IE=edgeとIE=8に違いはありません。もしIE9がIE9モードを備えてリリースされた場合、IE=edgeを指定した文書はIE9モードでレンダリングされることになります。

「IE7スイッチ」

さて、五番目の「IE=emulateIE7」は、Beta 2より登場する新しい値のようです。一見IE=7との違いが分かりませんが、IE=7はIE7モードで強制的にレンダリングするのに対し、IE=emulateIE7の場合は、さらに文書のDOCTYPEをチェックした上で、IE7モードかIE5モードでレンダリングするのかを決定します。「IE7スイッチ」といったところでしょうか。

<!DOCTYPE html PUBLIC ...
<html ...>
<head>
<title>emulateIE7</title>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
</head>
...

IE8で上記のHTMLを表示すると、DOCTYPEが記述されているためIE7モードで描画されます。DOCTYPEを取ってみると、IE5モードで表示されることになります。

モードの複数指定

metaスイッチには、複数のレンダリングモードを指定することができます。

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">

metaスイッチをサポートする今後のIEは、指定される値の中から、一番適したモードを選択します。上記の例ではIE7モードとIE9モードを選択していますが、IE8でその文書を表示させると、IE8モードではなくIE7モードでレンダリングすることになります。

しかし、複数のmeta要素を記述しても、最初の指定のみが有効になります。

<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=8">

この場合、IE8モードではなくIE7モードでレンダリングされます。

そのほか

モードスイッチはmeta要素による指定のほかに、HTTPヘッダにX-UA-Compatibleを指定することでも実現できます。また、どのモードでレンダリングしているかを知るために、document.documentModeプロパティが用意されています。

より詳しいDOCTYPEとレンダリングモードの関係など、ここで触れていない情報については、次のスライドや記事が参考になります。