CSS

2021.02.12

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

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

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

ブラウザごとの記述

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ハックはまだまだ使う機会が多いと思います。
ぜひご活用ください!

0

関連記事

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

おすすめ記事

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!