Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2008年06月05日
IE8のモードスイッチ
フロントエンド・エンジニア 矢倉
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とレンダリングモードの関係など、ここで触れていない情報については、次のスライドや記事が参考になります。
- CSS Nite公式ブログの「CSS Nite in Shinjukuフォローアップ（2）」で公開されているPDF資料（17ページより）
- SummerWind - IE8のレンダリングモードに関するまとめ
コメント
コメントする
この記事のトラックバックURL:
http://standards.mitsue.co.jp/cgi-bin/mt/mt-tb.cgi/322
