【CSS】特定ブラウザだけに効くCSSの書き方|IE10以下、IE11、Firefox、Chrome、Safari、EDGE、Opera

この記事は約2分で読めます。

特定ブラウザだけに適応するCSSの書き方のご紹介です。
「IE11だけ表示がズレる」とか「FireFoxだけフォームが変」とか、「Safari」のみに対応した書き方とか、「Opera」。。。オペラはなんかあるかな。。。
そんな特定ブラウザだけに色々したい時は下記をコピペして使ってください!

特定ブラウザだけに効くCSS

// IE10以下に効くCSS
@media all and (-ms-high-contrast:none) {
  // ここに記述
}

// IE11だけに効くCSS
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop,
  // ここに記述
}

// FireFoxだけに効くCSS
@-moz-document url-prefix() {
  // ここに記述
}

// Chromeだけに効くCSS
@media screen and (-webkit-min-device-pixel-ratio:0) {
  // ここに記述
}

// Safariだけに効くCSS
::-webkit-full-page-media, :future, :root {
  // ここに記述
}

// EDGEだけに効くCSS
@supports (-ms-ime-align:auto) {
  // ここに記述
}

// Operaだけに効くCSS
@media not screen and (1) {
  // ここに記述
}

コメント

タイトルとURLをコピーしました