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になります。
あとがき
できれば、こういったハックは使いたくないですが、どうしてもスタイルの微調整が必要になった場合は、ぜひご活用ください。
ちなみに、IEのバージョン毎に値の指定を変更する方法を過去に紹介しております。詳細については、「IEのバージョン毎に値を変化させるためのCSSハック」をご参照いただければと思います。
