InternetExploreのドキュメントモードとは、Webページのソースコード、DTD宣言などに応じてHTMLおよびCSSの出力方法、つまりレンダリング/表示方法が変わる仕組みのことです。
これはIEのバージョンによって、レンダリングする機能(レンダリング・エンジン)が大きく異なるためだ。背景にはリリースされる時期ごとに、Web標準への準拠があり、レンダリング・エンジンのバージョンによっては、意図したとおりにWebページが表示されない。
それを回避するために、バージョンごとの表示機能をIEは実装しています。
ドキュメントモードは、ページ制作者側でも指定できますし、UA側でも変更することが可能です。
IE10においてのドキュメントモード以下の通り 。
○標準
○Quirks
○IE9標準
○IE8標準
○IE7標準
○IE5 Quirks
IEのバージョンによりレンダリングがことなるので、レイアウトが崩れたりすることがあるので、正しいレンダリング・モードで表示指定する必要がある。
ドキュメントモードの選択によりレイアウトが崩れたり、表示が意図しない場合は、制作側で表示指定の記述が必要だ。
■ドキュメントモードの説明
ドキュメントモードには大きく分けるとIEx標準と、Quirks(クワークス)モードがある。
○Quirksモードとは？
いわゆる古いドキュメントエンジン用の表示設定で、DOCTYPEの宣言がない場合やHTML2.0/3.0など、HTML4以前のHTMLコードで制作された場合に選択される。
例えばIE10では以下がヘッダにあると、標準モード(IE10ドキュメントモード)がページの既定となり表示され、DTD宣 言をなくすと、Quirksモードが既定のモードとなり表示される。
HTML5でのDTD記述、
では標準モード、記述をなくせばQuirksモードがページ既定のモードとなり表示。
IE5 QuirksモードとQuirks(ページの既定)は異なります。
Quirks モードは、標準モードと同一APIの動作セットで、HTML5と関連するW3C仕様で定義されている、限られた例外機能が使用可能になっています。
IE10でページを表示させるときに、IE10が標準モードでページを表示するか、Quirksモード(古いソースコードを基準にした)/互換モードで表示されるかの判別をDTD宣言の有無で判断しているということです。
また、IE10では表示ができない機能などがあった場合、ドキュメントモードをmetaタグに記述して自動選択して表示させることが可能だ。
■ドキュメントモードの指定にはmetaタグ内でモードを指定方法
headタグ内のtitleタグの上に下記を追加して互換モードを指定可能だ。
＜meta http-equiv=”X-UA-Compatible” content=”IE=emulateIE9″ /＞
※上記の場合はIE9Quickモードを指定している。
EmulateIE9をIE9とすることで、IE9標準モードをページ表示時のドキュメントモードとして指定することが可能だ。IExの数値を変更することで、IEの各バージョン(IE7まで)を指定することが可能だ。
互換モードというのは、次世代のバージョンに対応しない形式で作成されたWebページなどを、以前のバージョンのレンダリングエンジンで表示させることができるモード。
■ドキュメントモードのブラウザからの確認方法
[F12]キーを押すか、メインメニューの[ツール]-[開発者モード]で、ウィンドウ下部に開発者ツールウィンドウが表示される。
メニュー部分のブラウザモードの右に、ドキュメントコードがあり、選択されているド キュメントモードが表示されている。この項目を選択するとプルダウンメニューが表示されるので、指定を変更するときは、メニューからモード指定することができる。
■表示されているIEのレンダリング・モードの確認用JavaScript
Webページ表示の時に選択されているレンダリングモードを表示させるJavaScriptによる記述。
＜script type=”text/javascript”＞
＜!–
var rendMode = document.documentMode;
document.write(“レンダリング・モード＝「”
+ rendMode + “」です。”);
// –＞
＜/script＞