modernizr.js的介绍和使用
原文链接:https://www.cnblogs.com/-simon/p/5907053.html
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版本。其实它们都会导向同一个下载页面,只不过前者会帮我们把选项预先勾上而已。
通常我们需要检测的新特性基本都囊括在了这些选项中,我们可以根据自己需要,定制化的选择需要检测的feature。
下载完后我们就可以在 <head>
中引用这个类库。由于Modernizr帮我们内置了 html5shiv 类库,所以我们必须在 <body>
加载之前引用这个类库。当然你如果针对的是IE9+的浏览器,那么大可以在页面元素加载完后再引入,但这样就会有 FOUC 这样极不友好的效果出现。
最后,我们需要在 <html>
标签中加入 no-js
类,以免浏览器禁用了JavaScript。
Working With Classes
使用了Modernizr后,页面中渲染后的html代码是这个样子的:
其中有很多以no作为前缀的class,当然大部分都没有这个前缀。事实上,如果一个类名以no作为前缀,比如 no-touch
这表示浏览器不支持touch特性,这也是最新版本的Chrome不支持的两个feature之一:
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在官方文档中都有涉及,建议在使用的时候仔细了解一下即可。
转载于:https://www.cnblogs.com/zr123/p/8743506.html
modernizr.js的介绍和使用相关推荐
- Modernizr.js的介绍及使用
直接贴链接啦,看了好几篇讲这个的,这篇讲得相对好一些 前端的瑞士军刀:Modernizr.js
- HTML5系列四(特征检测、Modernizr.js的相关介绍)
Modernizr:一个HTML5特征检测库 Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作 Modernizr是自动运行的,无须调用诸 ...
- html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
- 使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 详情请看主页:modernizr主页 1. modernizr 是什么? modernize 是一个js库----一个用于检测当 ...
- modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 1.modernizr 是什么? modernize 是一个js库----一个用于检测当前浏览器对html5&css3 ...
- pythondevp2p_以太坊GO、JAVA、PYTHON、RUBY、JS客户端介绍
原标题:以太坊GO.JAVA.PYTHON.RUBY.JS客户端介绍 区块链兄弟社区,区块链技术专业问答先行者,中国区块链技术爱好者聚集地 作者:佚名 来源:CSDN 原文链接:http://blog ...
- 八款Js框架介绍及比较~转载
Js框架介绍 目前来看,JS框架以及一些开发包和库类有如下几个,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools . ...
- (23)Vue.js组件介绍
一.Vue.js组件介绍 组件用于封装页面的部分功能,将功能的结构.样式.逻辑代码封装为整体.提高功能的复用性与可维护性,更好的专注于业务逻辑. 二.Vue.js组件使用 组件使用时为自定义 HTML ...
- (8)Node.js 模块介绍
一.Node.js模块介绍 模块(包)是 Node.js 中具有特定功能的对象. 二.web浏览器端和Node端的对比图 我们通过如上图可以看到,再web浏览器端的基本语法,再Node端也能使用,但是 ...
最新文章
- 百篇大计敬本年之C++坎坷之路 —— Warning:will be initialized after [-Wreorder]
- Matlab概率统计编程指南
- jms message组成和jsm selector详解(二)
- poj 3348 Cows 求凸包以及凸包的面积
- [AtCoder-ARC073F]Many Moves
- CSS3账号密码输入框动画模板
- [转]JavaScript 删除数组中指定值的元素
- Springboot 整合 Netty 实战(附源码)
- 构造函数与析构函数的重载及浅拷贝和深拷贝
- linux数组操作 增删改查,JS实现数组的增删改查操作示例
- 黑盒测试的常见测试方法
- Apache CXF WebService 框架
- 与计算机相关活动主题,计算机文化节活动策划书
- 共享汽车违章难处理 车企用定位模块来解决
- Android 九宫格物理键盘数字英文切换
- 极米投影、坚果投影、当贝投影,三大品牌对比来了
- 京东零售数据仓库演进之路
- Program week9 work
- JDK自带JVM工具
- 什么是稀疏数组?稀疏数组详解
热门文章
- 计算机一级ie浏览器和电子邮件,2016年职称计算机考试Internet基础知识:利用IE收发电子邮件...
- java发送get post请求_【工具】java发送GET、POST请求
- 爬虫多线程生产者与消费者
- java面试题十五 for循环一个题目
- python新手如何度过小白期,不再当菜鸟程序员?
- linux 不同ip 相同mac arp,linux – nmap和arp-scan不一致的IP-MAC结果
- northwind中文 for mysql_学习心得 | PHP与mysql通信的若干问题
- 什么是野指针和内存泄露?如何避免野指针
- ES2017 异步函数async/await
- 服务端大量CLOSE_WAIT问题的解决