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

ブラウザごとのハック

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条件付コメントまとめ