Part 1. Let's begin CSS : Appendix A

A.3 ブラウザの対応状況と振り分け

 CSS は,2002 年現在,広範に使えるようにはなっているが,それでもさまざまな環境で閲覧されている状況は変わりがない。ここでは,ブラウザの対応状況に触れ,振り分けのためのヒントを述べる。

ブラウザの対応状況

 CSS のサポートに先鞭をつけたブラウザが Internet Explorer 3 であるが,これは,Windows 版,Macintosh 版ともに,CSS1 の仕様が固まる前に“フライングで”実装されたものであり,プロパティの指定方法が大きく違うものがあり,また使用によって表示が乱れてしまうこともある。逆に,Internet Explorer 3 に合うような CSS は,正常な実装を行っているブラウザで表示を乱れたものにしてしまう。実際,Internet Explorer 3 を CSS に対応していると見るのは不都合が多い。このブラウザを使われている方は,“スタイルシートをオフにする”のが賢明だろう。

 Netscape 4 も,実装に不備があり,意図どおりの出力にならないことが多く,表示が乱れることもある。このブラウザも,“スタイルシートをオフにする”ほうがよいといえる。Netscape 4 は,UNIX 系 OS で利用されている場面があり,考慮対象としなければならないこともある。

 Internet Explorer 4 は,CSS1 に実用上問題ない程度に対応しているが,実装されていないプロパティ,細かい実装の誤りがある。Internet Explorer は,Windows 版ではバージョン 5.5,Macintosh 版ではバージョン 5 より CSS1 をほぼ完全にサポートした。また,一部の CSS2 の機能も実装されている。

 Netscape 6,7(Mozilla)は,CSS1 をほぼ完全にサポートし,CSS2 の一部の機能をサポートしている。

 軽快な動作を売りにした“第三のブラウザ”Opera は,バージョン 6 より日本語に対応した。CSS への対応もよい。

ブラウザの振り分け

 理想的には,すべてのブラウザで同一の記述で正常な出力が得られればよいのだが,現実にはそうはいかない(ただし,Lynx および w3m などのテキストブラウザでは CSS が表示に反映されなくてもよく,テキストベースの情報が伝わればよいと考える)。場合によっては,特定のブラウザに対して CSS が適用されないようにしたり,または,異なるスタイルシートを適用させたりしたい場合もある。

 ここでは,こうした“ブラウザの振り分け”を行ういくつかの方法を紹介する。

@import ルール

 CSS ファイルを呼び出す方法に,後述する @import ルールがある。Netscape 4 と Windows 版の Internet Explorer 3 はこれをサポートしないので,これらのブラウザでスタイルシートが適用されなくなる(Macintosh 版 Internet Explorer 3 では適用されてしまうのが問題である)。

 @import ルールは,スタイルシートの先頭で,

<STYLE TYPE="text/css">
<!--
  @import url(style.css)
-->
</STYLE>

のように使われる。

LINK 要素の MEDIA 属性

 1.3 で解説した LINK 要素において,HREF 属性で示されたリソースがどのようなメディアで使用されるものかを示すための MEDIA 属性がある。詳しくは後述するが,これには,screen(画面用),print(印刷用)などを(必要ならカンマで区切って複数)指定することができる。この属性値に screen 以外の値が含まれている場合,Netscape 4 ではスタイルシートが適用されない。

サーバサイドスクリプト

 SSI を使用することが許可されている場合は,サーバサイドで環境変数 HTTP_USER_AGENT を調べ,その値によってリンクするスタイルシートファイルを変えることができる。

 この方法は任意に振り分けが可能で便利であるが,プロキシの設定で環境変数に異なる値が入ってしまったり,または,この環境変数が詐称されていたりした場合は振り分けができない。

クライアントサイドスクリプト

 クライアントサイドスクリプトによって振り分けることも可能である。ブラウザを調べ,動的に LINK 要素を書き出すなどすればよいだろう。たとえば,JavaScript では,

<SCRIPT TYPE="text/javascript">
<!--
  function isIE3() {
    var vIE = navigator.appVersion.indexOf("MSIE ");
    return ((navigator.appName.indexOf("Microsoft Internet Explorer") >= 0)
      && (parseInt(navigator.appVersion.substring(vIE + 5, vIE + 8)) == 3));
  }
  if (isIE3()) {
    document.writeln('<LINK REL="stylesheet" TYPE="text/css" HREF="ie3.css">');
  } else if ((navigator.appName.indexOf("Netscape") >= 0)
    && (parseInt(navigator.appVersion.substring(0, 2)) == 4)) {
    document.writeln('<LINK REL="stylesheet" TYPE="text/css" HREF="nn4.css">');
  } else
    document.writeln('<LINK REL="stylesheet" TYPE="text/css" HREF="default.css">');
// -->
</SCRIPT>

のようなスクリプトをヘッダに記述することで,Internet Explorer 3,Netscape 4 およびその他の場合で振り分けが可能である。

 この方法は SSI が使用できない場合便利であるが,スクリプトが動かないクライアントではどうにもできないという問題がある。