Chrome、Firefox、Safari、IEそれぞれのみに適用されるCSSハックの書き方まとめ

以前、IE11とSafariのみに適用されるCSSハックの書き方を記事にしました。

ちょうどいい機会なんで、これにChromeとFirefoxも加えた、そのブラウザでしか表示されないCSSハックの書き方をまとめたいと思います。

ChromeとOperaのみで適用される書き方

ChromeとOperaだけで表示されるCSSハック方法は以下の2通りです。どちらでも良いです。

/*ChromeとOperaのみだけに適用されるCSSハック*/
_::content, _:future, .css_selector:not(*:root) { 
  background-color: ForestGreen;
}

/*ChromeとOperaのみだけに適用されるCSSハック*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .css_selector {
    background-color: ForestGreen;
  }
}

※Chromeと、Operaは差別化できませんでした。レンダリングエンジンがGoogle ChromeやSafariと同じWebKitになったOpera15.0以降は、Chromeと差別化できるコードが見つかりませんでした。

参考 Is there a Google Chrome-only CSS hack? – Stack Overflow

Firefoxのみで適用される書き方

Firefoxだけで適用されるスタイルを書くには以下。

/*Firefoxだけに適用されるCSSハック*/
@-moz-document url-prefix() {
  .css_selector {
    background-color: OrangeRed;
  }
}

参考 Chromeのみ、Firefoxのみに適用させるCSSハック【CSS】

Safariのみで適用される書き方

Safariのみで適用されるスタイルを書くには以下。

/*Safariだけに適用されるCSSハック*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .css_selector {
    background-color: LightSteelBlue;
  }
}

参考 is there a css hack for safari only NOT chrome? – Stack Overflow

Internet Explorer10と11のみに適用される書き方

IEの最新は、11ですが、10も使っている人が多いため、それぞれ用の書き方を載せておきます。

/*IE10以降に適用されるCSSハック（一応）*/
@media all and (-ms-high-contrast:none){
  .css_selector {
    background-color: LightSkyBlue;
  }
}

/*IE11だけに適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .css_selector {
    background-color: LightSkyBlue;
  }
}

参考 css selectors – How to write a CSS hack for IE 11? – Stack Overflow

動作確認ブラウザ

今回は、現時点で最新のブラウザのみで動作確認を行いました。なので、古いバージョンだとどうなるかわかりません。

Chrome37.0
Opera24.0
Firefox33.03
Safari5.1.7
Internet Explorer11.0

あと、僕はWindowsしか持ってないので、SafariはWindows版の5.1.7です。Mac版や、Safari6、7などでの動作はわかりません。

動作確認

先程の、CSSハック方法を踏まえて、各ブラウザでちゃんと表示されるか確認してみました。

確認したスタイルシートは以下。背景色をブラウザのロゴなどに使われている色に似たものを使用してみました。

/*ChromeとOperaのみだけに適用されるCSSハック*/
_::content, _:future, body:not(*:root) { 
  background-color: Crimson;
}

/*Firefoxだけに適用されるCSSハック*/
@-moz-document url-prefix() {
  body {
    background-color: OrangeRed;
  }
}

/*IE11だけに適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, body {
    background-color: LightSkyBlue;
  }
}

/*Safariだけに適用されるCSSハック*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, body {
    background-color: LightSteelBlue;
  }
}