「modernizr」modernizr的使用

modernizr

测试浏览器有木有css和html的新特性，例如测试cssgradients特性，在html根目录加入类似如下的类

<html class="cssgradients"> or <html class="no-cssgradients">

cssgradients表示含有相应特性，no-cssgradients则表示没有。

根据检测结果进行渐进式设计，如下：

.no-cssgradients .header {
  background: url("images/glossybutton.png");
}

.cssgradients .header {
  background-image: linear-gradient(cornflowerblue, rebeccapurple);
}

如果modernizr自动生成的class名与你自己命名的class名有冲突，你还可以进行如下配置

{
  "classPrefix": "foo-",
  "feature-detects": ["dom/hidden"]
}

你会得到如下的测试结果：

<html class="foo-hidden">

"enableJSClass": true, //根目录添加js或者no-js
"enableClasses": true  //允许为html标签添加测试结果类

在js中测试是否含有新特性

  if (Modernizr.awesomeNewFeature) {
    showOffAwesomeNewFeature();
  } else {
    getTheOldLameExperience();
  }

modernizr API

Modernizr.on('flash', function( result ) {
  if (result) {
   // the browser has flash
  } else {
    // the browser does not have flash
  }
});

增加自己的特性检测

     Modernizr.addTest('itsTuesday', function() {
     var d = new Date();
     return d.getDay() === 2;
});

    Modernizr.addTest('hasJquery', 'jQuery' in window);
});

增加测试组

    var detects = {
     'hasjquery': 'jQuery' in window,
     'itstuesday': function() {
       var d = new Date();
       return d.getDay() === 2;
     }
    }
    Modernizr.addTest(detects);

     var keyframes = Modernizr.atRule('@keyframes');
     if (keyframes) {
       // keyframes are supported
       // could be `@-webkit-keyframes` or `@keyframes`
     } else {
       // keyframes === `false`
     }

    Modernizr._domPrefixes === [ "Moz", "O", "ms", "Webkit" ];

让你决定是否让浏览器包含某个固定事件

    hasEvent('blur') // true，work on p;

    hasEvent('devicelight', window) // true，work on windows;

检查浏览器是否符合媒体查询的设置

    Modernizr.mq('only all'); // true if MQ are supported, false if not

     var query = Modernizr.mq('(min-width: 900px)');
     if (query) {
       // the browser window is larger than 900px
     }

    prefixed('boxSizing') //返回'MozBoxSizing' ，boxSizing或者false

    var rAF = prefixed('requestAnimationFrame', window); //针对window，返回实际的函数
    raf(function() {
     renderFunction();
    })

    var rAFProp = prefixed('requestAnimationFrame', window, false);//返回名字
    rafProp === 'WebkitRequestAnimationFrame' // in older webkit

prefixed常见用法，将固定事件绑定。

    var transEndEventNames = {
        'WebkitTransition' : 'webkitTransitionEnd', * Saf 6, Android Browser
        'MozTransition'    : 'transitionend',       * only for FF < 15
        'transition'       : 'transitionend'        * IE10, Opera, Chrome, FF 15+, Saf 7+
    };
    var transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

    Modernizr.prefixedCSS('transition') // '-moz-transition' in old Firefox

    var rule = Modernizr._prefixes.join('transform: rotate(20deg); ');
    rule === 'transform: rotate(20deg); webkit-transform: rotate(20deg); moz-transform: rotate(20deg); o-transform: rotate(20deg); ms-transform: rotate(20deg);'

    rule = 'display:' +  Modernizr._prefixes.join('flex; display:') + 'flex';
    rule === 'display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; display:-ms-flex; display:flex'

是否有某种css特性(含有前缀模式)

    testAllProps('boxSizing')  // true

    testAllProps('display', 'block') // true
    testAllProps('display', 'penguin') // false

    Modernizr.testProp('pointerEvents')  // true，不检测带有前缀的特性

modernizr的使用

modernizr

在js中测试是否含有新特性

modernizr API

相关阅读

栏目导航

推荐阅读

热门阅读