ブラウザのレタリングモードについて (最新はXHTML1.1)

WebDesign

DOCTYPEスイッチ

ブラウザは、XHTMLの文章型(どの文章型宣言がされているか)によってレタリングモードを変更します。
この仕組みを「DOCTYPEスイッチ」といいます。

文章型宣言の一覧はこちら

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">

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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML 1.0 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML 1.0 Frameset
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML 1.1 (Strict) ※XHTML 1.1はStrictしか存在しません。
<?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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

レタリングモード

レタリングモードには、「標準準拠モード」と「後方互換モード」があります。

特徴は、以下の通り。

標準準拠モード W3Cの標準仕様に準拠しているモード
後方互換モード 下位互換を優先するモード

後方互換モードで表示を行うと、ブラウザ間の差異が明確に現れます。
また、後方互換モードではIE6に致命的なバグが存在するため、
クロスブラウザ対応を考えると、標準準拠モードで表示するのが通常です。

現在のレタリングモードを確認する。

レタリングモードを確認するために、javascriptのcompatModeを利用します。

確認したい画面を開き、URL(アドレス)に以下のjavascriptを入力してください。

javascript:alert(document.compatMode)

※ブックマークとしてjavascriptを登録しておくと便利です。



入力するとアラートが表示されます。

アラート内容の対応表はこちら

CSS1Compact 標準準拠モード
BackCompact 後方互換モード

標準としてどの文書型を使うのか

個人的には、XHTMLの最新バージョンであるXHTML 1.1を利用しています。

ただ、前述した文章型宣言には冒頭にXML宣言が書かれているため、
IE6では、「後方互換モード」となってしまいます。

よって、XML宣言を除いた以下のように書きます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

まとめ

デザインのクロスブラウザ対応を始める前に、
対応する全てのブラウザのレタリングモードが、「標準準拠モード」となっていることを確認しましょう。


そこから、W3Cの標準仕様に対し準拠度が高いブラウザでレイアウトを揃えて、
準拠度が低いブラウザ用にハックしていくのが良いと思います。


それでは、健闘を祈る（・ω・）ﾉｼ