ブラウザ別のCSSハック

今回は主要なブラウザ別にCSSの適用方法を紹介します。
(※2019年の記事ですが内容を一部修正しました)

サンプルコード&実行結果

<p class="css-hack">ここは何色？</p>

ここは何色？

ここの文字色は何色になっているでしょうか？(もし結果が違っていたら教えて下さい…)

• Google Chrome → 青
• Opera → 青
• Safari → 緑
• Firefox → オレンジ
• Edge → 紫
• IE10 / IE11 → 灰色

※上から順にCSSを適用させていっているので「ChromeとOperaはredからblueに」「Safariはredからgreenに」上書きされています。

ブラウザごとの指定方法

Google Chrome / Safari / Opera

/* chrome safari opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .css-hack {
        color: red;
    }
}

webkit系の３ブラウザ全てを指定します。

Google Chrome / Opera

/* chrome opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    .css-hack {
        color: blue;
    }
}

Safariを除いたwebkit系２つを指定します。
※ちなみに、OperaだけのCSSハックは凄く古い情報しかみつからなかったです。今までにOperaだけ何とかしたいという現象に当たったことが無いので、興味のある方は下の記事をどうぞ、2010年の記事です。

【興味があれば】CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス

Safari

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

Safariのみに適用します。

Firefox

/* Firefox */
@-moz-document url-prefix() {
    .css-hack {
        color: orange;
    }
}

Firefoxのみに適用します。

Edge

/* Edge(Chromium) */
_:lang(x)::-ms-, .css-hack {
    color: purple;
}

Edgeのみに適用します。

Internet Explorer (IE11)

/* IE11 */
_:-ms-lang(x)::-ms-backdrop, .css-hack {
        color: gray;
}
/* IE10 & IE11 */
_:-ms-input-placeholder, :root .css-hack {
        color: gray;
}

-ms-high-contrast で指定する方法もあるけど、あまりオススメしません。
二つ目の _:-ms-input-placeholder, :root を使うことが多いです。

【参考】-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由

(おまけ) Internet Explorer (IE10)

IE10以下に対応するとなると色々と厄介です。
当初、IE10以下についても纏めようと思いましたが、色んな意味で心が折れそうになったので、知りたい方は以下の記事を見てみて下さい。

【参考】IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

IE10以下への対応は、よっぽど特殊な事情で求められていない限り、人的努力(説明&説得)で対応した方が良いと思います…。