modernizr.js を解読してみる

think49 @think49

Modernizr ( http://www.modernizr.com/ ) / HTML5, CSS3のブラウザ対応度合いを調べるライブラリ。

think49 @think49

@think49 CSSプロパティ判定は予想通り、element.style.property で判定している。

think49 @think49

@think49 Audio要素のMediaType判定は HTMLMediaElement.canPlayType で判定。( http://goo.gl/EGAi )

think49 @think49

@think49 以前、コードを書いたときには Interface HTMLAudioElement だけ読んでいて気が付かなかった…。 Modernizr.js はそれほど長いコードではないので、CSSプロパティ,HTML5判定を自前実装する目安として参考になりそう。

think49 @think49

@think49 geolocation の判定は !!navigator.geolocation / postMessage の判定は !!window.postMessage / WebSocket の判定は 'WebSocket' in window

think49 @think49

@think49 CSS 3D transform 判定は実際に動かして期待通りの結果が返ってくるかどうかで判定している模様。 @font-face もそうだけど、現在の document にノードを appendChild() 挿入している。

think49 @think49

@think49 全体としてコードは読みやすい。 "window" によるグローバルオブジェクト参照がないので、WSHへの移植は可能。

think49 @think49

@think49 ただ、条件付きコンパイルを利用しているのでコードを Minified するなら注意が必要。 dean.edwards.name/packer/ ( http://goo.gl/SpIr ) なら Minified できる。