ブラウザ別のCSSハック

2019年になった現段階でも、未だにブラウザによって表示がおかしいことがあります。
今回は主要なブラウザ別にCSSの適用方法を紹介します。

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

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

ここは何色？

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

• Google Chrome → 青
• Opera → 青
• Safari → 緑
• Firefox → オレンジ
• Edge → 紫
• 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 1 */
@supports (-ms-ime-align: auto) {
	.css-hack {
        color: purple;
    }
}
/* Edge 2 */
_:-ms-lang(x)::backdrop, .css-hack {
        color: purple;
}

Edgeは２通りの書き方があります。

Internet Explorer (IE11)

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

-ms-high-contrast で指定する方法もあるけど、あまりオススメしません。

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

(おまけ) Internet Explorer (IE10)

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

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

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