【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年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

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

コメント

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