ブラウザ互換について-外部CSS-

ブラウザ互換の話をして来ましたが、スタイルシートを使って設定していもブラウザによって見た目違ってくる。 という事は多々発生します。 しかも、相当古いブラウザ（IE4とか）だと、ろくにCSSをサポートしてなかったりして始末が悪いです。

そこで、ブラウザによって使う外部CSSファイルを変えてみよう！という事も可能なのです。 ですが、やはり余りにも古いブラウザは足切りする必要が出て来ちゃうと思います。 現に当サイトも当サイトについてを読んで頂ければ解りますが、 IE5以上を推奨しております。 モダンブラウザなのにNetscapeNavigator7とかをサポートしてないのはちょっと技量不足だったのです・・・（汗

とりあえず、私もこのブラウザ互換については最近興味を持ち始めた段階なので余り詳しくはありません。 なので、今解る範囲でのご紹介となります。 今後、もっと勉強したら「外部CSS2」とかのページを作ろうと思います。

とりあえず、今回ご紹介できる概要はこんな感じです。

WinIE3-4、MacIE4、NetscapeNavigator4を排除します（CSSをサポートしてないので）
その他のブラウザで読み込めるCSSファイルを作成
IE5-5.5専用のCSSファイルを作成

という感じです。 2番目の全てのブラウザで読み込めるCSSを適用させた後に、IE5-5.5でブラウザ互換で修正の必要な個所（widthの設定等） をそれ専用のファイルを作り上書きさせるという手順となります。

その具体的な手法は以下のような感じです。

■外部CSS読み込みの設定
<link href="import.css" rel="stylesheet" type="text/css" media="screen,tv">

上記の「media="screen,tv"」というのがありますね。 このmediaにはscreen以外の要素、もしくは2カンマを混ぜて2つ以上の要素を設定するとNetscapeNavigator4では認識せず、 ここで設定されている外部スタイルシートを読み込まなくなります。 これでNN4の排除は完了です。

■import.cssの中身

@import "style.css";

@media tty {
i{content:"\";/*" "*/}} @import 'ie5-55win.css'; /*";}
}/* */

最初の@importで更に外部スタイルシートを読み込みます。
IE3は@importをサポートしておらず、これで排除完了
WinIE4とMacIE4は@importはurl()で設定しないと読み込まないので、上記の指定方法でこれらも排除完了

ちなみに、NetscapNavigator4は@importってのを見ると認識しないどころか強制終了してしまうので、 その為に上記のように外部スタイルシートそのものを読み込ませないようにしているのです。

次の@media以下のはcssのファイル以外の部分はこの形を使用してください。 これは、WinIE5-5.5のみ読み込む設定方法です。 これは通称パスフィルターと呼びます。 他にも色々設定方法ああるので、それは こちらを見てください。

style.cssはメインのスタイルシートの設定を書いておくファイルです。
ie5-55win.cssはWinIE5-5.5の場合の補完用設定スタイルシートです。

あとは当サイトではやっていませんが、上記で排除したブラウザにも基本的なCSSを適用させるというのも有りです。 この場合は、ボックスなどのレイアウトの設定は一切行わず、文字などの設定しか行わないようにします。

それらを含めると、CSSの読み込みはこんな感じになります。
<link rel="stylesheet" href="css/global.css" type="text/css">
<link href="import.css" rel="stylesheet" type="text/css" media="screen,tv">

■HP作成-応用編-

・外部ファイルを使ってみよう
・リンクの設定変更
・お気に入りに追加＋ホームに設定
・非推奨タグ・属性
・ドキュメントタイプについて
・ブラウザ互換について-width-
・ブラウザ互換について-継承-
・ブラウザ互換について-外部CSS-