2019.01.28 

ブラウザ別のCSSハック

Web制作

 

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

もくじ
  1. サンプルコード&実行結果
  2. Google Chrome / Safari / Opera
  3. Google Chrome / Opera
  4. Safari
  5. Firefox
  6. Edge
  7. Internet Explorer (IE11)
  8. (おまけ) Internet Explorer (IE10)

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

ここは何色?

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

  • Google Chrome →
  • Opera →
  • Safari →
  • Firefox → オレンジ
  • Edge →
  • IE11 → 灰色

※上から順にCSSを適用させていっているので「ChromeとOperaはredからblueに」「Safariはredからgreenに」上書きされています。

ブラウザごとの指定方法

Google Chrome / Safari / Opera

webkit系の3ブラウザ全てを指定します。

Google Chrome / Opera

Safariを除いたwebkit系2つを指定します。
※ちなみに、OperaだけのCSSハックは凄く古い情報しかみつからなかったです。今までにOperaだけ何とかしたいという現象に当たったことが無いので、興味のある方は下の記事をどうぞ、2010年の記事です。

【興味があれば】CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス

Safari

Safariのみに適用します。

Firefox

Firefoxのみに適用します。

Edge

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

Internet Explorer (IE11)

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

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

(おまけ) Internet Explorer (IE10)

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

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

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


  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。