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

2021.09.08

2022.04.02

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

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

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

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{
        /* ここに書く */
    }
}

おわり

フィードバックを送信

記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。

かけちまる

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

かけちまるblog

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

Chromeのみに適応させる

Safariのみに適応させる

Firefoxのみに適応させる

Edgeのみに適応させる

IEのみに適応させる

関連記事

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

【GSAP】擬似要素（before・after）をアニメーションさせる方法

CSSでスクロールバーのデザインを変更する方法

【GSAP入門】使い方となにができるのか

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

次世代画像フォーマットWebPでサイトの表示速度を改善しよう！