OS・ブラウザの情報を取得してCSSで上手に使う!

カテゴリー:javascript

最近MaMoTaKuにhtmlやcss,wordpressの基礎を教えてくれた方がブログを更新しているのを見るので、
記事を更新したいと思います!
MaMoTaKuはjsが好きで、最近OS、ブラウザの判定をしないといけない時があったので
その時に作ったjsを少し改造して今回ご紹介します!
今回のjsで出来ることは、ページを閲覧しているユーザの
「OS」と「browser」の情報を取得してhtmlタグに取得した情報をクラスに追加することです!
では、使い方をご紹介します
(※あくまでMaMoTaKu用のメモです、ここ大事)

取得できるOS・ブラウザ

今回のjsで、取得できるデータは以下になります
「OS」
Windows or Mac or iOS or Android
「browser」
Firefox or Chrome or Safari or IE(バージョンも6-11まで取得できるように一応してます) or Opera
です!

使い方

この取得した情報が「htmlタグにクラスで追加され、以下のような状態になります
例)OSがMac、ブラウザがFirefoxの場合

<html class="mac firefox">
〜
</html>

なので、これをcssで使えば

.mac 〜{
}
.mac.firefox 〜{
}

なんてことができます!
これで、cssが使える幅が広がるのではないでしょうか?

DEMOとjs

DEMOサイト
os_browser_checker.js