【CSS】CSSだけでできるブラウザ対応

widthをcalcで指定する場合や、object-fitを使いたい場合など、特定のブラウザ（特にInternet Explorer）の場合のみ見た目が崩れてしまうこともあると思います。
今回はそんな時に便利なCSSだけで特定のブラウザの場合に書き分ける方法（CSSハック）をご紹介いたします！

※IEにobject-fitを効かせる方法は別の記事でご紹介しております！

CSS

2021.02.12

【CSS】CSSだけでできるブラウザ対応

widthをcalcで指定する場合や、object-fitを使いたい場合など、特定のブラウザ（特にInternet Explorer）の場合のみ見た目が崩れてし…

ブラウザごとの記述

Internet Explorer(IE11)のみに適用

1の方法では「_:-ms-lang(x)::-ms-backdrop,」の後ろにセレクタを指定し、中にプロパティの指定をすることで適用させることができます。
2の方法ではmediaの中にセレクタごと記述し、適用させることができます。

一見、2の方が複数指定が書きやすく便利に見えますが、こちらの方法はmediaでWindowsのハイコントラストモードの状態を判別し、IEのみ認識する「none」の場合という書き分けをしているため、ハイコントラストモードがオンの場合には適用されません。
そのため、1つ1つ指定する必要があり不便ではありますが、1の方法で指定をすることをおすすめいたします！

/* 1 */
_:-ms-lang(x)::-ms-backdrop, li {
  display:none;
}

/* 2 */
@media all and (-ms-high-contrast:none) {
  li {
     display:none;
  }
  p {
     display:none;
  }
}

Edgeのみに適用

EdgeはedgeHTML版かChromium版で指定方法が異なります。
また、Chromium版の方は指定を書いてもGoogle Chromeの記述が優先されてしまう可能性が高いです。

/* 1 */
/* Edge(edgeHTML) */
_:-ms-lang(x)::backdrop, li {
  display:none;
}
/* Edge(Chromium) */
_:lang(x)::-ms-, li {
  display:none;
}

/* 2 */
@supports (-ms-ime-align:auto) {
  li {
     display:none;
  }
  p {
     display:none;
  }
}

Google Chromeのみに適用

_:lang(x)::-internal-media-controls-overlay-cast-button, li {
  display:none;
}

Safariのみに適用

_:lang(x)+_:-webkit-full-screen-document, li {
  display:none;
}

Firefoxのみに適用

/* 1 */
_:lang(x)::-moz-placeholder, li {
  display:none;
}

/* 2 */
@-moz-document url-prefix() {
  li {
     display:none;
  }
  p {
     display:none;
  }
}

使用例

下記例は見るブラウザにより文字色が変わるように指定を書いています。
このようにCSSだけでブラウザごとに色を変えたり、効かないプロパティを使いたい場合に書き分けることができます。

IE → 青色
Edge（edgeHTML版） → 紫色
Edge（Chromium版） → ピンク色
Google Chrome → オレンジ色
Safari → 灰色
Firefox → 赤色
（※EdgeのChromium版は効いていない可能性があります。）

See the Pen GRNjExX by spiqa design (@spiqa_design) on CodePen.

IE対策をする必要があったり、ブラウザ確認をした時に個別対応をしたい場合にCSSハックはまだまだ使う機会が多いと思います。
ぜひご活用ください！