たまにはこんなエントリも書いてみようかしら。
今年の３月に公開になっているInternet Explorer 8 Beta1ですが、CSS 2.1準拠などWeb標準の準拠に向けてのバグフィックスを続けているようです。
そのためレンダリングエンジンに若干変更があります。
具体的にはIE8では下記の３つのレンダリングモードを持っています。
- Quirks(クワークス)モード
- IE7標準モード
- IE8標準モード
Quirks(クワークス)モードというのはIE5.5まで繰り返されてきた発展途上期のレンダリングモードですね。
IE7標準モードはその名の通り、IE7での標準(Standard)モードですね。 QuirksモードよりWeb標準に近いレンダリングモードです。
そして、IE8標準モードはWeb標準への準拠にFocusしたレンダリングモードですね。
で、IE8ではレンダリングモードの指定が未指定である状態で、通常のHTMLを読み込むとIE8標準モードをデフォルトのレンダリングモードとしてレンダリングを行い、DOCTYPEなどの指定の内容によってQuirksモードとIE8標準モードの切り替えを行うワケです。
で、上記にもありますように互換性のため３つのモードがあり、その切り替え方法ということになるのですが、大きく分けると下記の３種類の方法でレンダリングモードを切り替えることができます。
- EmulateIE7ボタンによる切り替え
- Developer Toolsによる切り替え
- 互換モードスイッチによる切り替え
まず、EmulateIE7ボタンによる切り替えは、その名の通りIE8を起動するとEmulateIE7というボタンがついています。 このボタンをクリックすると「IE8を完全に終了させて再起動するとIE7モードに切り替わります」といった主旨のメッセージが表示されます。 これはBeta2には再起動なしで切り替えできるようになるそうです。
これにより、IE7の標準モードに切り替わるワケです。 もちろん、再度クリックして再起動するとIE8標準モードへ戻ります。
次にDeveloper Toolsです。 これはIE8から標準搭載される開発者向けのツールなのですが、HTMLのツリー表示を行ったり、CSSを閲覧できたり、スクリプトのステップ実行や変数のウォッチを行えたりするツールなのですが、この中にレンダリングエンジンを切り替えることができる機能が搭載されています。 これは再起動不要でそのままレンダリングモードの切り替えができますので互換性のチェックを行う際に便利です。
これらは、あくまでコンテンツを見る側での操作が必要となる切り替え方法です。 ですので、IE8にバージョンアップしたことで表示が崩れるサイトがあれば、こういった操作により正しく表示できる可能性が高くなります。
そして、次にユーザー側の操作ではなく、サーバーやコンテンツ側で切り替える方法ですが、互換モードスイッチと呼ばれるスイッチが搭載されています。 これは大きく分けてhttpレスポンスヘッダに設定する方法とコンテンツ側に設定する方法があります。
まず、互換モードスイッチについて説明するとスイッチには下記の種類があります。
| モード |
互換モードスイッチ |
| Quirks(クワークス)モード |
IE=5 |
| IE7標準モード |
IE=7 |
| Quirks/IE7標準モード |
IE=EmulateIE7 |
| IE8標準モード |
IE=8 |
| 最新モード |
IE=edge |
互換モードスイッチは指定されるとそのDOCTYPEなどは関係なく、そのレンダリングモードで描画されますが、一部例外があります。
最初に書いたように通常、何も未指定の場合はDOCTYPEの記述があった場合、IE8標準モードとQuirksモードをDOCTYPEの内容により切り替えていましたが、互換モードスイッチで「IE=EmulateIE7」を指定されると、DOCTYPEによるレンダリングモードの切り替えがIE7標準モードとQuirksモードによる切り替えとなります。 つまり、従来のIE7との互換性が高いモードとして切り替えてくれるのがこのEmulateIE7というスイッチですね。
それ以外にも、常に最新のレンダリングモードで描画させたい場合は互換モードスイッチ「IE=edge」を指定すると、新しいIEのバージョンに対応した最新のレンダリングモードで描画されます。
さて、肝心の互換モードスイッチの指定方法ですが、まずIISなどのWebサーバー側設定する場合はhttpレスポンスヘッダーにて「X-UA-Compatible」という名前で値に互換モードスイッチを指定します。
そしてクライアント側ではmetaタグで指定します。 指定方法はHEAD要素内に
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
といった形でcontent属性の値に適切な互換モードスイッチを指定することでレンダリングモードが切り替わります。
これらのスイッチの優先順位は
- Developer Tools
- metaタグ
- httpレスポンスヘッダー
- DOCTYPE
という形になっていますので、その優先順位を考慮しつつ、適用されることをお奨めします(^^)
IE8になってこのようにデフォルトが変わってしまうので要注意ですね(^^)
2008/06/18 11:00 追記：互換モードスイッチ「IE=EmulateIE7」ですが、IE8 Beta1ではKB951804を適用しないと有効になりません。 Beta2以降は標準で入っているようですが・・・。