さて、Internet Explorer 8
ベータが現在公開されている訳だが、
既にチェックをしているクリエーターさんは、このIE8の表示モードには「3モードレンダリングエンジン」機能があるのは知っていることだろう。
ここれは知らない人の為に・・・そして自分のやってる講義用にメモ書きしときたい。
内容は、先日のCSSnite in Shinjukuの五寳さんのプレゼンのをまとめ。
IE8においては、強制的にレンダリングモードを切り替えられ、
今後はレンダリングモードを変えて互換性をとっていこう、というモノだ。
具体的には以下のような方法で切り替えることができる。
- DCTYPE宣言とmeta要素によるモード変更
- HTTPヘッダーでのモード変更
この構成は、IE8の表示を基準としたデフォルトの“IE8レイアウト”と、互換性のための“IE7レイアウト”の２つに大きく分かれる。
そして、“IE7レイアウト”には、それ以前の互換性とをとれるようにQuirks modeが用意されている。
| IE <= 6 | IE 7 | IE 8 |
|---|---|---|
| Quirks mode | IE 7 Standards mode | IE 8 Standards mode |
| IE 7 Layout | IE 8 Layout | |
１つずつ見ていこう。
| DOCTYPEフォームの終わり | DOCTYPE内のURL表記の有無 | 適用される レンダリングモード |
|
|---|---|---|---|
| meta要素 なし |
DOCTYPEなし | いずれの場合も | Quirks モード （IE7レイアウトモード） |
| HTML (Version指定なし) |
Quirks モード （IE7レイアウトモード） |
||
| HTML 2.0 | Quirks モード （IE7レイアウトモード） |
||
| HTML 3.0 | Quirks モード （IE7レイアウトモード） |
||
| HTML 4.0 | IE8 Standards モード (CSS2.1) |
||
| HTML 4.0 Frameset |
URLあり | IE8 Standards モード (CSS2.1) |
|
| URLなし | Quirks モード （IE7レイアウトモード） |
||
| HTML 4.0 Transitional |
URLあり | IE8 Standards モード (CSS2.1) |
|
| URLなし | Quirks モード （IE7レイアウトモード） |
||
| HTML 4.0 Strict |
いずれの場合も | IE8 Standards モード (CSS2.1) |
|
| XHTML | IE8 Standards モード (CSS2.1) |
||
| XML | IE8 Standards モード (CSS2.1) |
||
| Unrecongnized DOCTYPE | IE8 Standards モード (CSS2.1) |
||
| IE8 指定 あり(IE=8) |
DOCTYPEの有無、 内容に関わらず |
IE8 Standards モード (CSS2.1) |
|
| IE7 指定 あり(IE=7) |
IE7 Standardsモード | ||
| 互換指定(IE=5) | Quirks モード （IE7レイアウトモード） |
||
| 指定あり(IE=edge) | IE8 Standards モード (CSS2.1) |
と、いう表示指定種類がある。
もう少し詳しく指定について説明をすると、meta要素への指定については以下のようにコメントを入れる事で表示をロックすることができる。
つまり互換モードスイッチは"Quirksモード"or"IE7 Standardsモード"でロックか可能になっていて、
常に最新モードにしておきたい場合は、「edge」をmeta要素に記述すればロック出来る。
| Quirks | IE=5 |
|---|---|
| Standards | IE=7 |
| IE8 Standards | IE=8 |
| 常に最新指定 (Always Use Latest Mode) |
IE=edge |
具体例として、IE8 Standardモードでロックをするならば、
- meta要素の場合：
- <meta http-equiv="X-UA-Compatible"content="IE=8">
- HTTPヘッダの場合：
- 名前： X-UA-Compatible
値： IE=8
最終的に、3段階で表示レンダリングの調整が可能になるのだが、
これにはしっかり優先順にがあり・・・
DOCTYPE < HTTPレスポンスヘッダ < meta要素
と、なる。
古いブラウザの時につくってしまい、IE7やIE8のレンダリングに崩れるや、IE7レンダリングで表示させたい場合などは、最終的に基本IE8 レンダリング用にソースは書くものの、一部のぺージだけmeta要素などで強制的にレンダリングを切り替えて、表示の崩れを防ぐこといなる。
そのため、これまでIE向けのCSSとして、条件分岐コメント(Conditional Comments)方式を利用してきたソースなんかの場合も、IE7を起点にして「それ以上(if lte IE XX)」か「それ以下(if gte IE XX)」という記述を用いて、あとはmeta要素などで切り替える形になっていくだろう。
- IE8 Standardsモード用のソースの場合
- <!--{if lte IE 7} -->
- Quirks or IE 7 Standards用のソースの場合
- <!--{if gte IE 7} -->
【関連記事】
この記事が為になった方は ⇒
新着情報