ＣＳＳ作成編
-6 ブラウザへの対応
当サイトにて度々ブラウザ環境による表示差違について述べて参りました。
総括すると、現状 完全CSS化ページには難題が山積している状態と言っても過言ではありません。
また、いまや情報メディアとして定着しているWebサイトの対象ユーザーを限定・選別するという考え方に賛否もあるところでしょう。
それら環境や対応方法をふまえ、また サイトの趣旨・目的を鑑み、どのような手法を取るかはサイト公開者の考え方如何と言えます。
その点を考慮して参考にして下さい。
新旧ブラウザ用にCSSファイルを設置する方法
ここでは、CSS導入に際し現在幅広く取り入れられている、閲覧ブラウザ毎に表示形式を振り分ける方法のひとつをご紹介します。
旧バージョンながらCSS対応ブラウザである、IE4.x, NN4.x等が問題なく表示できる内容のスタイルを記述したファイルと、モダンブラウザ用のファイルと、２種類のCSSファイルを用意する方法です。
HTMLファイル内に上記の様にリンクをはります。
例としたold.cssとstyle.cssには、使用するIDやクラスなどは同じで指定スタイルをおのおのの環境に対応できるスタイルを記述します。
レガシーブラウザをCSS適用除外にする方法
NN4.xにスタイルを読み込ませない方法
<head> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head>
HTMLファイル内で外部ファイルにリンクさせる際、NN4.xがmedia属性の値がscreenでないとCSSを読み込めないという性質を利用し、あえてmedia属性にscreen以外の値（ここではall)を指定して、CSSファイルそのものを適用させない方法です。
IE3.x,IE4.x,Mac版IE4.xにスタイルを読み込ませない方法
CSSダミーファイルを用意する方法です。
例としたdummy1.cssファイルにはIE3.xが読み込むことのできない@importの形式が記述されているので読み込みが中止されます。
IE4.x, Mac版IE4.0は@import url(CSSファイルのパス）という形式にしないと読み込めないので、この時点で両ブラウザが読み込みを中止します。
この部分を読み込んだ例としたdummy1.cssファイルにはを適用除外にする方法が上図の①②です。
dummy1.cssファイルにはdummy2.cssへのリンク指定だけを記述します。
このdummy1.cssファイルの指定されたリンクに従って Mac版IE4.5はdummy2.cssファイルを読み込もうとしますが、読み込まれた際、@import url(CSSファイルのパス）の形式で記述されていないリンクは読み込めないので、ここで読み込み中止となります。
このダミーファイルを２つ通過する際に IE3.x, IE4.x, Mac版IE4.0, IE4.5が適用から振り落とされる、つまりスタイル適用除外となるわけです。
そして、これら2つのファイルを通過することのできる これら以外のブラウザだけが、style.cssファイルに記述されたスタイルを読み込むという仕組みです。
IEのバグを回避する方法
IEは圧倒的なユーザーシェアを誇るものの、他のモダンブラウザに比べCSSサポートがやや劣ると言われています。ここではIE用の対策をご紹介します。
Mac版IE5.xにスタイルの一部を読み込ませない
コメント表記を上図の様に記述することによって、Mac版IE5.xはそのコメント表記以降に記述されたスタイルを読み込むことができなくなります。
IE.5.x, IE6.0にスタイルの一部を読み込ませない
html>body セレクタ{プロパティ:値}
通常のスタイル記述のセレクタの前に html>body をつけることによって、IE.5.x, IE6.0は解釈ができずスタイルの読み込みを中止します。
IEのバージョン別にCSSファイルを分ける
Win版IEにのみ実装されている機能を利用し、HTMLファイル内にてCSSファイルへのリンク記述の仕方で操作します。
この記述形式は IE以外のブラウザではコメントとして扱われるので影響を受けません。
