IEのレンダリングモードをタグで明示的に指定する | モノについてのモノ語り

IEのレンダリングモードをタグで明示的に指定する地震の影響で日本語版は、リリースが延期になったが、「Internet Explorer 9」がリリースされた。

私も英語版をダンロードしているが、パフォーマンス面で大きな改善が見られる。

ウェブ標準準拠については、IE8で個人的に満足が行くレベルになっていたし、HTML5やCCS3へ新たに準拠しているが、これについては実際に恩恵に預かるのは、まだ先の事と考えている。

私が管理しているHPも当面はXHTMLで記述するつもりだ。

ともあれ、他の主要ブラウザと比較しても遜色のないレベルに仕上がっており、近年のIEとしては、評価に値するバージョンだ。

しかし、ウェブ作成者の立場で、１つ気に入らない点がある。

正確にはIE8から実装された機能だが、アドレスバーに「（後方）互換モード」への切り替えボタンが表示される点が気に入らない。

世の中には、様々なウェブサイトが存在する。

W3Cが勧告するウェブ標準に沿った記述がされているサイトもあれば、ウェブ標準からズレたサイトもある。

その為、多くのブラウザは、複数のレンダリングモードを持ち、ウェブ標準に従ったサイトも、そうでないサイトも、綺麗に表示されるように工夫されている。

実際、FireFoxなどにも、ウェブ標準に基づいた解釈する「標準モード」や「ほぼ標準モード」の他、「（後方）互換モード」というウェブ標準からズレたサイトを表示するレンダリングモードが実装されている。

通常は、HTML上の「DOCTYPE」の記述によって、ブラウザがレンダリングモードを自動的に判断してる。

勿論、IEも例外ではない。

しかし、IE8以降では、ユーザーが「互換モード」へ明示的に切り替えるためのボタンが付いている。

プロデューサー、 cosumersおよび分解は何ですか

IEの場合、過去の経緯から「DOCTYPE」での判断だけでは、不順分なため、「もし、綺麗に表示されなかったら押して下さい。」的な、親切機能として付いているのだが、逆に、「DOCTYPE」による自動判断で正しいレンダリングモードが選択されるような記述を行なっているウェブ作成者にとっては、不愉快な機能だ。

書類が破れたように見えるアイコンで、見た目も良くない。

加えて、ユーザーが間違って押せば、予想外の結果を招く可能性もある。

そこで、IE8が登場してからは、このアイコンを消すためのだけに、ある「metaタグ」を追加してきたが、このブログには、追加していなかった。

IE8やIE9には、ブラウザモードとドキュメントモードという２つのモードがある。

ブラウザモードは、ブラウザの「振る舞い」を決め、ドキュメントモードは、所謂、レンダリングモードを指し、描画を決定している。

IE8やIE9を開いた状態で、「F12」キーを押すと、開発者ツールが表示されるが、ここで、ブラウザモードとドキュメントモードが切り替えられ、様々な描画条件での表示を確認する事ができる。

これはあくまで、開発者ツール上の機能で、一般向けではない。

ユーザーやサイト作成者が、ブラウザモードやドキュメントモードを明示的に指定する方法もあるが、正しく、HTMLを記述してさえいれば、通常は全く意識しなくて良い。

IE9では、４つのブラウザモードを実装してる。

• IE9・・・IE9して振舞う。
• IE9互換・・・「互換モード」ボタンを押したときに、このモードになる。IE7として振る舞うが、サーバーが受け取るユーザーエージェントから、本当はIE9であることも分かる。
• IE8・・・IE8として振舞う。
• IE7・・・IE7として振舞う。

具体的にブラウザモードを説明すると、ブラウザモードの切替で、IE9でも、IE7のように振舞わせる事ができる。

例えば、ブラウザモードをIE7に切り替えれば、サーバーが受け取るユーザーエージェントのバージョン情報もIE7になる。

しかし、ドキュメントモードは、別だ、ブラウザモードの切り替えだけでは、ドキュメントモードは変わらない。

ブラウザモードがIE7だが、ドキュメントモードはIE9標準という事もあり得る。

ただし、「互換モード」ボタンを押した時は、ブラウザモードだけでなく、ドキュメントモードも自動的に変更されるようになっているようだ。

ドキュメントモードは、描画、つまりサイトの見た目に影響する。

IE9に実装されているドキュメントモードは４つだ。

• IE9標準・・・（標準モードの）IE9での描画になる。
• IE8標準・・・（標準モードの）IE8での描画になる。
• IE7標準・・・（標準モードの）IE7での描画になる。
• Quirksモード（所謂、互換モード）・・・IE5での描画に近い。

ドキュメントモードは、HTML上の「DOCTYPE」の記述に従って自動選択されるので、「DOCTYPE」を正しく記述していれば意識する必要はない。

しかし、HTML側で明示的にドキュメントモードを指定する「meta」タグがIEでは用意されている。

細かな文法は割愛するが、下記のような「meta」タグだ。

上記の例では、IE8で参照した場合は、ドキュメントモードは、IE8標準モード、IE9で参照した場合は、IE9の標準モードが選ばれ、「互換モード」ボタンが表示されなくなる。

追加しなくても良い、むしろ不要なタグだと思うが、IE8、IE9から「互換モード」ボタンを消したい場合は、最も手軽の方法だ。

このタグは、ドキュメントモードのみを変更し、ブラウザモードやサーバーが受け取るユーザーエージェントには影響を与えない。

少なくとも、IE8ではそうであったが、IE9では、少し違うようである。

ドキュメントモードは変化しないが、サーバーが受け取るユーザーエージェントは、ドキュメントモードに合わせて変化する。

私は、ドキュメントモードやユーザーエージェント、その他の振る舞いを確認できるページを作成してチェックした。

以下で、ブラウザーモード、ドキュメントモード、ユーザーエージェントなどを確認できるHTMLをダウンロード出来るようにしておく。

サイズ:2KB

さて、ここまでは、横道。

本題は、このサイトから「互換モード」ボタンを消す事であるが、私がWordPressで使用しているテーマ「Weaver 2.0」の場合、HTML5を先取りしたのか「DOCTYPE」や「meta」タグの記述が少し変わっている。

もし、気になるなら、まずは、これを変更する。

現時点ではHTML5に関する知識がないので正しく判断できないが、おそらく、このテーマはHTML5で記述されている。

試した限りでは古いブラウザでも表示に問題はなく、必ずしも、この修正は必要ではない。

変更は、テンプレートの「ヘッダー（header.php）」に対して行う。

まず、

?>  >    

という記述を

'; ?>       xml:lang="ja">    

と置き換えた。

ほとんどのブラウザで、レンダリングモードとして標準モードが選択される記述だ。

'; ?>

と言う宣言文は、XHTML1.0では推奨されるが、これを加えると、IE6では、互換モードで表示される

加えて、このブログの文字コードは、UTF-8であるため、ウェブ標準上も省略が許される宣言文となり、省略しても構わない。

先にも書いたが、ここまでの変更は、目的のために、必ずしも必要とはされない。

続いて、