ホーム > UI の設計 > ブラウザの「標準モード」と「互換モード」と GWT

ブラウザの「標準モード」と「互換モード」と GWT

Web アプリケーションの UI を設計をする際に知っておかないといけないのは、ブラウザには何種類かの描画モードがあるということです。この描画モードを意識しないとブラウザによって見え方がバラバラになってしまいます。

ここでは描画モードについて理解を深めましょう。

描画モードとは？

最近のブラウザにはたいてい、「描画モード」 (Rendering Mode) というのがあります。

同じ HTML/CSS を書いてもブラウザによっては表示のされ方が違ったりすることがあるということは、ある程度 HTML (CSS 含む) を書いたことのある方ならご存知と思います。

実はブラウザの相違だけで見た目が変わるのではなく、同じブラウザ、同じバージョンでも表示のされ方が違う場合があります。これは、「描画モード」が違うからです。

ではなぜ、描画モードが導入されたのでしょうか。

歴史的な経緯はここでは触れませんが、現状 HTML/CSS はブラウザ毎に表示のされ方が違ってしまっています。業界では、これをどうにかして同じように表示されるように「標準化」していこうとしています。

標準を決めて、それにエイヤッと全部切り替えてしまえばよさそうですが、それにも問題があります。

過去に作った Web サイトが思ったように表示されなくなるからです。

従って、従来の表示のされ方も、標準に従っていないとは言っても大切だったりします。

そこで導入されたのが「描画モード」です。

描画モードの種類

下位互換性を重視して従来通りの表示をするモードが「互換モード」(Quirks mode)、標準化を重視し、いわば正しい描画をするのが「標準モード」(Standard mode) です。

さらに「準互換モード」(Almost standards mode) というモードがあるブラウザもあります。

描画モードの切り替え

通常描画モードは、DOCTYPE スイッチによって切り替えることができます。

具体例を挙げます。

例えば Internet Explorer (IE) 8 では、HTML の冒頭に次の DOCTYPE 宣言が書いてあると、その HTML は標準モードで描画されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

一方、次の DOCTYPE 宣言があると、互換モードになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

DOCTYPE スイッチと描画モード

Firefox、IE、Chrome、Safari に着目すると、DOCTYPE による描画モードの違いは以下のようになります。

DOCTYPE	Firefox Safari Chrome	IE 8	IE 7	IE 6
無し	Q	Q	Q	Q
HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">	Q	Q	Q	Q
HTML 4.01
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	S	S	A	A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">	S	S	A	A
Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	A	A	A	A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">	Q	Q	Q	Q
HTML 5
<!DOCTYPE html>	S	S	A	A
XHTML Basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">	S	S	A	A
XHTML 1.0
Strict
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	S	S	A	Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	S	S	A	A
Transitional
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	A	A	A	Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	A	A	A	A
XHTML 1.1
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	S	S	A	Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	S	S	A	A

S: 標準モード、Q: 互換モード、A: 準互換モード この表は Wikipedia 掲載の表 (4/30/2010) から、 Firefox、Windows IE、Chrome、Safari 以外の項目を削除し一部日本語化して作成しました

GWT と描画モード

GWT での DOCTYPE 宣言は通常ホストページに記述します。

GWT のクラスライブラリには、「標準モードのみ利用可能」、「互換モードのみ利用可能」という指定があります。 UI の設計を行う際には、あなたの Web アプリケーションのターゲットとなる環境で利用可能なクラスかどうか確認するように気をつけてください。

GWT デフォルトは <DOCTYPE html>

GWT プロジェクトを作成した際にデフォルトで、 HTML5 の DOCTYPE 宣言である、 <DOCTYPE html> が設定されているはずです。

すなわち、作成された GWT プロジェクトはデフォルトの状態で Firefox や IE8 以降で標準モードとして、IE6 や IE7 では準標準モードとなります。つまり標準モードで利用できる GWT クラスを利用していけば、IE8 以降および Firefox、Chrome、Safari では問題なく表示され、IE6/7 では一部描画が異なる部分があるということになります。

そして、互換モードのクラスライブラリを利用するのは間違い、ということになります。

ホーム > UI の設計 > ブラウザの「標準モード」と「互換モード」と GWT