スタイルシートの読み込み

IE4，NN4とそれ以外のブラウザで分ける

スタイルシートに完全に対応していないIE4およびNN4と、スタイルシートに対応しているブラウザで読み込むスタイルシートファイルを分ける方法です。

vre4.cssとbase.cssの２つのファイルを用意します。

vre4.cssには、IE4，NN4でも理解できるスタイルを記述します。
base.cssには、その他のブラウザ用のスタイルを記述します。

HTMLファイルは次のような記述でスタイルシートをリンクします。

<link href="vre4.css" rel="stylesheet" type="text/css" />
<link href="base.css" rel="stylesheet" type="text/css" media="screen,print" />

IE4，NN4は、mediaプロパティの値が[screen]以外のときは、そのスタイルシートを読み込みません。つまり、IE4，NN4はvre4.cssのみを読み込みます。

それ以外のブラウザは、一度vre4.cssの内容を読み込みますが、後にbase.cssがリンクしているため、base.cssの内容が優先されます。つまり、base.cssのスタイルが適用されます。

上の方法に加え、スタイルシートの表示に不具合があるIE5.xとそれ以外のモダンブラウザで読み込むスタイルシートファイルを分ける方法です。

vre4.css、base.css、ie5win.cssとimport.cssの４つのファイルを用意します。

vre4.cssには、IE4，NN4でも理解できるスタイルを記述します。
base.cssには、モダンブラウザ用のスタイルを記述します。
ie5win.cssには、IE5.x用のスタイルを記述します。

import.cssには以下のように@importコマンドでbase.cssを読み込む記述と、Mid Pass Filterを利用した記述をします。

@import "base.css"; 

@media tty {
 i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
 }/* */

HTMLファイルは次のような記述でスタイルシートをリンクします。

<link href="vre4.css" rel="stylesheet" type="text/css" />
<link href="import.css" rel="stylesheet" type="text/css" media="screen,print" />

ファイル更新日：2005年08月17日