標準モードと互換モードについて

汎用性を保たせるためのモード

HTMLの形式が徐々に進化することに並行して、HTMLを装飾(デザイン)するスタイルシート(以下CSS)も変化し続けています。現在のブラウザはCSSの標準に準拠した解釈でページを表示するようになっていますが、ブラウザの種類やHTMLの形式によってその解釈が異なることがあります。従って、個々のブラウザでは古いHTMLのバージョンで書かれたページも表示できるように、互換モードが搭載されています。

現在のブラウザの多くはCSS標準に基づいてページを表示するするようになっています。このCSSの標準に準拠して表示するモードを『標準モード』、一方過去のブラウザでも表示できるようなレイアウトで表示するモードを『互換モード』と呼んでいます。

従って、HTMLだけでなく、スタイルシートも使ってページをデザインするには注意が必要です。

モードの切り替えの判断は…

現在のWEBブラウザでは、この標準モードと互換モードの切り替えの判断は、HTMLのDOCTYPEスイッチ(宣言)によって切り替えの判断をしています。DOCTYPE宣言とは、HTMLの冒頭に記述するもので、HTML文書のバージョンを表します。(参考:DOCTYPEスイッチの書き方

DOCTYPE宣言の種類と各ブラウザにおけるモード切替の対応状況は以下の表を参照してください。

DOCTYPE宣言の種類と標準/互換モード切替対応状況
(X)HTML形式 DOCTYPE宣言 IE(6) NS(7) FF(1) OP(8)
宣言なし 互換 互換 互換 互換
HTML4.01
Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> 標準 標準 標準 標準
HTML
Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
標準 標準 標準 標準
HTML4.01
Tranditional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> 互換 標準 標準 互換
HTML4.01
Tranditional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
標準 標準 標準 標準
XHTML1.0
Strict
<?xml version=”1.0″ encoding=”…”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
互換 標準 標準 標準
XHTML1.0
Tranditional
<?xml version=”1.0″ encoding=”…”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
互換 標準 標準 標準
XHTML1.1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
互換 標準 標準 標準
IE…Internet Explorer NS…Netscape
FF…Firefox OP…Opera (数字)…ブラウザのバージョン

できるだけ標準モードで

互換モードはもともとブラウザで個別に搭載されているものであり、最新のブラウザでは標準モードで書いたページの方がHTMLのDOCTYPEスイッチに従って正確に表示されることが多く、また異なるブラウザで閲覧してもレイアウトが統一されることが多いようです。互換モードを起動させないDOCTYPE宣言文を選択した方が賢明といえます。

ただし、古いブラウザでは標準モードで宣言したページはレイアウトが崩れることもあります。『古いブラウザでは表示されません。』などの記述をしておくと親切なページ作りになります。

また、Javascriptなどを用いてOSやブラウザの種類を判断して個々のスタイルシートに振り分ける方法もあります。

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

最新のHTML5を学ぶなら

参考情報

最新情報をチェックしよう!