CSS hackまとめ

時々、いくつかの外観を異なるブラウザで一致させるためにします.css hackを使わなければなりません以下、よく使われるcss hackです.

ブラウザを識別するクラス名を追加

jsでブラウザを識別し、ドキュメントルートノードにクラス名を追加する方法です.cssはこう書きます

.ie .sth{} /*  IE     */
.firefox .sth{} /*         */
.weblit .sth{} /*  webkit     */

実現の見通し.https://github.com/rafaelp/css_browser_selector

条件コメント

条件コメントの内容は、条件を満たすブラウザにのみ表示されます.条件注記は、IE 5~IE 9(含む)でのみ動作します.したがって、ieにスタイルやスクリプトを追加する場合は、条件コメントを使用します.
一般的な条件注記は次のとおりです.

  IE

セレクタhack

セレクタに対してhackをします.

/*IE6-*/
*html#idname{color:red;}

/*IE7*/
*:first-child+html#dos{color:red}

/*IE7,FF,Saf,Opera*/
html>body#tres{color:red}

/*IE8,FF,Saf,Opera*/
html>/**/body#cuatro{color:red}

/*  IE6-8*/
:root*>#quince{color:red}

/*IE10+*/
@mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){
#veintiun{color:red;}
}

属性hack

セレクタに対してhackをします.

_color:red;/*IE6  */
*color:red;/*IE6、IE7  */
+color:red;/*IE7  */
*+color:red;/*IE7  */
color:red\9;/*IE6、IE7、IE8、IE9  */
color:red\0;/*IE8、IE9  */
color:red\9\0;/*IE9  */
@mediascreenand(min-width:0\0){/*IE9,IE10  */
#veintidos{color:red}
}

リファレンス

https://github.com/logeshpaul/CSS-Hacks