[HTML＆CSS-CSS Tips] CSS ハック

いつも思うこと、Internet Explorerが一応最もシェアが高いはずなんですが、バグが多すぎて使い物にならない7はバグ修正あっても重すぎ死んでくれな状態な訳です。
やっぱり大嫌いなIEも含め、複数のブラウザで同じように表示しようと思うと、各ブラウザのバグを逆手にとって同じように表示させる方法をとるしかなくなってしまいます。
そのバグを逆手にとったCSS対応の事を CSS ハック とかよんだりします。
ハックといっても、やっぱり表示を統一させるにはこの方法がないんで…ある意味仕様な気もしなくはありません。

とりあえず、CSS ハックはよく使うんでメモ。

IE 7ハック

対象ブラウザ：Internet Explorer 7
CSS Validator：通過する

Windows IE 7のみにスタイルを適用するハック。
適用したいセレクタの前に「*:first-child+html」を付ける。

    *:first-child+html p { color:#FF0000; } 

スターハック

対象ブラウザ：Internet Explorer 4〜6, Mac 4〜5
CSS Validator：通過するが、マッチする要素はHTML文書に出現し得ない

Windows IE 4〜6、Mac IE 4〜5のみにスタイルを適用する場合に用いる。
スター、つまり「*」を利用することからこのネーミングになったものと思われる。
利用法としては、適用したいセレクタの前に「* html」を付ける。

    * html p { color:#FF0000; } 

スター7ハック

対象ブラウザ：Internet Explorer 5.5〜6, Mac 5　Safari
CSS Validator：通過しない

Windows IE 5.5〜6、Mac IE 5、Safariのみにスタイルを適用する。
適用したいセレクタの前に「html*」を付けるのだが、空白を含めないように注意したい。

    html*p { color:#FF0000; } 

バックスラッシュハック(Hollyハック)

対象ブラウザ：Internet Explorer Mac 5
CSS Validator：通過する

Mac IE 5のみにスタイルを適用、あるいはMac IE 5のみ除外したい場合に用いる。
適用したいスタイルを、それぞれ以下のコメント形式で囲めばよい。

Mac IE 5のみにスタイルを適用

    /* これ以降Mac IE 5のみに適用される \*//*/
    p { color:#FF0000; }
    /* これ以降Mac IE 5以外にも適用される */ 

Mac IE 5のみスタイルを除外

    /* これ以降Mac IE 5には適用されない \*/
    p { color:#FF0000; }
    /* これ以降Mac IE 5にも適用される */ 

ハッシュハック

対象ブラウザ：Internet Explorer 4〜6, Mac 5　Firefox　Opera 7
CSS Validator：通過しない

Windows IE 4〜6、Mac IE 5、Firefox、Opera 7のみにスタイルを適用する場合に用いる。
適用したいプロパティの前に「#」を付けて使う。

    p { #color:#FF0000; } 

アンダースコアハック

対象ブラウザ：Internet Explorer 4〜6
CSS Validator：通過しない

Windows IE 4〜6のみにスタイルを適用する場合に用いる。
適用したいプロパティの前に「_（アンダースコア）」を付けるだけ。

    p { _color:#FF0000; } 

もし同様の処理をCSS Validatorに通るかたちで実現したい場合は、スターハックとバックスラッシュハックを用いて以下のようにする。

    /* hide from Mac IE \*/
    * html p { color:#FF0000; }
    /* */ 

Caioハック

対象ブラウザ：Netscape 4
CSS Validator：通過する

Netscape 4のみを排除する。

    /* これ以降Netscape 4には適用されない /*/
    p { color:#FF0000; }
    /* これ以降Netscape 4にも適用される */ 

Fabriceインバージョン

対象ブラウザ：Netscape 4　Opera 4〜5
CSS Validator：通過する

Netscape 4、Opera 4〜5のみにスタイルを適用する場合に用いる。

    /* これ以降Netscape 4、Opera 4〜5のみに適用される /*//*/
    p { color:#FF0000; }
    /* これ以降全てのブラウザに適用される */ 

xmlns属性ハック

対象ブラウザ：Firefox　Safari　Opera
CSS Validator：通過する

属性セレクタをサポートするFirefox、Mozilla、Safari、Operaにのみスタイルが適用される。

    html[xmlns] p { color:#FF0000; } 

:root疑似クラスハック

対象ブラウザ：Firefox　Safari　Internet Explorer Mac 5
CSS Validator：通過する

:root疑似クラスをサポートするFirefox、Mozilla、Safari、Mac IE 5にのみスタイルが適用される。
:root疑似クラスは策定中のCSS 3.0でサポートされる予定で、CSS 2.0では定義されていない。

    :root p { color:#FF0000; } 

Safariハック

対象ブラウザ：Safari
CSS Validator：通過しない

Safariにのみスタイルを適用させる。
前者はスターハックとスター7ハックの複合技で、それぞれのハックの適用ブラウザの差を利用したものです。
また後者はSafari用のハックとして単独で利用が可能。

Safari

    p { その他のブラウザ用のスタイル }
    html*p { Safari用のスタイル }
    * html p { その他のブラウザ用のスタイル } 

Safari 2〜

    html[xmlns*=""] body:last-child p { color:#FF0000; }