cssハック、自分用まとめ
html を変えず、script も使わず、css のみで対応しなければならないことがあるので、
・http://www.webcreatorbox.com/tech/css-hack-list/
・http://www.koikikukan.com/archives/2011/01/24-015555.php
を参考に、CSSハックをまとめてみました。
といっても、自分用メモなので、
IE以外のヴァージョンは(みんな大体アップデートしているだろうという期待から)、
Firefox:7くらい
Safari:5くらい
Chrome:14くらい
Opera:11くらい
Lunascape:6くらい
Sleipnir:2.9くらい
こんな環境で調べた結果、ざっくりこんな感じです。
Lunascape と Sleipnir は、IE8 と大体同じ、、、ということで、以下、両ブラウザは IE8 に含めます。
Webkit 系の Safari と Chrome は大体同じ。
IE9、そしてIE5以下は試していません。ので、「のみ」とか「以下」という言葉遣いはその範囲内でのことです。
また、本当は違うみたいですが、ここでは「モダンブラウザ」=「IE以外」(Firefox, Safari, Chrome, Opera)とします。
Opera は11で試したのですが、11以外のハックは効きませんでした。複数ヴァージョンで試すのは面倒だったので、下では11のみのハックを示します。
たとえば特定のブラウザで p を赤字にしたい場合、
IE6 のみ
プロパティ前に「_」
p{
_color:red;
}
セレクタ前に「* html」
* html p{
color:red;
}
IE7 のみ
セレクタ前に「*:first-child+html」
*:first-child+html p{
color:red;
}
セレクタ前に「*+html」
*+html p{
color:red;
}
IE7 以下
プロパティ前に「/」
p{
/color:red;
}
プロパティ前に「*」
p{
*color:red;
}
IE8 以下
値後に「\9」……(a)
p{
color:red\9;
}
モダンブラウザとIE8のみ
セレクタ前に「html>/**/body」……(b)
html>/**/body p{
color:red;
}
IE8のみ
セレクタ前に「html>/**/body」、値後に「\9」……(a)+(b)
html>/**/body p{
color:red\9;
}
IE9のみ
セレクタ後に「:not(:target)」、値後に「\9」、、、らしい
p:not(:target){
color:red\9;
}
Firefoxと(なぜか)IE7
セレクタ後に「,x:-moz-any-link」……(c)
p,x:-moz-any-link{
color:red;
}
Firefoxのみ
セレクタ前に「html>/**/body」、セレクタ後に「,x:-moz-any-link」……(b)+(c)
(「>」はIE7でも使えるが、「>/**/」とするとIE7で効かなくなる)
html>/**/body p,x:-moz-any-link{
color:red;
}
SafariとChrome
全体を「@media screen and (-webkit-min-device-pixel-ratio:0){」~「}」で囲む
@media screen and (-webkit-min-device-pixel-ratio:0){
p{
color:red;
}
}
Operaのみ
全体を「@media not screen and (1){」~「}」で囲む
@media not screen and (1){
p{
color:red;
}
}
モダンブラウザ
セレクタ前に「body:nth-of-type(1)」または「body:first-of-type」
body:nth-of-type(1) p{
color:red;
}
body:first-of-type p{
color:red;
}


