Modernizr学习笔记

最新推荐文章于 2024-10-25 09:09:24 发布

webexpressor

最新推荐文章于 2024-10-25 09:09:24 发布

阅读量286

点赞数

分类专栏： Mobile Web 文章标签： Modernizr

Mobile Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.General

1.1 什么是Modernizr？

Modernizr是用来检测下一代web技术本地实现的JavaScript类库，例如HTML5和CSS3的特性检测，这些特性在浏览器上的实现并不统一，而Modernizr就是告诉你，该浏览器是否实现某一特性。

它有区别于利用UA来检测，UA检测并不可信，因为UA是浏览器厂商自己定义的，它和特性并不能一一对应起来。而特性检测相对就比较可信，如果浏览器实现了该特性那自然是好的，否则要去做降级处理。Modernizr使这种特性检测变得很方便，它支持：

1）可以检测40多种特性

2）Modernizr这个对象就包括一个布尔值，来反应是否支持某一特性。

3）添加在html中的样式能很直观的表示是否支持某一特性。

4）它提供一个资源加载器，因此可以通过它来加载降级处理的资源文件。

1.2 Modernizr的安装

如果要考虑IE8之前版本的HTML5实现，建议将Modernizr的引入放在body标签前。

1.3 Polyfills 和 Modernizr

Modernizr目的是使开发变得统一，即使浏览器不支持该特性，也可以使用标准的API，例如针对JSON特性的json.js。json.js就是polyfill(替代品)。

好的消息是，现在已经有各种HTML5特性的替代品。

1.4 Modernizr.load()

Modernizr.load 是一个资源加载器，可以加载js和css。它的语法很容易理解：

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

在这个例子中，我们通过运行设备是否支持geolocation来加载不同的js文件。

Modernizr.load不会影响性能。

下面的例子是检测更多的特性，加载更多的文件，尽量将各种替代品压缩成一个文件，这样可以节省下载时间：

// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
  // Presentational polyfills
  {
    // Logical list of things we would normally need
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      myApp.init();
    }
  },
  // Run your analytics after you've already kicked off all the rest
  // of your app.
  'post-analytics.js'
]);

通过Modernizr.load我们可以做很多事情，单独的讲解在 yepnope.js。

1.5 Modernizr的工作原理

大部分的实现原理都一样的：先创建该元素，然后设置特殊的样式，再获取该元素，最后根据浏览器是否可以理解其中的属性来决定是否支持该特性。

1.6 IE中的HTML5元素

在IE中可以使用HTML5的元素，例如section、header、footer，Modernizr是通过额外的样式来控制它们显示的行为的。详情可参见HTML5 Boilerplate CSS。

1.7 支持的浏览器

支持IE6+，Firefox3.5+，Opera9.6+，Chrome，Safari2+，在手机上支持，ios的safari，Android的Webkit内核的浏览器，Opera Mobile，Firefox Mobile。

2.Modernizr的特性检测

2.1 CSS检测 http://modernizr.com/docs/#features-css

2.2 HTML5检测 http://modernizr.com/docs/#features-html5

3.Modernizr Methods

Modernizr.prefixed(str); //检测Css前缀，例如：Modernizr.prefixed('boxSizing');将返回MozBoxSizing。参数的形式必须为驼峰命名法，而不是带连接符的形式。

如果想得到带连接符的结果，可以通过如下代码进行转换：

str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

如果想匹配各个浏览器，我们可以进行如下做法：

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

检测Dom前缀：Modernizr.prefixed(str,obj[,scope]);例如：Modernizr.prefixed('requestAnimationFrame',window);//fn

如果只想得到名字，可以用Modernizr.prefixed(str,window,false);//webkitRequestAnimationFrame

mq() media query testing

Modernizr.mq(str);

1.如果不支持media query，则返回false

2.Modernizr.mq('only all and (max-width: 400px)')，尽量要指定特殊的media type

3.max-width和orientation query会根据现在的状态进行重新衡量，这个或许稍等一会才会改变。

4.Modernizr.mq('(min-width: 0px)')可以通过它来检测是否支持min-width。