modernizr是一個判斷瀏覽器支援性的JavaScript library ,比起以往使用userAgent判斷不同瀏覽器的支援性,使用modernizr相對更直覺方便。
支援性的example:
//是否支援css3動畫的效果 if( Modernizr.csstransitions ){ } //是否支援touch event if( Modernizr.touch ){ }
在css3如transform屬性,在不同瀏覽器上,都會有不同屬性名稱,可以用prefixed來判斷:
//如果是chrome則會顯示WebkitTransform console.log( Modernizr.prefixed('transform') );
如果要判斷css的media query,目前是否符合那段判斷,可以使用Modernizr.mq:
Modernizr.mq('(min-width: 0px)');
判斷event可以採用hasEvent:
//是否有縮放event(iphone、ipad) Modernizr.hasEvent('gesturestart', elem) ;
如果要自己撰寫測試的判斷,可以使用addTest:
//官方已實作 Modernizr.addTest('canvas', function() { var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); });
判斷有沒有此css屬性:
Modernizr.testProp('pointerEvents')
其他method的使用方式和詳細文件,可以參考官方的doc。