【CSS】各インターネットブラウザでのCSSハックの方法とは

　FirefoxやGoogle Chromeなど、パソコンからWebサイトを見る際には様々なインターネットブラウザが存在しています。

ここで出てくる問題として、各ブラウザによってCSSで組んだレイアウトが自分が思っていたのとは違ってうまく表示されない場合が出てきます。
例えば、Firefoxではうまく表示されているのにGoogle Chromeではちょっと崩れた状態で表示されてしまう…など。
特にInternet Explorer(以下IE)では表示がうまくされない場合があるので、IEのみに適用させるCSSの設定については以前、IE用CSSハックの方法とは？にて紹介しました。

そこで今回は各インターネットブラウザのうち、特定のブラウザのみに適用させるCSSの記述方法をご紹介します！
今回は例として<span>～</span>に適用させれるよう設定したいと思います。

Firefoxのみに適用させるCSSの記述方法

　まず、Firefoxのみに適用させるCSSの記述方法ですが、下記のように記述することで適用させることができます。

@-moz-document url-prefix() {
	span {
		・・・・・・・・・・
	}
}

Google Chrome・Safariに適用させるCSSの記述方法

　続いてGoogle ChromeとSafariに適用させるCSSの記述方法は下記になります。

@media screen and (-webkit-min-device-pixel-ratio:0) {
	span {
		・・・・・・・・・・
	}
}

ちなみにGoogle ChromeのみにCSSを適用させたい場合は、次に紹介するSafariのみに適用させるCSSを別途記述する必要が出てきます。

Safariのみに適用させるCSSの記述方法

　MacにデフォルトでインストールされているSafariのみに適用させるCSSの記述方法は下記になります。

_::-webkit-full-page-media, _:future, :root span {
		・・・・・・・・・・
}

先ほどお話した通り、基本的にGoogle ChromeとSafariはCSSハックの記述が同じなため、両方にCSSが適用されてしまいます…。
なので、もしそれぞれにCSSを適用させたい場合は別途Safariのみに適用させるコード(上記見本コード参照)を記述する必要があります！

まとめ

　以上が各インターネットブラウザでのCSSハックの方法になります。
サイトをデザインする上で各ブラウザのCSSハックの方法は覚えていて損はないので、もし各ブラウザでレイアウトが崩れてしまった際には今回紹介した方法を実践してみましょう！