Articles

HOME > Articles > [Technical] How to switch the style sheet without using script

スクリプトを使わずにIEとNNでスタイルシートを切り替える方法

Internet Explorer(以下IE)とNetscape Navigator(以下NN)の両方を対象にスタイルシートを用いたページを書いていると、双方のブラウザでスタイルシートの実装に違いがあることに悩まされることがしばしばあります。特に、現段階でのNNのスタイルシートの実装には、問題が多くあります。

スタイルシートのバグにとどまらず、IEとNNとではデフォルトのフォントサイズが違うので、IEを基準にフォントサイズを決定すると、NNでは小さすぎて読めないといった事態も起きます。

このような事態に対処するために一般に採られる方法は、スクリプトを用いてブラウザを判断し、それに応じてスタイルシートを関連づけているLINK要素またはSTYLE要素をその場で書き換えるという方法です。しかし、この方法ではバージョンアップの度にスクリプトを書き換えないといけないなど問題点も多く、そもそもぼくは、スクリプトを用いてその場でHTMLの要素を付け加えることはなるべく避けたいと思っています。

ここでは、スクリプトを用いない方法で、ブラウザごとにスタイルシートを切り替える方法をご紹介します。

前提知識

マイクロソフトのmsdn online Web WorkshopにあるInternet Explorer 4.0と3.0のためのオーサリング戦略においては、LINK要素にdisabled属性を追加する方法が紹介されているが、これはIEの独自拡張であり、W3Cの定めるHTML4.01ではdisabled属性を設定できるのは、BUTTON、INPUT、OPTGROUP、OPTION、 SELECT、TEXTAREA要素だけである。
IE3、NN4はCSSの@importキーワードを処理できない。
CSSのカスケード処理において、同じ要素に対する指定が2つある時は、「! important 」キーワードが宣言に付加されている方が優先される。

実現する方法

例えば、以下の段落(P要素)を、IE4以上では背景色を青に、NN4やIE3では緑にする例を挙げます(実際に以下の段落はそのように見えます)。

この段落はテスト用の段落です。ブラウザによって背景色が異なります。この段落(P要素)のクラス名を"Test"とします。

メインのスタイルシート宣言をstyle.cssに、IE4以上用のスタイルシート宣言をie.cssに書くとします。メインのstyle.cssには、NN4、IE3用の宣言を記述します。ここでは、背景色を緑にするため、以下のように宣言します:
```
P.Test {
  background : #008000; /* "green" と書いても同じです。*/
  color : #FFFFFF;
}
```
IE4以上用のスタイルシート宣言のファイルie.cssに、以下のように記述します:
```
P.Test {
  background : #0000FF ! important; /* 本来はこの規則が優先されます。*/
}
```

メインのstyle.cssの先頭に、以下のように記述します:

@import url(ie.css); /* ie.cssから規則を取り込みます。 */

HTMLファイルでは、以下のようにして、style.cssを取り込みます:
```
<link rel="StyleSheet" type="text/css" href="style.css" title="Basic Style">
```

このページの内容は、完全に無保証です。全ての環境において、この記事の内容が正しいことを保証するものでもありません。また、この記事の内容について、みなさまがどのような損害／不利益を被られても、私はそれらに対して何らの賠償などを行うものでもありません。しかし、これらの記事についての訂正、質問、苦情、その他ご意見は歓迎いたします。それらに対しては、ぼくのできる範囲で対応させていただきたいと思います。

[Home] [Search] [Site Map]