Edited at

OS、ブラウザごとのCSSハックなどまとめ

More than 3 years have passed since last update.


ブラウザごとのハック


IE

.sample{

background: #cccccc\9; /* IE10以下 */
}

@media all and (-ms-high-contrast: none){
.sample{
background: #cccccc; /* IE10以上 */
}
}

個人的にIEのverごとに対応することがあまりないのでIEでまとめました。

verごとに分ける場合は参考URLを参照。


Firefox

@-moz-document url-prefix(){

.sample{
background: #cccccc;
}
}


Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){

.sample{
background: #cccccc;
}
}


Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {

::i-block-chrome, .sample{
background: #cccccc;
}
}


OSごとのハック

css_browser_selectorを使用するのがよいかも。

GitHub



.win {

/*Windows (全バージョン)のみ*/
}
.linux {
/*linux(x11とlinux)のみ*/
}
.mac {
/*Mac OSのみ*/
}
.iphone {
/*iphoneのみ*/
}
.ipad {
/*ipadのみ*/
}
.android {
/*Google Androidのみ*/
}

上のjsはユーザーエージェントでクラスをつけている


iPhoneのみ


js

if ( navigator.userAgent.indexOf('iPhone') > 0 ) {

$("body").addClass("iPhone");
};


Androidのみ


js

if ( navigator.userAgent.indexOf('Android') > 0 ) {

$("body").addClass("Android");
};


IEの条件付きコメント

<!–[if IE 9.0]>

内容
<![endif]–>

IEの条件付きコメントはIE5〜9にしか対応していません。

IE10、11ではコメントとして解釈します。

今IE8以下に対応することはほとんどなくなってきてるので、使う機会もあまりなさそうですね。


参考URL

IEのバージョン毎のハックを試してみる

ブラウザまたはOS毎にCSSハックできるjs『CSS Browser Selector』

IE条件付コメントまとめ