2007.06.29（Fri）
ブラウザのレンダリングモード切替スイッチ一覧
この本を参考に、HTML(XHTML)のバージョン、XML宣言の有無、DTDの有無によってレンダリングモードを切り替えるブラウザについて調べたことがある。折角なので参考になる人もいるかもしれないから公開してみることにした。
ちなみにDTDとは「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」とあるような文書型宣言のこと。
言葉の意味は次の通り。Old Gecko系：NN6.x、Mozilla1.0、New Gecko系：Fire Fox、Mozilla1.1以上、NN7以上、Safari系：Safari1.0以上、Opera7.x：Opera7以上のことでOperaの情報が古いが、まぁOperaは最もW3Cの仕様に忠実なレンダリングをするので、FireFoxで問題なければまず崩れることはない。Operaで崩れる現象が起きた場合は、それはOperaがおかしいのではなくコードがおかしく、FireFoxの実装がおかしいともいえる場合が多々（逆もあるが）。
S：標準（StandardI)モード、AS：Almost Standardモード、FS：Full Standardモード、Q：Quirksモード(後方互換モード)。標準モードとAlmost Standardモード、Full Standardモードはほぼ同じと考えても差し支えない。ASの場合に若干tableセル内に入れた画像の余白が変わるだけ（と認識している）。
問題はIE6をターゲットブラウザに入れてXHTMLで記述する場合だろう。XHTMLでは「XHTML1.0で且つエンコードがutf-8またはutf-16、且つDTDを参照している」場合以外は、必ず「XML宣言」記述しなければならないという決まりがある。「XML宣言」とは「<?xml version="1.0" encoding="utf-8"?>」というXHMTLファイルの先頭に書かなければならない宣言のこと。
IE6には、「文書型宣言より前に何らかの文字があると後方互換（Quirksモード）モード切り替る」という最悪のバグがある。つまり、「XML宣言」を記述することによって、レンダリングがIE5のそれと同じになってしまうのだ。つまり「margin:0 auto;」でブロックレベル要素がセンタリングできない。「ボックスモデルの解釈」が変わる等々。
IE6のシェアはまだまだ高く、思ったよりIE7への移行は進んでいない。また企業のOSはWindows2000が以前として標準的に使われているところも多く、IE7はXP以上のOSが対象なので、IE6が残り続けることになる。従って現段階ではIE6も考慮したコーディングが求められる。
もちろん、「XML宣言」を入れなきゃいいじゃんという意見もるけど、なるべく仕様に忠実なコーディングをしたくなるのがコーダーのコーダたる宿命。それにソードの再利用を考えた場合にもなるべく仕様に忠実な方が良い（まっこれは俺の性格かもｗ） また様々なハック方法、例えばbodyに「text-align:center;」を入れて、divに「text-align:left;」を入れればいいじゃんとかアンダースコアハックを使えばいいじゃんとかあるけど、ソースコードはなるべくクリーンに保ちたいもの。
まっそんな時に条件分岐を使うのがオススメなんだけどね。
ちなみにDTDとは「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」とあるような文書型宣言のこと。
言葉の意味は次の通り。Old Gecko系：NN6.x、Mozilla1.0、New Gecko系：Fire Fox、Mozilla1.1以上、NN7以上、Safari系：Safari1.0以上、Opera7.x：Opera7以上のことでOperaの情報が古いが、まぁOperaは最もW3Cの仕様に忠実なレンダリングをするので、FireFoxで問題なければまず崩れることはない。Operaで崩れる現象が起きた場合は、それはOperaがおかしいのではなくコードがおかしく、FireFoxの実装がおかしいともいえる場合が多々（逆もあるが）。
S：標準（StandardI)モード、AS：Almost Standardモード、FS：Full Standardモード、Q：Quirksモード(後方互換モード)。標準モードとAlmost Standardモード、Full Standardモードはほぼ同じと考えても差し支えない。ASの場合に若干tableセル内に入れた画像の余白が変わるだけ（と認識している）。
| 条件 | ブラウザ | |||||||
|---|---|---|---|---|---|---|---|---|
| HTMLまたはXHTMLのバージョン | XML宣言 | DTD | OldGecko系 | NewGecko系 Safari系 | Mac IE5 | Windows IE6 | Windows IE5.x | Opera7.x |
| HTML 4.01Strict | － | 無し | S | FS | Q | S | Q | S |
| 有り | S | FS | S | S | Q | S | ||
| HTML 4.01 Transitional | － | 無し | Q | Q | Q | Q | Q | Q |
| 有り | Q | AS | S | S | Q | S | ||
| XHTML1.0 Strict | 無し | － | S | FS | S | S | Q | S |
| 有り | － | S | FS | S | Q | Q | S | |
| XHTML1.0 Transitional | 無し | － | S | Q | S | S | Q | Q |
| 有り | － | S | AS | S | Q | Q | S | |
問題はIE6をターゲットブラウザに入れてXHTMLで記述する場合だろう。XHTMLでは「XHTML1.0で且つエンコードがutf-8またはutf-16、且つDTDを参照している」場合以外は、必ず「XML宣言」記述しなければならないという決まりがある。「XML宣言」とは「<?xml version="1.0" encoding="utf-8"?>」というXHMTLファイルの先頭に書かなければならない宣言のこと。
IE6には、「文書型宣言より前に何らかの文字があると後方互換（Quirksモード）モード切り替る」という最悪のバグがある。つまり、「XML宣言」を記述することによって、レンダリングがIE5のそれと同じになってしまうのだ。つまり「margin:0 auto;」でブロックレベル要素がセンタリングできない。「ボックスモデルの解釈」が変わる等々。
IE6のシェアはまだまだ高く、思ったよりIE7への移行は進んでいない。また企業のOSはWindows2000が以前として標準的に使われているところも多く、IE7はXP以上のOSが対象なので、IE6が残り続けることになる。従って現段階ではIE6も考慮したコーディングが求められる。
もちろん、「XML宣言」を入れなきゃいいじゃんという意見もるけど、なるべく仕様に忠実なコーディングをしたくなるのがコーダーのコーダたる宿命。それにソードの再利用を考えた場合にもなるべく仕様に忠実な方が良い（まっこれは俺の性格かもｗ） また様々なハック方法、例えばbodyに「text-align:center;」を入れて、divに「text-align:left;」を入れればいいじゃんとかアンダースコアハックを使えばいいじゃんとかあるけど、ソースコードはなるべくクリーンに保ちたいもの。
まっそんな時に条件分岐を使うのがオススメなんだけどね。
- 関連記事
-
- ブラウザのレンダリングモード切替スイッチ一覧
- 【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々
- 【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する
- IE7をスタンドアローンでインスコ
- XHTML+CSSスタンダード・デザインガイド
- クソIEをハックしてやる！（IEの条件分岐の使い方）
- 【html/xhtml】ユーザビリティを高める「<label>」の使い方
- ユニバーサルセレクタ（*）はもう古い？
- 【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？
- 【xhtml/css】linkを記述する時の順序は「LVHA（ラブハ）」で覚えましょう
タグ（ブログ内検索もできます）：後方互換モード レンダリング IE6 Quirksモード XHTML CSS スタイルシート バグ
関連エントリー
Loading
この記事のトラックバックURL
この記事へのトラックバック
| BLOGTOP |
※コメントは承認するまで表示されません。