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

2012-08-09    253   1317

コーダー泣かせの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

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

anonymous2019年10月9日

SQLインジェクション考慮してください

返信
m2net2019年10月10日

コメントありがとうございます。SQLインジェクションはサイト運営側のサーバーへの影響しかないと思います。データベースの中身を書き換えられたり、見られたりというものですよね。ですので、見てる側にはウイルス感染の支障は全くありません。

返信
nnn1月4日

blurイベントでajaxをphp側に飛ばした際に、ajax_unique_check.phpに要する時間はどのくらいでしょうか?

1 返信
m2net1月6日

大体の場合は一瞬ですけど、サーバーによって異なります。1秒くらいかかるときもありまし、全然反応しないこともありますので、PHP側でも重複チェックのコードを仕込んでおくと万全です。

返信

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。