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系の3ブラウザ全てを指定します。
Google Chrome / Opera
/* chrome opera */ @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) { .css-hack { color: blue; } }
Safariを除いたwebkit系2つを指定します。
※ちなみに、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は2通りの書き方があります。
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以下への対応は、よっぽど特殊な事情で求められていない限り、人的努力(説明&説得)で対応した方が良いと思います…。