特定のブラウザに適応させるCSSハックあれこれ

2023年3月27日

非常に今さら感のあることだけど、今でも納品前のチェック段階で使うことが多いのと、都度調べてみるのも面倒なので自分用にCSSハックをまとめてみました。
コードで.hackとなっている部分を書き換えて使用します。

Google Chrome／Safari／Opera

まずはGoogle Chrome／Safari／Operaのwebkit系3つのブラウザ。
これをChromeのみと書いている人もいるけど、Chromeのみだとまた違う書き方があったかと思うので、とりあえずこちらを使ってます。

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .hack {
        color: white;
    }
}

こちらはSafariのみに適用。

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .hack {
        color: white;
    }
}

webkit系でChromeとOpera。Operaをどれだけの人が使っているか定かではないですが、本当に時々指摘されることがあるので、覚えておくと良いかもしれません。

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    .hack {
        color: white;
    }
}

こちらはFirefoxのみに適用。自分のお客様はFirefox率が未だに高くて、よくチェックされてます。

@-moz-document url-prefix() {
    .hack {
        color: white;
    }
}

Edgeに適用。Edgeについてはこの1年ぐらいでお客様で使っている方がいない？少ない？のか指摘受けることは無くなりました。

@supports (-ms-ime-align: auto){
    .hack {
        color: white;
    }
}

一応、IEも書いておいた方が良いかな～、というぐらいで。使う必要なと思うけど、とりあえず入れておきます。

@media all and (-ms-high-contrast: none){
    .hack{
        color: white;
    }
}