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

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

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

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

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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