cssをブラウザ単位(IE、Chrome、FireFox、Safari)で適用する方法のイメージ画像

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

  • 公開日:2019/01/19
  • 更新日:2019/01/19
  • 投稿者:n bit

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

  • フロントエンド開発
  • css

この記事は約 分で読めます。(文字)

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

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

IEのみ(IE10以上)に適用するスタイル

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 {

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

FireFoxのみに適用するスタイル

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

@-moz-document url-prefix() {

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

Google Chrome、Safari、Operaのみに適用するスタイル

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

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

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

今日のdot

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

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