Modernizr

目录

概述

随着HTML5和CSS3加入越来越多的模块，检查各种浏览器是否支持这些模块，成了一大难题。Modernizr就是用来解决这个问题的一个JavaScript库。

首先，从modernizr.com下载这个库。下载的时候，可以选择所需要的模块。然后，将它插入HTML页面的头部，放在head标签之中。

<!DOCTYPE html>

<html class="no-js" lang="en">

<head>

  <meta charset="utf-8">

  <script src="js/modernizr.js"></script>

</head>

</html>

CSS的新增class

使用Modernizr以后，首先会把html元素的class替换掉。以chrome浏览器为例，新增的class大概是下面的样子。

<html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg blobbuilder blob bloburls download formdata">

IE 7则是这样：

<html class="js no-touch postmessage no-history no-multiplebgs no-boxshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-csstransforms no-csstransitions fontface localstorage sessionstorage no-svg no-inlinesvg wf-loading no-blobbuilder no-blob no-bloburls no-download no-formdata">

然后，就可以针对不同的CSS class，指定不同的样式。

.button {

   background: #000;

   opacity: 0.75;

}

.no-opacity .button {

   background: #444;

}

JavaScript侦测

除了提供新增的CSS class，Modernizr还提供JavaScript方法，用来侦测浏览器是否支持某个功能。

Modernizr.cssgradients; //True in Chrome, False in IE7

Modernizr.fontface; //True in Chrome, True in IE7

Modernizr.geolocation; //True in Chrome, False in IE7

if (Modernizr.canvas){

    // 支持canvas

} else {

   // 不支持canvas

}

if (Modernizr.touch){

    // 支持触摸屏

} else {

   // 不支持触摸屏

}

加载器

Modernizr允许根据Javascript侦测的不同结果，加载不同的脚本文件。

Modernizr.load({

  test :        Modernizr.localstorage,

  yep  :        'localStorage.js',

  nope :        'alt-storageSystem.js',

  complete :    function () { enableStorgeSaveUI();}

});

Modernizr.load方法用来加载脚本。它的属性如下：

  • test：用来测试浏览器是否支持某个属性。
  • yep：如果浏览器支持该属性，加载的脚本。
  • nope：如果浏览器不支持该属性，加载的脚本。
  • complete：加载完成后，运行的JavaScript代码。

可以指定在支持某个功能的情况，所要加载的JavaScript脚本和CSS样式。

Modernizr.load({

  test : Modernizr.touch,

  yep :  ['js/touch.js', 'css/touchStyles.css']

});

参考链接

Modernizr的更多相关文章

  1. 关于使用 no-js (Modernizr)

    最近有些朋友问到:为什么我的网页 code 有 class="no-js" ? <!DOCTYPE html> <html dir="ltr" ...

  2. Modernizr.js:为HTML5和CSS3而生！

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

  3. HTML5系列四（特征检测、Modernizr.js的相关介绍）

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

  4. 使用Modernizr探测HTML5/CSS3新特性（转载）

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

  5. [转]Modernizr的介绍和使用

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

  6. Modernizr的介绍和使用

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

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

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

  8. 使用Modernizr探测HTML5/CSS3新特性

    [转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和Jav ...

  9. modernizr.js

    1.判断浏览器是否支持 h5 if(Modernizr.canvas){ alert(123); }else{ alert(321); } 2.判断浏览器是否支持 canvas function su ...

  10. Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)

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

随机推荐

  1. Cocos2d-x 3.2 Lua演示样本CocosDenshionTest（音频测试）

    Cocos2d-x 3.2 Lua演示样本CocosDenshionTest(音频测试)  本篇博客介绍Cocos2d-x 3.2中Lua演示样例的音频測试.Cocos2d-x使用SimpleAudi ...

  2. Hadoop Hive sql 语法详细解释

    Hive 是基于Hadoop 构建的一套数据仓库分析系统.它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,能够将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 ...

  3. 有意练习--Rails RESTful（一）

    书要反复提及<哪里有天才>在说,大多数所谓的天才是通过反复刻意练习获得. 当你的练习时间达到10000几个小时后,.你将成为该领域的专家. 近期在学习rails怎样实现RESTful We ...

  4. MemberwishClone学习

    /* * Created by SharpDevelop. * User: My little flower basket * Date: 2013/7/12 * Time: 9:37 * * To ...

  5. cocos2dx 使得单麻将(三)

    cocos2dx 使得单麻将(三) 麻将逻辑4.得到手牌数据 我们已经保存了一个一维数组, 类似于一个表格,统计出全部牌相应的数量, 但我们如何得到当前手中是什么牌呢 //扑克转换 BYTE Swit ...

  6. mapxtreme C# 完美车辆动态轨迹展示

    演示程序请在 http://pan.baidu.com/s/1jG9gKMM#dir/path=%2F%E4%BA%A7%E5%93%81%2FDemos 找 Trajectory.rar 轨迹回放功 ...

  7. poj 2689 巧妙地运用素数筛选

    称号: 给出一个区间[L,R]求在该区间内的素数最短,最长距离. (R < 2 * 10^9 , R - L <= 10 ^ 6) 由数论知识可得一个数的因子可在开根号内得到. 所以,我们 ...

  8. hibernate Java 时间和日期类型 Hibernate 制图

    基础知识: 于 Java 于, 型表示的时间和日期包含: java.util.Date 和 java.util.Calendar. 外, 在 JDBC API 中还提供了 3 个扩展了 java.ut ...

  9. HDInsight HBase概观

    HDInsight HBase概观 什么是HBase的? HBase它是基于HadoopApache开源NoSQL数据库.它提供了很多非结构化和半结构化数据一致性的随机存取能力的.它是仿照谷歌的Big ...

  10. 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

    本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...