公開日
更新日

ブラウザ別に適用させるCSSハック

苦労してコーディングしたページがブラウザによっては表示がおかしい…なんてよくありますよね。
そんな時のために今回は主要ブラウザごとにCSSを適用させるやり方を紹介します。

サンプル

動作確認は以下の環境で行っています。

Google Chrome 120.0 (macOS Ventura)
Safari 16.5.2 (macOS Ventura)
Opera 106.0 (Windows10)
Firefox 119.0 (macOS Ventura)
Edge 120.0 (Windows10)
Internet Explorer 11.0 (Windows8)

この記事を各種ブラウザで見てもらえればボックスの背景色が各々異なるのが確認できます。

Google Chrome, Edge(Chromium), Safari, Opera

4つともwebkit系のブラウザなのでこの書き方でChrome, Edge(Chromium), Safari, Operaとも同じ表示になります。

とはいえ皆さん当然4つを分けたいと考えているかと思います。

Google Chrome, Edge(Chromium), Opera

レンダリングエンジンが同じwebkit系のChrome・Edge(Chromium)・Operaを分けて表示する方法は見つからず…
まあほぼEdge = Chromeですし、「Operaだけ表示がおかしいんだけど」なんて事態に自分は遭遇したことがないですし問題は無いでしょう、多分。

Safari

古くて今は効かない情報が今も検索上位に来ることが多いのがSafariなのですが最新版はこれ!

参考:【CSS】各インターネットブラウザでのCSSハックの方法とは | KUSU’S SITE
参考:safariのみに適用させるcssハックが効かないときに試す最新の記述方法【2017年】 – SublimeなLife日記

Firefox

Firefoxのみ適用させるには以上。

Edge(EdgeHTML)

Chromiumベースになる以前のレガシー版Edge。
Windows UpdateをONにしてると自動的にChromiumベースのEdgeに更新されるので最早使っている人は限りなく少ないと思われますし、公式のサポートも切れていますが一応紹介します。

Edge(EdgeHTML)の場合は以下の2パターン。

あるいは…

参考:css hacks for IE11 ( & Edge )
参考:Edgeのみに適用させるcssハックが効かないときに試す最新の記述方法【2017年】 – SublimeなLife日記

Internet Explorer

これも一応紹介します。サポート終了済みのInternet Explorer。

検索すると大抵以下のコードが出てくるわけですが…

実はこれ、ハイコントラストモードが「オン」の場合、IEでも適用されない。

じゃあハイコントラストモードの状態に関わらず以下のようにすると…

今度はハイコントラストモードが「オン」の場合のみにEdgeにもスタイルが適用されます。

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

じゃあどうする?といったわけですがIE10を無視してIE11のみ考えれば以下。

参考:css hacks for IE11 ( & Edge )

…長々と書きましたが、サポートが切れた以上対応する必要は無いでしょう。
最早忘れてもいい備忘録。

まとめ

2022年6月15日、Internet Explorerのサポート終了。
これにより、実質的にChrome, Safari, Firefoxの3つをチェックしておけば問題なくなったと言えるでしょう。
体感としても、ブラウザごとの差異に悩まされることがほぼ無くなりました。

IEの呪縛からの開放は多くのWEB関係者にとってのまさに福音。
さようなら、全てのInternet Explorer。

The following two tabs change content below.

熊田 賢太郎

株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。
内容がよかったら、シェアをお願いします!
一覧へ戻る

INSTAGRAM