ブラウザ別のCSSハック

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

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

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

ここは何色？

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

• Google Chrome → 青
• Opera → 青
• Safari → 緑
• Firefox → オレンジ
• Edge(Chromium) → 紫
• 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 (Chromium)

/* Edge(レガシー版) ※現在のバージョンでは無効 */
@supports (-ms-ime-align: auto) {
	.css-hack {
        color: purple;
    }
}

/* Edge(Chromium) ※現在のバージョンでは無効 */
_:lang(x)::-ms-, .css-hack {
    color: purple;
}

2021年11月現在、Edgeだけに有効なものを見つけられておらず…。
以下のページも参考にしてみて下さい (閲覧しているブラウザで有効なハックが暗い赤色にハイライトされます)。

browser strangeness
https://browserstrangeness.github.io/css_hacks.html

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 ハックに使ってはいけない、ただひとつの理由

IE10以下について

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

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

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