ブラウザ毎のCSS対処方法(1)-古いブラウザ対策
古いブラウザへの対応でも記述したように、古いブラウザは、CSSが正常に表示されません。
（古いブラウザがCSS未対応なため。）
モダンブラウザ以前の古いブラウザ対策
モダンブラウザとは、Web標準に対応しているブラウザを指します。
該当するブラウザは以下の通りです。
- Windows IE6以降
- Windows IE5（Microsoft開発、サポート終了）
- Mozilla
- Firefox
- Netscape6以降
- Opera7以降
- Safari
つまり、上記に該当しないブラウザが古いブラウザとなります。
モダンブラウザ以前のブラウザは、予めCSSファイルを読み込ませないように対処したほうが、
デザインは反映されないものの、表示崩れで文章が読めないという事態にはなりません。
対策は、全体的にCSSを排除する方法と個別にCSSを排除する方法がありますが、
古いブラウザをいくつも個別に対応しているとキリがありません。
全体で制御してしまった方が楽ですが、これもユーザー層の検証とWEB制作者の対応次第になります。
参照サイト
古いブラウザに、CSSを読み込ませない方法-全体編-
古いブラウザごとCSSを読み込ませない方法です。
- Netscape4に読み込ませない
XHTML内で、外部CSSを読み込ませる際、mediaにscreen以外を指定するか同時に複数指定します。
<link rel="stylesheet" href="import.css" type="text/css" media="screen,tv" />
- Windows IE3-4、Mac IE4、Netscape4に読み込ませない
- CSSファイルのソースを記述する際に、@importルールでURLを”"で囲みます。
@import "base.css";
- Mac IE4.5、Netscape4に読み込ませない
- CSSファイルのソースを記述する際に、@importルールでインポートするファイルをurl(”")で囲みます。
@import url("base.css"); - Mac IE5に読み込ませない
- CSSファイルのソースを記述する際に、@importルールでインポートするファイルをurl(”")で囲みます。
@import url("base.css");
古いブラウザに、CSSを読み込ませない方法-個別指定編-
個別にCSSを読み込ませない方法ですが、細かくブラウザ毎に指定しなければならないので、
メンテナンスが大変になってきます。
- Mac IE5を個別に読み込ませない
適用させたくないスタイルを『/* \*/』（Hollyハック）を使用して挟む。全体で囲んで読み込ませないことも可能です。
p{
/*line-height: 1.5;\*/
}- Windows IE4-5、Windows IE6標準準処モードを個別にCSSを読み込ませない
セレクタの後、プロパティーの前に『/**/』を記入する。
p/**/{
line-height: 1.5;
}- Windows IE4-5、Mac IE4.5-5を個別にCSSを読み込ませない
セレクタの後、プロパティーの前に半角空白を含めたコメントタグ『/* */』を記述する。
p{
line-height/* */: 1.5;
}- Windows IE4-6、Mac IE4、Netscape4を個別にCSSを読み込ませない
セレクタの前に『html>body』を記述する。
html>body p{
line-height: 1.5;
}
ブラウザ別ＣＳＳ対策
CSSバグに対応する方法は、以下のリンクから御覧ください
Loading ...
