BrowserDetect.jsと子孫セレクタによるシンプルなクロスブラウザCSS
この記事は賞味期限切れです。（更新から1年が経過しています）
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要素には次のようにクラスが追加されます。
<html lang="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も同様に孕んでいる問題点です。
（一体誰が気にするのか、とも思いますが）
以上の問題を踏まえて、
プロジェクトの趣旨/性格に基づいて使用を判断したいですね。
コメント