摩訶不思議な外部スタイルシート

いつの間にやらリンクの色が赤から青に変わっていますが、原因不明です。FireFoxではちゃんと赤で出ています。原因を知っている方はご一報を。

こんな話があったので少し調べてみた。

ソースを覗かせていただくと、スタイルシートはlink要素で2回外部スタイルシートを指定しているようだ。

<link href="http://blog3.fc2.com/d/dochikushow/template/gray/style.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />

怪しいのは2つ目である。直接URIを叩くと存在しませんというページに飛ばされる。一つ目のCSSではどこにもリンクのスタイルを青に指定していないし、記述も間違っていないのでここは問題ない。だが、IE6sp2やOpera7.52ではリンクのスタイルが上書き・もしくはクリアされてデフォルトになっている。

原因は存在しない外部スタイルシートを指定していることにあるのはほぼ間違いなかったので、ローカルに保存し、指定部分をソースから削ってみた。すると全く問題がなくなった。なるほどやはり、である。

しかしながら不思議なのは、何故そのような挙動になるのか、ということだ。ブラウザ間で違うのも解せない。

IEでローカルに保存されたソースをよくよく見てみると、なんとこの指定部分のファイル名が404.htmに変わっている。で、同じくローカルに保存された404.htmを開いてみると、なんと中身はCSSだった。IEとOperaはこれを読んでいたのだ。

原因が大体分かったのでとりあえず先方に報告した。だが、まだ解せない部分が残った。何故404.htmというCSSファイルが送られてきているのか？？

IEでの保存は色々書き換えられてしまうので、直接404.htmを見てみたところ原因が判明した。404.htmのURIはhttp://blog.fc2.com/404.htmlだが、このHTMLファイルのソース内に書かれたCSSとIEで保存したときに出来た404.htmという名のCSSファイルの中身が全く同じだったのだ。ご丁寧に間違っている記述部分まで同じ(IEが解析できなかった部分は削られていた)である。

つまり、IEとOperaは「リソースが存在しないよ」とサーバーが送ってきた404.htmの中身からわざわざCSS部分を抜き出して、それをスタイルとして上書きしていた、ということになる。なんという強引な。content-type部分は全く無視か。

仕様には詳しくないが、問題ないのだろうか。