OS、ブラウザ判定をしてCSSハックを個別設定できるjs[CSS Browser Selector]

1月 24th, 2013

スマホ勢力が勢いを増してクロスブラウザ対応が標準になりつつある今日この頃。
よくあるのがスマホ対応としてメディアクエリやスマホ用のCSSを準備してCSSを書き換えるというもの。

メディアクエリはCSS3の機能なので記述の仕方はこの辺を参考に

スマホ用のCSSを別に読み込む場合はリンクタグに条件(デバイスのウィンドウサイズなど)を加えて分岐させる

ウィンドウサイズを判定して(ここでは480px)それ以下ならsp.css(スマホ向け)それ以上ならpc.css(PC向け)を読む
<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width:480px)” href=”./css/sp.css”>
<link rel=”stylesheet” type=”text/css” media=”screen and (min-device-width:481px)” href=”./css/pc.css”>

この辺を参考に

この方法だとだいたい画面サイズを基準として判定して、iPhoneとかAndroidとかピンポイントで指定が出来ない(※)
※:iPhoneだけっていうのはできるっぽいよ

javascriptでユーザーエージェント取得してAndroidだったらアクションを起こしてCSSを書き換えるということで個別の対応は出来るんだけど
ちょっと面倒だなと思っておりました。

ちなみにAndroid判定、バージョン判定はこんな感じでできます。
var ua = navigator.userAgent;

if( ua.search(/Android 2.1/) != -1 ) {
Android 2.1の場合実行;
}

else if( ua.search(/Android 2.2/) != -1 ){
Android 2.2の場合実行;
}

else if( ua.search(/Android 2.3/) != -1 ){
Android 2.3の場合実行;
}

if( ua.search(/Android/) != -1 ){
Android場合実行;
}

<ここからが本題>
そうしたら、jsファイルを一つ読み込むだけでOSの判定、ブラウザの判定をしてCSSハックができるというjsを発見しました。

CSS Browser Selector

最終更新日が2010年とちょっち古く、サイト自体もものすごいシンプルな作りなので動作に不安を持っていたのですがw
実際に試して見たらすこぶる優秀!

■使い方

1.jsを読み込む

<script src=”css_browser_selector.js” type=”text/javascript”></script>

このjsでブラウザ、OS判定をしています。

2.CSSにハックをかける

ハックをかけたいクラス、IDのまえにOS、ブラウザのクラスを追加する。※
※:OSとブラウザ両方指定する場合はOS指定クラス、ブラウザ指定クラスの間にスペース入れない。

OSとブラウザ両方指定する必要はなくどちらか片方でもフレキシブルに機能します。

OSリスト

  • win – Microsoft Windows (all versions)
  • vista – Microsoft Windows Vista
  • linux – Linux (x11 and linux)
  • mac – Mac OS
  • freebsd – FreeBSD
  • ipod – iPod Touch
  • iphone – iPhone
  • ipad – iPad
  • webtv – WebTV
  • j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
  • blackberry – BlackBerry
  • android – Google Android
  • mobile – All mobile devices

ブラウザリスト

  • ie – Internet Explorer (All versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (all versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • ff3_5 – Firefox 3.5
  • ff3_6 – Firefox 3.6
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • opera10 – Opera 10.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 – Safari 3.x
  • chrome – Google Chrome
  • iron – SRWare Iron

/* 通常 */
#hoge{border:1px solid #ff0000;}
/* Androidだけに適用 */
.android #hoge{border:1px solid #ff0011;}
/* firefoxだけに適用 */
.gecko #hoge{border:1px solid #ff0022;}
/* windows chromeだけに適用 */
.win.chrome #hoge{border:1px solid #ff0033;}
/* mac IE5xだけに適用 */
.mac.ie5 #hoge{border:1px solid #ff0044;}

これ使えばスマホブラウザ含むクロスブラウザ対応のサイトを作る時にCSSが一つですむ。
複雑ならCSS組むならスマホ用、PC用で分けてつくるとしてもAndroidとiOSで表示が異なる場合は十分につかえる。
まぁ、レスポンシブデザインならちょっと話は違うのかもしれないけれど。

[`evernote` not found]
このエントリーをはてなブックマークに追加

カテゴリー: web

タグ: , , Leave a comment

コメントフィード1件のコメント

  1. ざっくりメモメモ。

    […] http://www.browncrown.net/blog/?p=2098 […]

Leave a comment

Feed

http://www.browncrown.net/blog / OS、ブラウザ判定をしてCSSハックを個別設定できるjs[CSS Browser Selector]