« WinIE6以上とIE5x以下との違いを考慮したCSS | メイン | Win IE5-6を簡単にはじく »

NN4x、IE4x以下のブラウザにCSSを読み込ませないようにする

バージョン4世代(IE4x、NN4x)のブラウザは、CSSの実装が中途半端だったり、バグが多い。CSSを本格的に導入するときは、 これらのブラウザにはCSSを読み込まないようにする必要がある。

@importや、外部スタイルシートリンク時のmedia指定を利用すれば、比較的簡単にそれが可能。

NN4.xをはじく
link rel="stylesheet" href="styles-site.css" type="text/css" media="all"
のように、 mediaの指定にscreen以外、つまりallを指定すれば、NN4x以下のブラウザは読み込まれない。
同様に、style type="text/css" media="all"
なども有効。
また、 media="screen, projection のように、複数の指定を行ってもはじくことができる。

IE4.xをはじく
@import "styles.css";
@import url('styles.css'); ではなく、「url」をとる。
これを使うと、IE4xとNN4x、ともにstyles.cssは読み込まれない。
ただし、WinのNS 4.0 - 4.04 でこれを指定すると、ブラウザがフリーズする致命的なバグが確認されている。

結論1:NN4xのみはじく
link rel="stylesheet" href="styles-site.css" type="text/css" media="all"

media="all"で、NN4xだけをはじく。IE4xはシェアが1%以下だし、そもそもセキュリティに著しく問題のあるブラウザなので無視。

結論2:NN4xとIE4xを簡単にはじく
@import ('styles.css');で、NN4x、IE4xをはじく。
NN4.0では致命的なバグ(=フリーズ)があるが、NN4xのシェアは1%以下だし、そのほとんどがNN4.4~4.8なので無視。

結論3:NN4xとIE4xをちゃんとはじく

link rel="stylesheet" href="styles-site.css" type="text/css" media="all"

のように、外部スタイルシート指定で「styles-site.css」を読み込む、そしてそのstyles-site.cssで、
@import ('styles.css');
とし、実際の指定は styles.css内で行う。これにより、NN4.x(含むNS 4.0 - 4.04)、IE4x以下を安全確実にはじくことができる。



コメント

There are a lot of people here. I’ll join you guys. Believe it or not, many people fail in commenting stuff. I’m just trying to say a simple thing – before commenting something, think twice!