クロスブラウザ対応CSSハックの一覧
2012-08-09 630 1591コーダー泣かせの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;}
