[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
Post on:2013年1月10日
sponsors
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。
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 などが利用できます。
sponsors
