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

関連記事

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ

画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

videoタグの再生や停止などをJSでコントロールする方法

videoタグの再生や停止などをJSでコントロールする方法

【PHP】foreachで配列の最初と最後を判定する

【PHP】foreachで配列の最初と最後を判定する

【Three.js】マウスにライトを追従させる方法

【Three.js】マウスにライトを追従させる方法