BrowserDetect.jsと子孫セレクタによるシンプルなクロスブラウザCSS

mach3 — Thu, 16 Sep 2010 02:55:42 +0000

BrowserDetect.jsは、閲覧環境を判別する為のJSライブラリです。
今回はこれを使用して、Modernizrのような手法で
クロスブラウザCSSを書く実験を試みてみます。

BrowserDetect.js

ダウンロードリンクはどうやら無いようなので、
ページ内に書かれたソースをコピー&ペーストします。
使い方は簡単で、スクリプトをロードして
BrowserDetectオブジェクトのプロパティを参照するだけ。

var browser = BrowserDetect.browser; //ブラウザ名の取得
var version = BrowserDetect.version; //ブラウザバージョンの取得
var os = BrowserDetect.OS; // OS名の取得

クロスブラウザCSSを書く準備

もしModernizrを使用した事があればご想像の通りですが、
HTML要素にブラウザ名とバージョンを添えたクラス名を動的に追加してやります。

$("html").addClass( BrowserDetect.browser );
$("html").addClass( BrowserDetect.browser + BrowserDetect.version );

例えばIE6でアクセスすると、HTML要素には次のようにクラスが追加されます。

"ja" class="Explorer Explorer6">

CSSを書く

あとは子孫クラスタを使ってCSS内で条件分岐をしてやれば良いです。
ハック等に頼らないクリーンなCSSが出来上がりますね。

#Box{
    /* デフォルトのスタイル */
    width:290px;
    height:210px;
    border:5px solid #666;
    padding:10px;
}
.Explorer6 #Box{
    /* IE6用のスタイル */
    width:320px;
    height:240px;
}

この方法の問題点

JSが働かないとだめ

当たり前ですが、JavaScriptが動かない環境ではデザインが崩れる事が予想されます。
（Modernizr使ってる時点で今更何を言ってるのって感じですが…）

HTML4ではHTML要素のclass属性はInvalidである

class属性が使用出来る要素について、
HTML5では「The Every HTML Element」と言及している事から問題はなさそうですが、
どうやらHTML4ではInvalidになる様子。
これもまた、Modernizrも同様に孕んでいる問題点です。
（一体誰が気にするのか、とも思いますが）

以上の問題を踏まえて、
プロジェクトの趣旨/性格に基づいて使用を判断したいですね。

BrowserDetect – Mach3.laBlog

BrowserDetect.jsと子孫セレクタによるシンプルなクロスブラウザCSS