HTML 4.01 StrictでCSSが反映されない

CSS httpd

今回の内容は、Webに携わっている人の中で0.01%に関係あるかどうかわからないほど、ニッチな話題です。

ちょっと特殊な環境でHTMLを書いていたのですが、HTML 4.01 StrictのDOCTYPE宣言を書くと外部CSSが適用されないという状況に陥りました。
IE 6では適用されるのですが、Firefox、Opera（手元にあったブラウザ）では適用されませんでした。

ちなみに、書いたHTML/CSSは次のようなものです。

main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>うまくいかないよ</title>
</head>
<body>
<h1>見出し！</h1>
<p>
本文！
</p>
</body>
</html>

style.css

@charset "utf-8";
body {
  color: red;
}

CSSが適用されれば全文が赤くなる。
それだけです。

しかしこれが、適用されない。
ファイルの配置に失敗しているわけでもなく、Firefoxでソースを表示して、style.cssのリンクになったところをクリックしたりすると、内容を見られます。

さて、原因ですがstyle.cssのContent-Typeが誤ってtext/htmlになっていたというものでした。
このContent-TypeはHTTPレスポンスのヘッダ情報です。

この問題はApacheとかIISとか、ちゃんとしたWebサーバを使っていれば絶対に起き得ないものですが、相当古い or 特殊なものを使っていると、困る可能性があります。

私の場合はちょっと特殊な環境で、自前で開発したものを使っていたため、このような現象に悩まされました。

そこで、拡張子で判断を行い、CSSファイルに対してはContent-Typeにtext/cssを適切に設定してあげるようにしたところ、きちんとCSSが適用されるようになりました。

今回の問題の解析過程です。

1. HTML 4.01 Strictの場合だけ発生するが、文法的にあやしいところはない。
2. ローカルで試したらうまくいった。（早く気付けよー）
3. Wiresharkでパケットを見ると、CSSファイルのレスポンスヘッダがおかしかった。

以上です。

冒頭にも書いたとおり、ほとんどの方には関係ない問題と思いますが、こういうこともある、という雑学として楽しんで頂けたなら幸いです。
同じ問題に直面して困った方の解決になれば、なおのことです。