2024年02月 / 01月≪ 1234567891011121314151617181920212223242526272829≫03月
2007.06.29(Fri)
Top Page > CSS/XHTML > ブラウザのレンダリングモード切替スイッチ一覧

ブラウザのレンダリングモード切替スイッチ一覧

この本を参考に、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セル内に入れた画像の余白が変わるだけ(と認識している)。



条件別ブラウザのレンダリングモード
条件 ブラウザ
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宣言」を入れなきゃいいじゃんという意見もるけど、なるべく仕様に忠実なコーディングをしたくなるのがコーダーのコーダたる宿命。それにソードの再利用を考えた場合にもなるべく仕様に忠実な方が良い(まっこれは俺の性格かもw) また様々なハック方法、例えばbodyに「text-align:center;」を入れて、divに「text-align:left;」を入れればいいじゃんとかアンダースコアハックを使えばいいじゃんとかあるけど、ソースコードはなるべくクリーンに保ちたいもの。

まっそんな時に条件分岐を使うのがオススメなんだけどね。
関連記事

タグ(ブログ内検索もできます)後方互換モード レンダリング IE6 Quirksモード XHTML CSS スタイルシート バグ

12:37  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

関連エントリー

Loading


Comment

コメントを投稿する

※コメントは承認するまで表示されません。


管理者だけに表示

▲PageTop

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP |