DOCTYPEとCSSの大文字・小文字

Date:2008/03/12 01:32

HTMLを書くときに、まずその先頭でDocument Typeを宣言します。

たとえば、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
などです。

ある程度違いは理解していたつもりでしたが、今回、ここではまりました。
DOCTYPE と CSSの関係です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
と宣言したときは、cssの大文字・小文字を区別します。

例えば、test{color:red} と Test{color:blue} は別物です。

しかし、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
という省略形で宣言すると、cssの大文字・小文字を区別しません。

例えば、test{color:red} と Test{color:blue} は同じものとして扱われます。
つまり、<p id="test"> というようなタグの中が赤色ではなく、後で設定している青色で上書きされるということです。

以上はInternetExplorer6の場合で、Firefoxで見た場合はどちらも青色となります。

ただし、Firefoxでも、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
と宣言したときに、css 内で #test{color:yellow}のように設定して<p id="Test">としても文字は黄色になりませんが、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
と宣言して、css 内で #test{color:yellow}のように記述し<p id="Test">とすると文字は黄色になります。

例を作ってみましたので、ご覧ください。

DOCTYPEとCSSの大文字・小文字