UserAgentに依存しないブラウザ判定JavaScript
ブラウザが提供している機能を調べてブラウザの種類やバージョンを判定し、<html>タグにクラス名として判定結果を付加するJavaScriptライブラリです。
UserAgentの文字列は参照せずに判定しているので、仮にUserAgentを偽装していても正確なブラウザ判定が可能です。
軽量なので、Modernizrほどがっつり判定しなくてもいいという状況で有効かもしれません。
jsディレクトリ内のbrowser-detector.js(もしくはface-emotion.min.js)をHTML内で読み込みます。
<script type="text/javascript" src="/path/to/browser-detector.js"></script>
以上です。
※ <html>タグにクラスを付加するという性格上、早い段階でロードした方が良いと思われます。
htmlソースの段階で以下の様にno-jsというクラスを付けておくと、browser-detector.jsロード時にjsという名前に変更します。
<html lang="ja" class="no-js">
実行後
<html lang="ja" class="js gecko firefox modern">
これはJavaScriptが実行できる環境ですという意味を表します。このクラス名がno-jsのままの場合、browser-detector.jsがロードされたのにもかかわらず実行されていないという事になり、そのブラウザではJavaScriptが無効にされているという事になります。
<html class="js ie ie8 lt-ie9 lt-ie10 lt-ie11 old-ie" ...
すべてのバージョンのIEに付加されます。
IEの各バージョンに応じた数字が入ります。
※ IE6未満には付加されませんが、lt-ie6で判定できます。
特定のIEのバージョン未満を表すクラス名です。
※ IE7ならlt-ie8、lt-ie9、lt-ie10、lt-ie11が付加されます。
IE8以下のブラウザである事を表します。
old-ie以外のブラウザ(IE9以上、Chrome、Firefoxなど)に付加されます。
FirefoxもしくはGeckoエンジンで動作しているブラウザです。
GoogleChromeもしくはBlinkエンジンで動作しているブラウザです。新Operaもこちらに含まれます。
旧Operaです(Prestoエンジン)。
上記以外のWebkitエンジンで動作しているブラウザ(Safariなど)です。
スマートフォンやタブレットなどのモバイルデバイスです。
タッチ操作対応デバイスです(デスクトップも含まれます)。
- 提供している機能からブラウザを判定する処理に関しては、W3G(World Wide Web Good)様のJavaScript ユーザエージェント条件分岐便利スニペットを利用させていただいています。
- IEの判定の一部にはhttp://ajaxian.com/archives/attack-of-the-ie-conditional-commentを参考にさせていただいています。
- 参考サイトであるJavaScript ユーザエージェント条件分岐便利スニペット様が更新されていたのでその内容を反映
- 初版リリース
MIT licenseで配布します。
© 2013 ktty1220