今日も2週に一度の更新の日。
今朝は小田急線での人身事故の影響で、朝から経堂駅付近で足止めをされてしまい。
朝からなんだか凹みモード。
そー言えばIE8 bate2がリリースされたことを、今日の生徒さんには説明をしておいたんですが、やっぱりちょっとネタが早すぎたせいか、頭上に「？」がいっぱい飛んでいたので、ここでIE8 beta2の開発者ツールをつかってレンダリングの強制変更について説明しておこう。
前回、IE8 beta1がリリースされた直後に「IE8にはレンダリングモードが3つある」ことを書いたが、IE8以降は制作者側の意志をもって強制的にレンダリングモードを変えてロックしてしまうことが出来る。つまりWebサイト内で古いHTML記述のページがあったり、どうしても互換モードで表示させたいページがある場合などに使える。
その方法としては2種類。
- meta要素に記述する：
- <meta http-euiv="X-UA-Compatible"content="IE=xx">
- HTTPヘッダを利用する：
- 名前： X-UA-Compatible
値： IE=xx
「xx」部分に入れられるのは、以下のようなモノがある。
| Quirks | IE=5 |
|---|---|
| Standards | IE=7 |
| IE8 Standards | IE=8 |
| 常に最新指定 (Always Use Latest Mode) |
IE=edge |
ちなみに、「IE=6」と書いても「Quirksモード」なり、「８」以上や任意の「アルファベット」を挿入しても「8 standard」になる。
おそらく最新レンダリングを選ぶ「IE=edge」と同じ動きをしているかもしれない。
実際にIE8 bate2に入っている「開発者ツール」でチェックをしてみよう。
「開発者ツール(F12)」は、メニューの「ツール」-「開発者ツール」で起動することができ、ポップアップモードとブラウザの下にドッキングさせるモードとがある。
この「開発者ツール」は、Firebugみたいにリアルタイムで様々なデバックが出来るので、今後は重宝できることだろう。しかも、レンダリングモードを今回は再起動なしで切り替えることが出来るので、ひとまず入れておいて、必要に応じて別のレンダリングにしてチェックすることも可能なのが嬉しい。
では、ここでは簡単に出来るmeta要素内への記述でレンダリングの変化をスクリーンショットしてみた。
- <meta http-euiv="X-UA-Compatible"content="IE=8">
- <meta http-euiv="X-UA-Compatible"content="IE=7">
- <meta http-euiv="X-UA-Compatible"content="IE=5">
実際にmeta要素内だけで、レンダリングモードが変換しているのは、ボックスモデルの解釈違いを確認すれば一目瞭然。例えソースのクォリティ的にDOCTYPE宣言を統一してあっても、特定のページだけ互換モードで表示させることもこれで可能ということ。つまり、そこだけ別途HTMLソースを用意することもなくなる。
こーなると、「早くIE6以下なんてなくなってしまえばいいのに」と思ってしまうのは私だけだろうか。（苦笑）
【関連記事】
この記事が為になった方は ⇒
新着情報