[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+

IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。

サイトのキャプチャ

CSS Browser Selector+

CSS Browser Selector+の特徴

CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。

CSS Browser Selector+が判別するのは下記の通りです。

  • ブラウザ
  • ブラウザのバージョン
  • レンダリングエンジン
  • OS
  • OSのバージョン
  • デバイス
  • デバイスのバージョン
  • min-widthとmax-widthのスクリーンサイズ
  • スクリーンの向き
  • 言語
  • JavaScript

CSS Browser Selector+の使い方

外部スクリプトを記述するだけで、各UAをCSSのセレクタとして利用できます。

外部ファイル

<script src="js/css_browser_selector.js"></script>

HTML

あとは、CSSのセレクタとして利用するだけです。

<html lang="pt-br" class="webkit chrome chrome21 win win8 js orientation_landscape minw_980 maxw_1199">

セレクタは他にも、.ie6, .ie7, ie8, .winXP, .win7, .mac, .ipod, .iphone, ipad, .android, .no-js などが利用できます。

top of page

©2017 coliss