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

関連記事

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【PHP】json_encode()とjson_decode()でJSONを操る

【PHP】json_encode()とjson_decode()でJSONを操る

Contact Form 7の基本設定

Contact Form 7の基本設定

【初心者向け】CodePenの使い方からサイト埋め込み方法

【初心者向け】CodePenの使い方からサイト埋め込み方法

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

画像形式をWebPに変換するツール6選

画像形式をWebPに変換するツール6選