適用されているブラウザについてはサンプルが赤字で表示されています。
ValidなCSSのブラウザ振り分け
外部スタイルシートを使用するときは、最初に次のような読み込み用CSSを使用すると便利です。
/* 全てのブラウザ用 */
@import url(common.css);
/* MacIE用 */
/*¥*//*/
@import "ie5mac.css";
/**/
/* WinIE5.x用 */
@media tty {
i{content:"¥";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
Mac Internet Explorer 5
@import "ie5mac.css";
/**/
Mac Internet Explorer 5以外
@import "notie5mac.css";
/* */
『¥*』の解釈の違いを利用したものです。
Windows Internet Explorer 5、5.5
i{content:"¥";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
改行を含めるとValidではありません。
『¥"』の解釈の違いを利用したものです。
通常のブラウザからみると次のようになります。
i{content:"¥";/*" "*/}}
@import 'ie5win.css'; /*";}
}/* */
WindowsIE5.xからみると次のようになります。
i{content:"¥";/*" "*/}}
@import 'ie5win.css'; /*";}
}/* */
HTML文書を変更する必要がないので、IEの条件付コメントを使うよりいいです。
[参考記事] IEの条件付コメント
参考に次のように書いた場合のFirefoxの表示です。
i:after{content:"¥";/*" "*/}} @import 'ie5win.css'; /*";}
↓
Windows Internet Explorer 5
i{content:"¥";/*" "*/}}; @import 'ie50win.css'; {;}/*";}
}/* */
Windows Internet Explorer 5.5
i{content:"¥";/*" "*/}}@m; @import 'ie55win.css'; {;}/*";}
}/* */
Windows Internet Explorer 6 , 7(これはnot Valid)
*:first-child+html p { color:#FF0000; }
- 適用
- Win IE 7〜
適用したいセレクタの前に「*:first-child+html」を付ける
CSS Valid
* html p { color:#FF0000; }
- 適用
- Win IE 4〜
- Mac IE 4〜5.2
スターハック
適用したいセレクタの前に「* html」を付ける
CSS Valid (CSSの書式上は正しくない)
html*p { color:#FF0000; }
- 適用
- Win IE 5.5〜6
- Mac IE 5〜5.2
- Mac Safari
スター7ハック
適用したいセレクタの前に「html*」を付ける
CSS Not Valid
p { #color:#FF0000; }
- 適用
- Win IE 4〜6
- Mac IE 5〜5.2
- Firefox
- Opera 7
ハッシュハック
適用したいプロパティの前に「#」を付ける
CSS Not Valid
html>body p { color:#FF0000; }
- 適用
- Win IE 7〜
- Mac IE 5〜5.2
- Firefox
- Opera
- 除外
- Win IE 4〜6
適用したいセレクタの前に「html>body」を付ける
CSS Valid
html>body p,p { color:#FF0000; }
- 適用
- Win IE 5、7〜
- Mac IE 5〜5.2
- Firefox
- Opera
- 除外
- Win IE 6
適用したいセレクタの前に「html>body」を付ける
CSS Valid
p { _color:#FF0000; }
- 適用
- Win IE 4〜6
アンダースコアハック
適用したいプロパティの前に「_（アンダースコア）」を付ける
CSS Not Valid
次のものでValidに代用可能
/* ¥*/
* html p { color:#FF0000; }
/* */
/* /*/
p { color:#FF0000; }
/* */
- 除外
- Netscape 4
Caioハック
CSS Valid
/* /*//*/
p { color:#FF0000; }
/* */
- 適用
- Netscape 4
- Opera 4〜5
Fabriceインバージョン
CSS Valid
:root p { color:#FF0000; }
- 適用
- Firefox
- Mozilla
- Safari
- Mac IE 5
:root疑似クラスハック
:root疑似クラスはCSS 3.0でサポートされる予定
CSS Valid
html[xmlns] p { color:#FF0000; }
- 適用
- Firefox?
- Mozilla
- Safari
- Opera
xmlns属性ハック
属性セレクタをサポートするブラウザのみ適用される
対応については要確認
CSS Valid
<link rel="stylesheet" href="style.css" type="text/css" media="screen,tv" />
- 除外
- Netscape 4
media="screen"以外の指定をするとNetscape Navigator 4はCSSを読み込まない。
CSS Valid
@import "style.css";
- 除外
- Windows Internet Explorer 4
- Mac Internet Explorer 4 (4.5以上は適用)
"@import url(style.css)";ではなく、@import "style.css";の指定をするとInternet Explorer 4はCSSを読み込まない。
CSS Valid
これ以外に新しく実装されたCSSの仕様で振り分ける手法があります。
