Javascriptでブラウザ判別するスクリプト考えてみた。

車輪を再発明してみる。

発端はjQuery.browserでの判別がver1.3以降非推奨であることを知った衝撃から。
理由としてはjQuery.browserは内部的にユーザエージェントを見て判断してるから、とのこと。
じゃあCSSのベンダープレフィックス付きの要素を参照してみて有無を確かめるのはどうなの？ってことでこんなコード考えてみた。

デモページ

var browser = (function() {
	var _check= document.createElement('DIV');
	var _style = document.defaultView.getComputedStyle(_check, '');
	var _browser='msie';
	for(var s in _style ) {
		if(s==="webkitTransform") {
			_browser = 'webkit'; break;
		}
		if(s==="MozTransform") {
			_browser='firefox'; break;
		}
		if(s==="OTransform") {
			_browser='opera'; break;
		}
	}
	return _browser;
})();
console.log( 'your browser is ' +browser );

例ではCSS3のtransformを使ってみた。
各ブラウザは、ドラフト段階のCSSを先行採用した際の名残として、ベンダープレフィックス付きのスタイル定義がある。（例:Firefoxであれば「-moz-transform」など。javascriptで参照する際は「style.MozTransform」）
そこで、document.createElement()で生成した空のDIV要素に対してgetComputedStyleして取得したスタイル定義一覧に、各ブラウザ固有のベンダープレフィックス付きのスタイルが定義されているか否かを基準に判断してしまおう、という考え。

IEはそもそも「document.defaultView.getComputedStyle」をサポートしてないので、どの条件式にもヒットしなければIEでいいや、という動き。

今後各ベンダがプレフィックス付きのスタイルを廃止したら(あるいはOperaのように他ベンダのプレフィックスをサポートしたら)誤判断してしまう問題があるので、実際に使用する際にはもう少し対応が必要かも。