【css】ブラウザごとにcssを反映させる方法

IEの時だけcssを反映させたいって時があるので備忘録

ブラウザごとにcssを反映させる方法

<style>
/*IEだけに適用*/
@media all and (-ms-high-contrast: none) {
  body {
    background: skyblue;
  }
}

/*GoogleChromeだけに適用*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  body {
    background: green;
  }
}

/*Firefoxだけに適用*/
@-moz-document url-prefix() {
  body {
    background: orange;
  }
}

/*Safariだけに適用*/
_::-webkit-full-page-media, _:future, :root body {
    background: blue;
}

/*Edgeだけに適用*/
@supports (-ms-ime-align:auto) {
  body {
    background: skyblue;
  }
}
</style>

GoogleChromeだけに指定するコード、Firefoxで開いたときにも反応してるっぽいから
(GoogleChromeだけ指定するコード)
(Firefoxだけ指定するコード)
って並び順にしないとうまく反映されないわ、注意