Home
CSS
特定のブラウザのみにCSSを適応させるハック

特定のブラウザのみにCSSを適応させるハック

公開日
2021.09.08
更新日
2022.04.02
特定のブラウザのみにCSSを適応させるハック

どうも!かけちまるです!

コーディングしているときに地味に時間が取られてしまうのがブラウザごとの対応ですよね?
ChromeSafariFirefoxEdgeIEそれぞれにクセがあり特定のブラウザのみにCSSを特定したい時があると思います。
実はCSSには特定のブラウザのみにスタイルを適応させるハックが存在するのでまとめていきます。

ChromeSafariFirefoxEdgeIEそれぞれまとめていて、コピペで使えるので参考にしてください。

Chromeのみに適応させる

CSS
コピー
@media screen and (-webkit-min-device-pixel-ratio:0){ .class_name{ /* ここに書く */ } }

Safariのみに適応させる

CSS
コピー
::-webkit-full-page-media, :future, :root .class_name{ /* ここに書く */ }

Firefoxのみに適応させる

CSS
コピー
@-moz-document url-prefix(){ .class_name{ /* ここに書く */ } }

Edgeのみに適応させる

CSS
コピー
@supports (-ms-ime-align: auto){ .class_name{ /* ここに書く */ } }

IEのみに適応させる

CSS
コピー
@media all and (-ms-high-contrast: none){ .class_name{ /* ここに書く */ } }

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

記事の目次にカレント表示機能を導入する😤

記事の目次にカレント表示機能を導入する😤

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する

jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

mix-blend-modeが効かない時はスタックコンテキストを考えよう

mix-blend-modeが効かない時はスタックコンテキストを考えよう