blueprint cssとIE8の組み合せで気づいたこと

問題点について

IronPythonについて、いろいろまとめた文書を作成したのでWebサイトにアップロードしつつ確認していました。 そこでLinuxやMacOS XのFirefoxやChrome, Safariで問題のなかったページが、IE8でみた時には画面が真っ白になって何も表示されない現象に遭遇しました。

互換モードにしたところ、文字化けしつつも画面に文字が表示されるようになりました。その後、少しずつファイルを編集していきBlueprint CSSとの関連で行なった設定が原因だと分かりました。

原因と対応

文字化けするページと正常に表示されるページの差分は次の通りです。

--- index.html	2010-03-12 20:24:02.000000000 +0900
+++ index_ie8.html	2010-03-12 20:21:19.000000000 +0900
@@ -18,7 +18,7 @@
   <link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print" />
   <!--[if lt IE 8]>
     <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" />
-  <![endif]-->
+  <![endif] -->
   <link rel="stylesheet" href="/css/default.css" type="text/css" media="screen, projection" />

違いは空白一つ分だったわけですが、これが問題となるべきなのかどうかは微妙です。 この部分はConditional Commentsと呼ばれる記法で、W3Cが作成しているCSSやXHTML、HTMLの仕様ではなく、Microsoft IE5以上が独自に定義している機能だからです。

HTMLの規約からみればコメント文の内側に独自の命令が追記されているようにみえて、その観点からは前後に空白があっても問題がなさそうです。

しかしConditional Comments側からみれば、<![endif]-->という固定文字列の命令を追加したのであって、あいだに空白が入るなど想定外だという見方もできます。 まず先にあったコメント文のルールと自らが独自に実装させたい機能の整合性を取ったはずなんですけどね。

まとめ

いずれにしてもWebブラウザはソースコードに問題があっても最大限の情報を描画できるように作るべきで、標準的なルールに従っているコードを描画できないのはバグと呼ばれてもしかたがないと思います。

ただこの記述はIE8未満のブラウザへの対応のために必要なもので、もはやMSもIE8への乗り換えを推進している状況では問題になった行を削除してIE8未満では見れないサイトになってもしょうがないのかもしれないと思っています。 まぁIE8未満へのケアのためで将来的には不要になるから含めていますが、これがIE8以上対応のワークアラウンドだったら叫んでいたでしょうね。