【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) {
  // ここに記述
}
エンデ・バタローをフォローする
CSSサイト制作

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

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