クロスブラウザ対応CSSハックの一覧

2012-08-09 14:55:40
コーダー泣かせのIEはハックで強引に直しちゃいましょう。IEはjavascriptの動作が重いし、CSS3とHTML5の対応は進んでいませんし、FireFoxもCSS3とHTML5が完全対応ではありません。safariとGoogleChromeはその辺はかなり対応していて優秀です。IEの次のバージョンはどうなのでしょうかね?

マイクロソフトはOS部門のWindows以外で大した成功がないような気がします。メッセンジャーはスカイプに負けてるし、ブラウザもイケてないし、スマホでも勝ち目なさそうだし。クラウドサービスもグーグルの方が技術的に強そうなイメージがある。どれも使いやすさには定評があるのですがね…。というか、OSの成功がでかすぎるので、それ以外で成功させてきたら独占法だな。

しかし、IEの最新版がCSS3とHTML5を完全対応させてきたら、それはそれでコーダー泣かせになるかも。だってHTML5はJavascript満載で組むことを要求されるし、CSS3は宣言名が長くて面倒なのが多いし。単純に難度が上がって作業量が増えてくることは確実でしょ?今のままが意外とラクなのかもしれない。

【Internet Explorer】
IE6以下
#hack{ _color:blue;}
* html #hack{ color:red;}

IE7
*:first-child+html #hack{ color:red;}
*+html #hack{ color:red;}

IE6,IE7
#hack{ /color:blue;}

IE8
#hack{ color:blue\9;}

IE7,IE8
#hack{ color/*\**/: blue\9;}

IE6以外
#hack{ color/**/: blue;}

IE6,IE7以外
html>/**/body #hack{ color:red;}

IE6~IE8以外
:root *> #hack{ color:red;}

【モダンブラウザ】
Firefox
#hack, x:-moz-any-link{ color:red;}

Firefox 3.0以上
#hack, x:-moz-any-link, x:default{ color:red;}

Safari 2-3
html[xmlns*=""] body:last-child #hack{ color:red;}

Safari 2 – 3.1
html[xmlns*=""]:root #hack{ color:red;}

Safari2 – 3.1, Opera 9.25
*|html[xmlns*=""] #hack{ color:red;}

Safari3以上,Chrome
@media screen and (-webkit-min-device-pixel-ratio:0){
#hack{ color:red;}
}

Safari 3以上, Chrome, Opera 9以上, Firefox 3.5以上
body:nth-of-type(1) #hack{ color:red;}
body:first-of-type #hack{ color:red;}

Opera 9.25以上
;;body #hack{ color:red;}
html:\66irst-child #hack{ color:red;}

Opera 8, 9以外
body[class|="hypen-ated"] #hack{ color:red;}
カテゴリ: CSS