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

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

機能

ページを閲覧した端末の
・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
までメールをしてみてください。

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