19Jan2019

cssをブラウザ単位（IE、Chrome、FireFox、Safari）で適用する方法

CSSでHTMLに装飾していくときブラウザ単位でコントロールしたい場合があります。今回はそのようなケースに合わせてIEのみ、Google Chromeのみ、Firefoxのみ、SafariのみのCSSコード適用方法を解説します。

この記事は約分で読めます。（文字）

cssをブラウザ単位で適用する

特定のブラウザのみ表示がずれるような場合はブラウザ単位で適用するスタイルを変更する場合があります。いわゆるCSSハックですね。今回は各ブラウザごとのCSSハックコードを紹介します。

CSSハックが最も必要となるケースはやはりIEでしょう。以前は下記のようなコードがよく利用されていたようですが下記のIE用CSSハック方法はいくつか問題点があります。

@media all and (-ms-high-contrast: none) {

	/* 適用したいスタイル */

}

条件の指定が『-ms-high-contrast: none（ Windowsのハイコントラストモード none）』のため、Windowsでハイコントラストモードが『active / white-on-black / black-on-white』のいずれかの場合ブラウザがIEでも適用されません。

WindowsではIE10以下のサポートが終了していますのでIE11だけ考えるのであれば下記コードを利用しましょう。

_:-ms-lang(x)::-ms-backdrop, .selector {

	/* 適用したいスタイル */

}

基本的にIE以外でCSSのハックを行うことはないと思いますが念のためIE外のCSSハックの方法も記載しておきます。

@-moz-document url-prefix() {

	/* 適用したいスタイル */

}

Google Chrome、Safari、Operaはすべてwebkitを利用したブラウザですので共通となります。

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

	/* 適用したいスタイル */

}

cssハックは利用しなくて済むのであれば出来る限り使わない方が良いです。ただ残念ながらBootstrap4でもIE 11に対応していないコードがあるのでデザインによってはどうしても使用せざるをえないケースがあります。

使用する場合でも最小限の利用に止めれるようにデザインを工夫しましょう。