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

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

CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみ・Safariのみに適用する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 24時間注文・入稿受付OK。実績と信頼の「印刷の通販 グラフィック」
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Firefoxのみ、もしくはGoogle Chromeのみにスタイルを適用する方法をご紹介いたします。

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

スポンサードリンク

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

“p”の部分でセレクタを指定します。例えば、.selectornameというクラス名にスタイルを適用したい場合は、以下のように記述します。


_::-webkit-full-page-media, _:future, :root .selectorname {
  font-size: 18px;
}

あとがき

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

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

コメントを残す

メールアドレスが公開されることはありません。