Chrome、Firefox、Safari、IEそれぞれのみに適用されるCSSハックの書き方まとめ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

browsers

以前、IE11とSafariのみに適用されるCSSハックの書き方を記事にしました。

ちょうどいい機会なんで、これにChromeとFirefoxも加えた、そのブラウザでしか表示されないCSSハックの書き方をまとめたいと思います。

photo by Sean MacEntee

スポンサーリンク
レクタングル(大)広告

ChromeとOperaのみで適用される書き方

ChromeとOperaだけで表示されるCSSハック方法は以下の2通りです。どちらでも良いです。

※Chromeと、Operaは差別化できませんでした。レンダリングエンジンがGoogle ChromeやSafariと同じWebKitになったOpera15.0以降は、Chromeと差別化できるコードが見つかりませんでした。

参考 Is there a Google Chrome-only CSS hack? – Stack Overflow

Firefoxのみで適用される書き方

Firefoxだけで適用されるスタイルを書くには以下。

参考 Chromeのみ、Firefoxのみに適用させるCSSハック【CSS】

Safariのみで適用される書き方

Safariのみで適用されるスタイルを書くには以下。

参考 is there a css hack for safari only NOT chrome? – Stack Overflow

Internet Explorer10と11のみに適用される書き方

IEの最新は、11ですが、10もう使っている人が多いため、それぞれ用の書き方を載せておきます。

参考 css selectors – How to write a CSS hack for IE 11? – Stack Overflow

動作確認ブラウザ

今回は、現時点で最新のブラウザのみで動作確認を行いました。なので、古いバージョンだどうなるかわかりません。

  • Chrome37.0
  • Opera24.0
  • Firefox33.03
  • Safari5.1.7
  • Internet Explorer11.0

あと、僕はWindowsしか持ってないので、SafariはWindows版の5.1.7です。Mac版や、Safari6、7などでの動作わかりません。

動作確認

先程の、CSSハック方法を踏まえて、各ブラウザでちゃんと表示されるか確認してみました。

確認したスタイルシートは以下。背景色をブラウザのロゴなどに使われている色に似たものを使用してみました。

Chrome

Google Chrome

Opera

ChromeとOperaを分けて書く方法はわからず。

Opera

Firefox

Firefox

IE11

Internet Explorer11

Safari

Safari

とりあえず以上のように.それぞれ別のスタイルを表示させることはできました。

まとめ

CSSハックは、本当にややこしいです。

ブラウザに合わせたCSSハック方法を探してコピペして使用したりするんですけど、バージョンが古かったりして使えなかったりするのも結構あったりします。

それに、AとBのブラウザに適用される書き方、AとCに適用される書き方とかあって、ただでさえ多いブラウザに、そんなセット要素も加わって、さらにバージョンがどうとか考えると、頭が処理落ちしてしまいます。

ですので、今回は2014年10月時点の最新版ブラウザに絞って、そのブラウザのみで使用できる書き方のみにしました。(Chrome&Opera除く)

「とりあえず最新版のブラウザのみに対応できていればOK」という方には、ちょうど良いと思います。

『Chrome、Firefox、Safari、IEそれぞれのみに適用されるCSSハックの書き方まとめ』へのコメント

  1. 名前:ta 投稿日:2016/03/13(日) 22:54:36 ID:f94fb6ce9

    参考にさせていただきました。ありがとうございます。

  2. わいひら 名前:わいひら 投稿日:2016/03/14(月) 13:14:10 ID:f6a7cdd73

    お役に立てたのであれば、僕も嬉しく思います。ありがとうございます。