什么是Modernizr？
　　Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外，Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测，从而实现效率优化。
 
 
下载 Modernizr
与其它 JavaScript 库相同的是，Modernizr 可提供 development 和 production 版本。 与大多数库相比，唯一的不同之处是，空格和注释已经从 production 版本中删除了，这样可以减少下载量的大小。 Modernizr 采取了不同的方法。 development 版本在某种意义上可称为是“厨房中的水槽”—它几乎包含了一切。 production 版本只包含了你选择的那些元素，这样能够显著降低下载量。 在很多情况下，production 版本可以缩小为development版本大小的二十分之一。
 
　　重点：
　　　　<head> 的最后三行应该如下所示：
 
　　　　</style>
　　　　<script src="js/modernizr.js"></script>
　　　　</head>
　　

　　在html标签中添加no-js的class，当支持javascript的浏览器启动时，会动态地删除这个no-js的class。并且会在html标签中添加当前浏览器所支持的元素同名class。
 
　　

如图所示。
　　你可以在浏览器中检查元素时看到html标签中增加的类，而在本地源代码中并无改动。
 　　
　　例如，在页面中的img标签，如若浏览器不支持阴影，则.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }将会发挥作用。也就是说，你可以看到Modernizr使用boxshadow 和 csscolumns 分别表明了对box-shadow 属性和多栏布局的支持。 因此，你可以使用no-boxshadow 和 no-csscolumns 类为不支持这些功能的浏览器创建特殊的样式规则。
　　

　　

一句忠告
 
　　Modernizr 是一个强大而有用的工具，但是这并不意味着你就应该使用它。 并不是在所有情形下均必须使用 Modernizr 给浏览器提供多种样式。 如果你主要关注的对象是 Internet Explorer，那么考虑使用IE conditional comments。 你也可以使用CSS层叠覆盖一些样式。 例如，先使用hexadecimal color，然后使用 rgba() 或 hsla() 覆盖它。 旧版本的浏览器会使用第一个值并且忽略第二个值。
Modernizr 真正地变成现实是当它与 polyfills 和其它 JavaScript 相结合的时候。但是记住，通常很容易创建属于你自己的适合支持功能的测试。例如，下面就是你测试某个浏览器是否支持 required 属性的全部代码（代码位于required_nomodernizr.html 中）：
var elem = document.createElement('input');
if (typeof elem.required != 'boolean'){
　　// required is not supported
}
 
 
 
初学者笔记，更多内容请点击原文：
http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
或者点击堂主的文章：http://www.osmn00.com/translation/221.html
 
笔者新手上路，见谅见谅。
　　

前端初学者——初探Modernizr.js Modernizr.js笔记的更多相关文章

  1. 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  2. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  3. JS全部API笔记

    我相信对于程序猿都有做笔记的习惯. 我初学到现在也做了不少笔记,以前,总是怕写的文章或者好的内容分享出来就怕被直接copy以后更个名就不再是你的. 但通过博客园,学习到不少东西,人家都不怕什么了,我自 ...

  4. 一统江湖的大前端(1)——PPT制作库impress.js

    <一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...

  5. 一统江湖的大前端（2）—— Mock.js + Node.js 如何与后端潇洒分手

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  6. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  7. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  8. Node.JS学习——学习笔记

    Node.JS--学习笔记 2020年02月23日11:52:01 我打算自学NodeJS-通过阅读NodeJS官网来完成. https://nodejs.org/dist/latest-v13.x/ ...

  9. JS SDK 随手笔记

    JS SDK 随手笔记 窗口模块 Frame/Multi Frame 对话框 页面间的通讯 生命周期 窗口层叠 窗口模块 窗口模块是是AppCan移动应用界面最基本的单位.窗口是每个界面布局的基础,他 ...

随机推荐

  1. ABI （应用程序二进制接口）

    http://baike.baidu.com/link?url=ybErtZo0zAB5_P-kKZmT_nd9FdxaAAPqW4jqtwN5Tmu_q8weayOOFOJBrXw1RLbR20sK ...

  2. 神奇的暴力数据结构——ODT

    前言 \(ODT\),即珂朵莉树,又称老司机树(\(Old\ Driver\ Tree\)). 它是一个十分暴力的数据结构,可以用于各种乱搞,也非常的实用. 当然,这全要基于一个基本条件:数据随机. ...

  3. vuejs样式绑定

    第一种:class的对象绑定,class引用的是一个对象,这个对象的属性显示不显示由变量决定 <style> .activated{ color:red; } </style> ...

  4. 引用类型(一)：Object类型

    对象表示方式 1.第一种方式:使用new操作符后跟Object构造函数 var person = new Object();<br/> person.name = 'Nicholas';& ...

  5. linux命令之grep命令

    grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它能使用正 ...

  6. 一、初始Object-C

    一.OC概述 特点: 1没有包得概念 2关键字以@开头 3.拓展名 .m 二.第一个OC类 1,分为2个文件..m和.h文件 2. .m文件用来实现类  .h用来定义声明类 .h文件中得写法 //@i ...

  7. 第46章 DCMI—OV5640摄像头—零死角玩转STM32-F429系列

    第46章     DCMI—OV5640摄像头 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com ...

  8. 4、SpringBoot+Mybatis整合------一对多

    开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/SpringBoot_Mybatis/tree/c00b56dbd51a1e26ab9fd99020 ...

  9. linux服务器安装nginx及使用

    Nginx在个人的使用之后,感觉非常的方便,所以在这里给出自己安装配置方案.它是一款高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.负载均衡是个不错的选择. ...

  10. 第34-3题：LeetCode437. Path Sum III

    题目 二叉树不超过1000个节点,且节点数值范围是 [-1000000,1000000] 的整数. 示例: root = [10,5,-3,3,2,null,11,3,-2,null,1], sum ...