コーディングを終えて品質チェックの段階になると、各ブラウザの表示確認を行うことになります
するとどうでしょう？
他のブラウザではまったく問題ないのに、あるブラウザだけで表示が崩れたりおかしな動きをしてしまうことがあります
もちろん対処していかなければなりません
でも、正常に動いているブラウザの指定はいじりたくない、、、
そんなときは、各ブラウザのみに適用するCSSを書けばよいのです
今回は、そういった場合に使える書き方をご紹介します
目次
Safariのみに適用
※ 『.hoge』の部分は変えたい要素・クラス名に置き換えてください
_::-webkit-full-page-media, _:future, :root .hoge {
color: blue;
}Firefoxのみに適用
※ 『.hoge』の部分は変えたい要素・クラス名に置き換えてください
_:lang(x)::-moz-placeholder, .hoge {
color: orange;
}Google Chromeのみに適用
※ 『.hoge』の部分は変えたい要素・クラス名に置き換えてください
_:lang(x)::-internal-media-controls-overlay-cast-button, .hoge {
color: green;
}Edgeのみに適用
※ 『.hoge』の部分は変えたい要素・クラス名に置き換えてください
_:lang(x)::-ms-, .hoge {
color: yellow;
}ブラウザごとに適用するCSSを指定する方法・まとめ
特によく使うことになるのはSafariです（【ios問題】にも通ずる問題ですね）
次にFirefoxかな、、と。
これらを使えれば、きちんと機能しているものをわざわざいじらなくて良くなり、おかしな部分だけピンポイントで直せばいいので楽になります
これは役に立つので、ぜひブックマークしておいてくださいね
ではまた！