「css ie5 読み込み」というキーワード

はじめに

「外部CSSを読み込む時に対象ブラウザを絞り込む」という記事もそうでしたが、今回書く方法はCSSの構文的にエラーです。
それが気に食わない場合、PHPなど、サーバ側で処理するなりしてください。　
それらに関しては、書いている人が沢山いるし、私の場合は「一枚修正すれば、ターゲットブラウザが減っても簡単に対応できる」方法の方がメリット大だと思うので。。。
ただ、制作会社さんなどで働いている場合、「ウチのHTML + CSSはvalidです」って言えるのは、クライアントさんに対して分かり易いと思うので、なかなか「HTMLが冗長になるよりいいじゃん」と割り切れないでしょうが。。。

サンプルソース

HTML書いたり、ましてデザインなんかするのは面倒なので、css Zen Gardenのhtmlサンプルを拝借しました。

html - site.css - style.css
                - legacy.css - style.css /* IE5.x */

といった感じで、ターゲットブラウザには“style.css”を読み込ませるようにします。

<link rel="stylesheet" type="text/css" media="all" href="common/style/site.css" />

/* site.css */
/* Not lt IE8 */
@import 'style.css' all;
/* IE6,IE7 */
@import url\ ("style.css");
/* IE4,5 */
@import\ url("legacy.css");
/* MacIE */
/*\*//*/
@import "style.css";
/**/

/* legacy.css */
@import "style.css";
/* @importの時にurlなしで書くとIE4は読まない */

仕組み

サンプルでは、下記のように書いてます。

1. HTML側で外部CSSを読み込む際に、mediaへscreen以外を指定すると、古いネスケは読まない
2. @importする時に、シングルクオートでくくるとMacIEは読めない（というか「'style.css」を読みに行くので結果読めない）
3. mediaをscreen以外にするとIE7以下は無視
4. ブラウザのバグを使って、各ターゲットブラウザでCSSを読み込み
5. IE5.x用だけはもう一回@importして、その時にIE4以下が読まないように

最後の項目はちょっと冗長なので、MacIE同様、コメント系のハックを使った方が良いかもです。

View Demo Download

WEB標準なブラウザ：背景／白
IE7：背景／グレー
IE6：背景／オリーブ
IE5.x：背景／ブルー
MacIE：背景／グリーン

で、表示されるはずです。