【MicroSoft Edge対応】【jQuery不要】のcss-browser-selector.js

2916 Views
JavaScript
【MicroSoft Edge対応】【jQuery不要】のcss-browser-selector.js

Webの制作を行っていく中で切り離せないもんだはいくつもありますが、その中でも
「OS」「ブラウザ」による表示の差。
今まではWeb上で公開されているJavaScriptなどを使い、HTMLタグにOSやブラウザのクラスを追加して、
そこからCSSなどで微調整を行いたいが、MicroSoft EdgeをサポートしてるJavaScriptがない!

なので今回私の方で機能を限定して「css-browser-selector.js」を作ってみました。

SNSでシェア♪

スポンサーリンク

機能

ページを閲覧した端末の
・OS名
・ブラウザ名(IEはバージョンも)
・その他(モバイル、タブレット端末か判定できるも)

jQuery不要で動きます。

サポートしているブラウザ

・Mac
  Google Chrome
  FireFox
  Safari
  Opera

・Windows
  Google Chrome
  FireFox
  MicroSoft Edge
  Internet Explorer(Ver 6〜11)
  Opera

・iOS
  Safari

・Android
  default broeser(chromeではないデフォルトのブラウザ)
  Google Chrome
  FireFox
  Opera

です。

使い方

※2017/8/4追伸 ieで発生していたバグを修正しました
css-browser-selector.js(Ver 0.2)」を右クリックより保存後、サーバへアップロード。
その後、使用したいHTMLファイルの「headタグの中」または「bodyタグの閉じる前」に

<script type=”text/javascript” src=”js/css-browser-selector.js”></script>

を挿入。
※ファイルのパスはファイルの設置場所に合わせて変更してください。

設置が完了したらページをロードするとHTMLタグのクラスに「OS」と「ブラウザ」の情報が追加されます。
※ライセンスフリーなのでご自由にお使いください、ただしノーサポート!

追加されるクラス名

ブラウザ
Google Chrome → 「chrome」
FireFox → 「firefox」
Safari → 「safari」
Opera → 「opera」
Androidデフォルトブラウザ → 「browser」

OS
mac → 「mac」
windows → 「windows」
ios → 「ios」
android → 「android」

端末
モバイル → 「mobile」
タブレット → 「tablet」

あとがき

基本ノーサポートの予定ですが、対応して欲しいブラウザなどがありましたら、
m.tamura●futaego.com
までメールをしてみてください。

ぶっちゃけ返事をするかどうかもわかりません笑
プラス迷惑メールがき始めたらアドレス消します!笑

SNSでシェア♪

スポンサーリンク

関連記事