ブラウザ・OSごとに適用させるCSSハックまとめ

ブラウザやOSごとにCSSを適用させるための記述方法についてまとめました。

See the Pen
css-hack by KUBO (@KUBOGEN)
on CodePen.

上記の色は以下のようにブラウザごとで見え方が違います。

ブラウザごとにCSSを適用させる方法

@media screen and (-webkit-min-device-pixel-ratio: 0) {
　body {
　　background: red;
　}
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
　body {
　　background: red;
　}
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
　_::-webkit-full-page-media, _:future, :root body {
　　background: blue;
　}
}

@-moz-document url-prefix() {
　body {
　　background: green;
　}
}

Edgeの場合は、2つの書き方があります。

/* Edge 1 */
@supports (-ms-ime-align: auto) {
　body {
　　background: orange;
　}
}

/* Edge 2 */
_:-ms-lang(x)::backdrop, .css-hack {
　body {
　　background: orange;
　}
}

_:-ms-lang(x)::-ms-backdrop, body {
　　background: pink;
　}
}

以下のような書き方もありますが、現在は上記を使う方がいいかと思います。

/* ハイコントラストモードが「オフ」の場合 */
@media all and (-ms-high-contrast: none) {
　body {
　　background: pink;
　}
}

/* ハイコントラストモードが「オン」でも効くようにする場合 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
　body {
　　background: pink;
　}
}

OSごとにCSSを適用させたい場合、「css_browser_selector」を使うと便利です。

下記スクリプトを読み込ませて、CSSを書くだけで、OSごとにCSSを適用させることができます。

/* Windows (全バージョン)のみ */
.win {

}

/* Mac OSのみ */
.mac {

}

/* linux（x11とlinux）のみ */
.linux {

}

/* iPhoneのみ */
.iphone {

}

/* iPadのみ */
.ipad {

}

/* Androidのみ */
.android {

}

ちなみに、「css_browser_selector」ではOSだけでなく、ブラウザごとの指定もできます。

また、OS別にCSSを適用させる方法として、Javascriptでユーザーエージェントを判別する方法などもあります。