熊本県でWeb、EC、IoTなら株式会社クロコロール

お問い合わせ

MENU

Kuroko Blog

クロコブログ

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

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

※2018年7月時点での情報です。タイムラグが大きいほど情報が誤ってる可能性があります。ブラウザの最新動向には注意してください。

サンプル

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

Google Chrome 67.0 (Windows8)
Safari 11.1.2 (macOS High Sierra)
Opera 50.0 (macOS High Sierra)
Firefox 61.0 (Windows8)
Edge (Windows10)
Internet Explorer 11.0 (Windows8)

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

Google Chrome, Safari, Opera

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

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

Google Chrome, Opera

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

Safari

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

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

Firefox

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

Edge

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

あるいは…

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

Internet Explorer

最後はWeb関係者皆大嫌い(?)な、すなわち最も需要がありそうなIE。

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

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

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

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

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

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

参考:css hacks for IE11 ( & Edge )

これが現時点ではベターではないでしょうか。

まとめ

余談ですが最近Internet Explorerサポートチームのブログがちょっとした話題になりました。

Internet Explorer の今後について

…要約すると「頼むからお前らIE使うの止めてEdgeか他のモダンブラウザに移行してくれ」といったところでしょうか。

コーダーとしても「IEだけ表示がおかしい」「IEだけCSSプロパティが対応していない」なんて日常茶飯事であり、公式のサポートチームですら止めたがっている(だろう)IEを意固地になって対応する必要はあるのか?なんて思いが頭をもたげることがありますが、シェアを考えるとなかなか切り捨てられるものでもありません。

Web関係者はあと数年は半泣きになりながらIE対応をしていくのでしょう。。。

The following two tabs change content below.

クロコのケン

株式会社クロコロールで主にコーディングを担当しています。 まだまだ見習いの身です…

サイドお問い合わせ
サイドお問い合わせ
サイドお問い合わせ

人気記事