Blog

※ブログ移転しました。 → hamashun.me

旧式ブラウザのCSS対策

最近の傾向として、CSSを理解しない昔のブラウザは、何の対策もしないで放置するという流れがあるようです。
確かに今更IE3やNN4を使っている人は相当少ないですから、それもアリと言えばアリかもしれません。

でも、ほんの少しの手間で保険がかけられると思えば、やっておいて損は無いと思うんですよね。
デメリットも殆ど無いですし。
と言う訳で、今回は昔のブラウザを対象にしたCSS対策です。

IE3対策
@import url(ie3.css);

@importで読み込ませる事によって対策可能です。
IE3は@importに対応していないので、それ以降のCSSは全て無視されます。

IE4対策
@import "wie4.css";

@importには、実は2つの書き方があります。
一つは@import url(xxx.css)のように、『urlを付ける』形。
もう一つが@import "xxx.css"のように、『urlは付けずに二重引用符で囲む』形。
この内、後者の形で記述するとIE4では無視するようになります。

Mac IE4.5対策
@import url("mie4.css");

Mac版IE4.5では、2つを組み合わせた形を使用します。
urlを付けた上で二重引用符で囲む事で、無視するようになります。

NN4対策
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,print" />

link要素のmedia属性に、screen以外の値を指定します。
これはscreenと合わせて他の値を指定しても良いです。
これにより、NN4系では読み込まれなくなります。
NN4の初期Ver,では、@importを読むと不具合が出るので、その前段階で防ぐ事が大事です。

Win IE5.0対策
@media tty {i{content:"\";/*" "*/}};
@import 'wie50.css'; {;}/*";}}/* */

ここからはPass Filterと呼ばれる、該当のブラウザのみに外部CSSを読み込ませる手法になります。
IE5系はそれ以前と比べると大幅にCSSの対応状況が良くなったものの、バグが多くハックでの対処を多く求められる事から良く使われています。
このフィルターを使用して読み込まれる外部CSSは、IE5.0にのみ読み込まれます。

Win IE5.5対策
@media tty {i{content:"\";/*" "*/}}@m;
@import 'wie55.css'; {;}/*";}}/* */

こちらはIE5.5にのみ読み込ませるフィルターです。
この手の手法のメリットは幾つかあり、不正な書式のCSSを逃がせる事や、対応ブラウザから外す時にはリンクを切るだけで良い事などがあります。

WinIE5.0とWinIE5.5対策
@media tty {i{content:"\";/*" "*/}}
@import 'wie5x.css'; /*";}}/* */

こちらは両方のVer,に対応したフィルターです。
共通した不具合を修正する時に便利です。

MacIE5対策(未確認情報)
@import 'macie.css'

うちにMac環境が無いので確認できないのですけど、この読み込ませ方だとIE4  NN4  MacIE5を除外できるらしいです。
近い内に検証したい所です。

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive