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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。
Xserver

関連記事

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

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

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

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

【CSSのみ】背景のグラデーションを変化させるアニメーション

【CSSのみ】背景のグラデーションを変化させるアニメーション

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

Three.jsにおけるシェーダー(GLSL)の基本知識

Three.jsにおけるシェーダー(GLSL)の基本知識

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

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