今回は主要なブラウザ別に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系の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(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以下への対応は、よっぽど特殊な事情で求められていない限り、人的努力(説明&説得)で対応した方が良いと思います…。

2 件のコメントが “ブラウザ別のCSSハック” にあります。

  1. うお座 より:

    記事ありがとうございます!!
    どこを探しても動作せずに発狂しました(苦笑)
    無事に自分のサイトでも対応できました!

  2. いずみや より:

    うお座様

    コメントありがとうございます!
    お力になれて嬉しいです、発狂しそうな気持ち良くわかります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です