WEB NOTE
WEB関連の備忘録

CSSで各ブラウザごとにスタイルを適応させる方法

CSS

IE、Microsoft Edge、Firefox、GoogleChrome、Safariでスタイルを分ける方法。
正直IE以外は使う機会がないと思う。早くIE滅んでください・・・。

IEだけに適応

@media all and (-ms-high-contrast: none) {
  //スタイル
}

Firefoxだけに適応

@-moz-document url-prefix() {
  //スタイル
}

GoogleChromeだけに適応

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //スタイル
}

Safariだけに適応

_::-webkit-full-page-media, _:future, :root 要素 {
  //スタイル
}

Microsoft Edgeだけに適応

@supports (-ms-ime-align:auto) {
  //スタイル
}

参考

CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみ・Safariのみに適用する方法

PICK UP