CSSでスタイルをIEのみ・Edgeのみ・Firefoxのみ・Chrome(とOpera)のみ・Safariのみに適用する方法

• シェアしてね♪
• Tweet
• 
• 

---

• 
  格安で広告掲載してみませんか？

• Tweet
• 
• 

各ブラウザのみにスタイルを適用する方法をご紹介いたします。

IEのみ表示が崩れるとか、Firefoxのみ違うサイズにしたい、といった場合に使えるCSSハックです。

CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみに適用する方法

IEだけに適用されるスタイル

IEだけに適用されるスタイルを指定したい場合は、以下のように記述します。

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  p {
    font-size: 14px;
  }
}

上記のように記述すると、IEのみ(バージョン10以降)、p要素のフォントサイズが14pxになります。

Edgeだけに適用されるスタイル

Edgeだけに適用されるスタイルを指定したい場合は、以下のように記述します。

@supports (-ms-ime-align: auto) {
  p {
    font-size: 14px;
  }
}

もしくは、以下のように記述してもOKです。

_:-ms-lang(x)::backdrop, p {
  font-size: 14px;
}

上記のように記述すると、Edgeのみ、p要素のフォントサイズが14pxになります。

Firefoxだけに適用されるスタイル

Firefoxだけに適用されるスタイルを指定したい場合は、以下のように記述します。

@-moz-document url-prefix() {
  p {
    font-size: 14px;
  }
}

上記のように記述すると、Firefoxのみ、p要素のフォントサイズが14pxになります。

Chrome/Safari/Operaだけに適用されるスタイル

Chrome/Safari/Operaだけに適用されるスタイルを指定したい場合は、以下のように記述します。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  p {
    font-size: 14px;
  }
}

上記のように記述すると、Chrome/Safari/Operaのみ、p要素のフォントサイズが14pxになります。

Chrome/Operaだけに適用されるスタイル

ChromeとOperaのみに適用されるスタイルを指定する場合は、以下のようにします。

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  p {
    font-size: 14px;
  }
}

上記のように記述すると、ChromeとOperaのみ、p要素のフォントサイズが14pxになります。

Chromeのみ、もしくはOperaのみにスタイルを適用するハックは、残念ながらないようです。

Safariだけに適用されるスタイル

MacのSafariだけに適用されるスタイルを指定したい場合は、以下のように記述します。

_::-webkit-full-page-media, _:future, :root p {
  font-size: 14px;
}

上記のように記述すると、Safariのみ、p要素のフォントサイズが14pxになります。

あとがき

できれば、こういったハックは使いたくないですが、どうしてもスタイルの微調整が必要になった場合は、ぜひご活用ください。

ちなみに、IEのバージョン毎に値の指定を変更する方法を過去に紹介しております。詳細については、「IEのバージョン毎に値を変化させるためのCSSハック」をご参照いただければと思います。