詰め CSS

お題目
WWW ブラウザごとに異なる CSS の設定を行う

WWW ブラウザ別の CSS

ぼくは XSSI を使って CSS ファイルが WWW ブラウザによって内容が変更されるような仕組みを用意しています．

Mozilla 0.9.7 で問題発生
MIME タイプは text/css

Mozilla 0.9.7 の動作の謎

Mozilla 0.9.6 までは，うまく自分の web ページ「おのひろきおんらいん」を表示できていたのですが，Mozilla 0.9.6+ のあるバージョンからスタイルシートが無視されるページが幾つかでてきたことに気が付きました．まさか自分の HTML 文書や CSS ファイルに問題があるとは思わなかったので，その現象を無視してちゃんと表示できるバージョンを使っていました．

ところが Mozilla 0.9.7 がリリースされて，それで試してみると，やっぱりいくつかのページでは駄目でした．しかもなんとなく HTML 4.01 Transitional なページは大丈夫なのに，気合いの XHTML 1.1 だと駄目だったりするのです．Macintosh だけでなく Windows でも試してみたけれど，やっぱりそうでした．他の人の web ページはきちんと表示されますし，どこかで Mozilla 0.9.7 の bug だという事で話題にしているのも見つけられませんでした．

いろいろ試してみると DOCTYPE 宣言をいじると CSS を読み込んだり読み込まなかったりすることが分かりました．つまり DOCTYPE 宣言に応じて，Mozilla 0.9.7 は，CSS を読み込んだり読み込まなかったりするのです．

DOCTYPE 宣言によって解釈モードが切り替わる WWW ブラウザ

さっそく Internet で探してみて以下のことが分かりました．

最近の WWW ブラウザでは「解釈モード」の切り替えというのをやっていて，「仕様に従った正しい解釈をするモード」と「過去慣習的な解釈を再現するモード」が HTML 文書の DOCTYPE 宣言によって切り替わるようになっています．

Mozilla 0.9.7 から仕様に従った正しい解釈をするモードでは MIME タイプで text/css でないものは，CSS のファイルとして読み込まないようになったのです．

正しい CSS ファイルの MIME タイプを .htaccess ファイルを使って設定する

ぼくの web ページでは CSS ファイルに XSSI の機能を使って，ブラウザごとに異なる設定を読み込ませる仕掛けをしてきました．ぼくは気がつかなかなったのですが，実は CSS ファイルの MIME タイプが text/html になっていたのです．だから Mozilla 0.9.6 以降では，厳格な HTML で書いたページではスタイルシートが適用されないという恐ろしい事が発生しました．

ぼくが使っている www.cup.com は BSD 系の OS が動いていて HTTP サーバは Apache/1.3.4 が動いています．この Apache の設定の一部を .htaccess というファイル名のテキストファイルで設定するのですが，最初は以下のようになっていました．

AddType "text/css; charset=iso-2022-jp" .css
AddType text/x-server-parsed-html .css

これだと拡張子が css のファイルの MIME タイプは text/html になってしまうのです．

で，これについて調べてみると AddType の変わりに，AddHandler が使えることが分かりました．試してみると，www.cup.com でもうまく設定できました．

.htaccess は以下のようになります．

AddType "text/css; charset=iso-2022-jp" .css
AddHandler server-parsed .css

これで拡張子が css のファイルの MIME タイプは text/css になり，ついでにきちんと漢字コードも指定されます．html ファイルでも css ファイルでも漢字コードはここで指定するのが本当のはずです．

これでばっちりです．

CSS ファイルに XSSI を使う

ぼくの CSS ファイルは XSSI を使って，サーバから環境変数を取得して条件分岐して，条件に応じたスタイルシートに変形するようになっています．

以下に単純化した例を示します．

<!--#if expr="$HTTP_USER_AGENT = /iCab/" -->
	<!--#include file="onohiroki-basis.css"-->
	<!--#include file="onohiroki-extention.css"-->
	<!--#include file="icab-compatibility.css"-->
<!--#elif expr="$HTTP_USER_AGENT = /Mozilla¥/4/ && $HTTP_USER_AGENT !=/ompatible/" -->
	<!--#include file="onohiroki-basis.css"-->
	<!--#include file="netscape4-compatibility.css"-->
<!--#else -->		
	@import "onohiroki-basis.css";
	@import "onohiroki-extention.css";
<!--#endif -->

これは iCab の場合は onohiroki-basis.css と onohiroki-extention.css と icab-compatibility.css の内容をインクルードします．この CSS ファイルの中に順番にそれらがずらずらならびます．

Netscape Comunicator 4.x の場合は，onohiroki-basis.css と netscape4-compatibility.css をインクルードします．

どちらでも無い場合は @import 文が二つ並んだシンプルなものになり，onohiroki-basis.css と onohiroki-extention.css を読み込みます．

実際に使っているものはもう少し複雑でもっと他の WWW ブラウザに対する対応もありますし，cookie の内容に応じて，読み込む CSS ファイルを変更することなどもできるようにしています．