今回は主要なブラウザ別にCSSの適用方法を紹介します。
(※2019年の記事ですが内容を一部修正しました)
サンプルコード&実行結果
<p class="css-hack">ここは何色？</p>ここは何色？
ここの文字色は何色になっているでしょうか？(もし結果が違っていたら教えて下さい…)
- Google Chrome → 青
- Opera → 青
- Safari → 緑
- Firefox → オレンジ
- Edge(Chromium) → 紫
- IE10 / IE11 → 灰色
※上から順にCSSを適用させていっているので「ChromeとOperaはredからblueに」「Safariはredからgreenに」上書きされています。開発者ツールで「ここは何色？」部分を調べてみて下さい。
※2021年11月現在、Edgeだけに有効なものを見つけられておらず…(有効な方法があったら教えて下さい…)。
ブラウザごとの指定方法
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以下への対応は、よっぽど特殊な事情で求められていない限り、人的努力(説明&説得)で対応した方が良いと思います…。
記事ありがとうございます！！
どこを探しても動作せずに発狂しました（苦笑）
無事に自分のサイトでも対応できました！
うお座様
コメントありがとうございます！
お力になれて嬉しいです、発狂しそうな気持ち良くわかります。
IEとそれ以外のブラウザの表示方法を設定したかったので、こちらの記事を参考にしました。
ありがとうございます。
ただ、Edgeのハックだけ適用されませんでした。
サンプルをEdgeで表示すると青くなります。
Chromeと同じですね。
ちなみにEdgeのバージョンは最新です。
調べていただけると嬉しいです。
Alice様
コメントありがとうございます！
いつのまにか、Edgeのハックが効かなくなってしまっていました…。
本文中でも更新しましたが、こちらのページがわかりやすいです。
https://browserstrangeness.github.io/css_hacks.html
他には、海外のGoogleで「css hack edge」などで検索すると見つけられるかもしれません！
とてもわかりやすくまとまっている記事で、デモもわかりやすく助かりました…！
Chrome / Operaのみに適用されると書かれている
`@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm)`
について、 Safari 16 以降でmin-resolutionが対応した（ブラウザハックを使っていた側からすると、「してしまった」）ため、Safariにも適用される状態となっているようです…！
https://caniuse.com/?search=min-resolution
「Chromeでのみ `image-rendering: -webkit-optimize-contrast;` を適用したい」と思っていたのですが、
以下のように対応することにしました。（※Operaについては検証対象とすることがないため考慮せず）
“`css
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Chrome, Opera, Safari （16以降） で適用 */
img {
image-rendering: -webkit-optimize-contrast;
}
/* Safariで元に戻す */
_::-webkit-full-page-media, _:future, :root img {
image-rendering: auto;
}
}
“`