Modernizr.js介绍与使用

时间：2022-09-20 16:47:18

Modernizr帮助我们检测浏览器是否实现了某个feature，如果实现了那么开发人员就可以充分利用这个feature做一些工作，反之没有实现开发人员也好提供一个fallback。所以，我们要明白的是Modernizr只是帮我们检测feature是否被支持，它并不能够给浏览器添加那些本来不支持的feature。

Modernizr在2010和2011年均赢得了 .net Award for Open Source App of the Year ，要知道它的竞争对手都是像Wordpress、Drupal这些重量级选手。同时在2011年，它的首席开发者 Paul Irish 赢得了Developer of the Year大奖。

其实，这个类库使用非常简单，简单到你把 官方文档 (单页)从头到尾看一遍就完全了解它的使用方法了。接下来，我做一点简单的介绍。

Setting-Up Modernizr

在官方网站( http://modernizr.com )上我们可以看到有两个下载选项，Development和Production版本。其实它们都会导向同一个下载页面，只不过前者会帮我们把选项预先勾上而已。

Modernizr.js介绍与使用

通常我们需要检测的新特性基本都囊括在了这些选项中，我们可以根据自己需要，定制化的选择需要检测的feature。

下载完后我们就可以在 <head> 中引用这个类库。由于Modernizr帮我们内置了 html5shiv 类库，所以我们必须在 <body> 加载之前引用这个类库。当然你如果针对的是IE9+的浏览器，那么大可以在页面元素加载完后再引入，但这样就会有 FOUC 这样极不友好的效果出现。

最后，我们需要在 <html> 标签中加入 no-js 类，以免浏览器禁用了JavaScript。

Working With Classes

使用了Modernizr后，页面中渲染后的html代码是这个样子的：

Modernizr.js介绍与使用

其中有很多以no作为前缀的class，当然大部分都没有这个前缀。事实上，如果一个类名以no作为前缀，比如 no-touch 这表示浏览器不支持touch特性，这也是最新版本的Chrome不支持的两个feature之一：

Modernizr.js介绍与使用

Modernizr有一个 test页面 ，可以检测当前浏览器支持的特性。Chrome目前是对HTML5和CSS3新特性支持最好的浏览器，没有之一。

言归正传。当我们引入了Modernizr.js类库后， <html> 标签的class属性就会被相应的赋值，以显示浏览器是否支持某类CSS属性。比如在IE6下面，不支持boderradius特性，那么在 <html> 标签中就会出现 no-borderradius 类，我们可以做一些fallback的工作：

.no-borradius div{

    /*-- do some hacks here --*/

}

Browser Feature Test

检测浏览器是否支持某项特性，我们可以用这种语法：

Modernizr.featuretodetect

Modernizr对象是类库创建的全局变量，我们可以在页面的任意位置使用。比如我们需要检测浏览器是否支持WebGL，可以这么做：

if(Modernizr.webgl){

    /* support WebGL */

}

else{

    /* not support WebGL */

}

Modernizr.load()

基于 YepNope.js ，Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript，这无疑对避免不必要的资源加载有极大的帮助。

你可以在这里( HTML5 Cross Browser Polyfills )找到几乎所有新特性的fallback解决方案。

Modernizr.load(

    test: Modernizr.webgl,

    yep : 'three.js',

    nope: 'jebgl.js'

);

当浏览器支持WebGL的时候，就引入 three.js 这个类库做一些3D效果。浏览器不支持WebGL的时候可以使用 jebgl.js 做一些fallback操作。

还有一个比较酷的例子来自官方文档。我们在用jQuery类库的时候，通常都是这种写法：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>

现在用Modernizr.load()可以这么写：

Modernizr.load([

  {

    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',

    complete: function () {

      if ( !window.jQuery ) {

            Modernizr.load('js/libs/jquery-1.7.1.min.js');

      }

    }

  },

  {

    // This will wait for the fallback to load and

    // execute if it needs to.

    load: 'needs-jQuery.js'

  }

]);

Summary

Modernizr为我们做了最复杂的一步，我们只需要像模块一样将代码组装起来。当然，Modernizr还有一些其他的用法，比如Modernizr.mq()方法用来检测media query，这对Responsive Design可以帮上很多忙。诸如这些API在官方文档中都有涉及，建议在使用的时候仔细了解一下即可。

Modernizr.js介绍与使用的更多相关文章

  1. HTML5系列四（特征检测、Modernizr&period;js的相关介绍）

    Modernizr:一个HTML5特征检测库 Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作 Modernizr是自动运行的,无须调用诸 ...

  2. modernizr&period;js的介绍和使用

    原文链接:https://www.cnblogs.com/-simon/p/5907053.html Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分 ...

  3. Modernizr的介绍和使用

    传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Moderniz ...

  4. Modernizr&period;js入门指南&lpar;HTML5&amp&semi;CSS3浏览器兼容插件&rpar;

    HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...

  5. Modernizr&period;js&colon;为HTML5和CSS3而生！

    原文链接:http://caibaojian.com/modernizr-js.html modernizr这个JS,在国外的主题里面很多地方都看到,就只记得是为html补充的,有点类似与respon ...

  6. &lbrack;转&rsqb;Modernizr的介绍和使用

    转载自:http://blog.chinaunix.net/uid-21633169-id-4286857.html 传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入 ...

  7. 前端的瑞士军刀：Modernizr&period;js

    前言 Modernizr.js既能给老版本浏览器打补丁,又能保证新浏览器渐进增强的用户体验. 作用: 从实际操作来看,Modernizr默认做的事情很少,除了(在你选择的情况下)给不支持html5的标 ...

  8. Vue&period;js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  9. js介绍

    ---恢复内容开始--- js介绍 最近学习了js,那么我今天给大家介绍下js.希望对初学者有些帮助. js就是常说的JavaScript.JavaScript是目前世界上最流行的编程语言之一.这门语 ...

随机推荐

  1. 四则运算项目git统计

    GitHub统计 1.Git文档目录 图 1文档结构预览 2.Git提交进度图 图 2 9月12日-10月3日 图 3 10月3日-10月14日 图 4 10月14日-10月21日 图 5 10月21 ...

  2. iterm快捷键及操作技巧（附Linux快捷键）

    标签操作 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 command + 左右方向键 切换全屏:command + enter 查找:com ...

  3. HTML标签CSS属性默认值汇总

    HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...

  4. Notes over compiling&period;&period;

    When compiling VIM on windows, using nmake may be a better choice.. Because so far my attempts to co ...

  5. 什么是体数据可视化&lpar;Volume data visualization&rpar;？及体绘制的各种算法和技术的特点？

    该文对体数据进行综述,并介绍了体数据的各种算法和技术的特点. 前言 由于3D数据采集领域的高速发展,以及在具有交互式帧率的现代化工作站上执行高级可视化的可能性,体数据的重要性将继续迅速增长. 数据集可 ...

  6. 冰精冻西瓜&lbrack;P3787洛谷&rsqb;

    题目描述 琪露诺是拥有操纵冷气程度的能力的妖精,一天她发现了一片西瓜地.这里有n个西瓜,由n-1条西瓜蔓连接,形成一个有根树,琪露诺想要把它们冷冻起来慢慢吃. 这些西瓜蔓具有神奇的性质,可以将经过它的 ...

  7. 微信H5页面 会被软键盘顶起来

    问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去:关闭软键盘时,页面不会自动下来(恢复初始状态) H5页面在微信中初始状态如下图: input输入框获取焦点时,页面被软键 ...

  8. ng-深度学习-课程笔记-7&colon; 优化算法&lpar;Week2&rpar;

    1 Mini-batch梯度下降 在做梯度下降的时候,不选取训练集的所有样本计算损失函数,而是切分成很多个相等的部分,每个部分称为一个mini-batch,我们对一个mini-batch的数据计算代价 ...

  9. oracle job定时执行存储过程

     JOB定时跑插入语句1.建插入数据的存储过程create or replace procedure report_web asV_START_DATE DATE;V_END_DATE  DATE;b ...

  10. ThinkPHP开发笔记-模型

    1.模型定义.在ThinkPHP中,可以无需进行任何模型定义.只有在需要封装单独的业务逻辑的时候,模型类才是必须被定义的,因此ThinkPHP在模型上有很多的灵活和方便性,让你无需因为表太多而烦恼. ...

相关文章