Eyecatch jQuery

Javascript,jQuery

ブラウザごとに異なるCSSのclassを付与する仕組みをjQueryで作ってみた。

2015/06/04

ブラウザごとに異なるCSSのclassを付与し、見た目を変えてみる仕組みをjQueryを使って作ってみました。

ブラウザ別にclassを付与してみる

CSSの用意

やってることは至極簡単。
アクセスしてきたブラウザのユーザーエージェントを取得し、<html> タグにブラウザ別の class 名を付与。
あとは付与する class 用の CSS を作成すれば OK、というもの。

付与されるクラス名は以下の様になっています。
IE はバージョンも取得できるようにしています。

  • IE9 : <html class="ie9_0" lang="ja">
  • IE10 : <html class="ie10_0" lang="ja">
  • IE11 : <html class="ie11_0" lang="ja">
  • Chrome : <html class="chrome" lang="ja">
  • Firefox : <html class="firefox" lang="ja">
  • Opera : <html class="opera" lang="ja">
  • Safari : <html class="safari" lang="ja">

用意する CSS は以下のように。

IE11用の例

IE10用の例

Chrome用の例

Firefox用の例

jquery.tgAddBrowserClass

最後に、今回の jquery スクリプトを紹介。
ほとんどコメントに書いてあるとおりですが、IE11について。

IE11から、ユーザーエージェントの仕様が変わっており、従来の「MSIE」という文字列では判別できなくなっています。
IE11からは「Trident」という文字列を以ってIEと判定し、バージョンは「rv:」に続く数字となります。

ということで、以下の様なスクリプトを作成しました。
これで、<html> タグにブラウザ別のクラス(ie_11とかchomeなど)を付与されます。

結果

IE11
demo_result_ie11

IE10
demo_result_ie10

Google Chrome
demo_result_chrome

Firefox
demo_result_firefox

デモ

デモはこちらから。
jquery.tgAddBrowserClassサンプル

-Javascript,jQuery
-, , , ,