Terry hug's

——whole life

Modernizr的基本使用

先说说什么是Modernizr:

Modernizr 是一套 JavaScript 函式库,用来侦测浏览器是否支援次世代的网站技术。

Modernizr不同于传统透过解析浏览器的用户代理的识辨方式,认为这种方式亦不可靠,例如使用者可以手动更改它们浏览器的User agent、即便是相同的网页渲染引擎,在不同的浏览器中也不一定支援相同的功能。因此Modernizr通常会建立一个特定样式的元素,然后立刻尝试改写这些元素的设定,若在支援的浏览器上,元素会回传有意义的值。但在不支援的浏览器则会回传空值或“undefined”。Modernizr 利用这些结果来判断浏览器是否支援这些功能。

Modernizr能测试超过100种以上的次世代功能。测试的结果会储存在一个名为“Modernizr”的物件里,里面包含了测试结果的布林值。并且根据支援或不支援的功能,新增class名称给HTML元素。
                                                                 --摘自《维基百科》
以前,html+css很难写出符合各种浏览器标准的代码,为了保证兼容性,对不同的浏览器运行不同的样式,html开发人员必须使用各种hacks,利用浏览器的漏洞来使不同的浏览器加载不同的css样式。此种解决方法只能说是便宜之计,而Modernizr提供了比较优雅的解决方案。

先看看怎么使用吧:


<html class="no-js">
	<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>test</title>
        
         <script src="js/modernizr.js" type="text/javascript"></script>
         
    </head>

    <body>
      <h1>test</h1>
    </body>
</html>

这里在运行的时候会被取代为:(用firebug之类的工具可以看到实际加载的类)

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
可以看到所有以“no-”开头的,就是这个浏览器不支持的特性。因此,只要在css种添加两种样式:
.canvas h1 {
    color: blue;
  }

.no-canvas h1 {
    color: red;
  }
由于html元素被添加了相应的class,使得两种样式在不同的情况下被加载了。 也可以使用javascript判断一个名为Modernizr的元素属性:
$(function() {
    if (Modernizr.canvas) {
      $('h1').text('canvas');
    } else {
      $('h1').text('no-canvas');
    }
  });
也可以使用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'
]);
具体参考http://modernizr.com/docs/

posted on 2013-03-29 23:06 [terry hug] 阅读(1603) 评论(1)  编辑  收藏 所属分类: html+css

评论

# re: Modernizr的基本使用 2014-07-21 14:37 ITyang

模模糊糊  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

公告

Locations of visitors to this page

导航

<2013年3月>
242526272812
3456789
10111213141516
17181920212223
24252627282930
31123456

统计

常用链接

留言簿

随笔分类

随笔档案

文章档案

相册

收藏夹

友情链接

搜索

最新评论

阅读排行榜

评论排行榜