Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果。
但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 不够现代的浏览器 诞生之时,HTML5和CSS3尚未被正式推出。
于是,我们的问题来了:针对那些不支持新特性的浏览器而言,我们是直接放弃这些用户群呢,还是直接不用这些新特性,老老实实的用图片拼出圆角的特效?
我想,答案是显而易见的。我们不能放弃那些因为这样那样的原因没法升级他们的浏览器用户,但也不能委屈了自己,不能用这些很酷的技术来写代码。
在jQuery 1.9发布之前,jQuery内置了一个 jQuery.browser 函数来检测浏览器的版本,它根据user agent来返回浏览器的相关信息。我们可以根据结果得到用户浏览器版本,这样就像打一些补丁一样针对这些老的浏览器做一些fallback的工作。
可是jQuery 1.9发布的时候取消了这一API(当然你可以使用 jQuery.migrate 插件),官方文档中解释为我们应该用检测feature的方案( jQuery.support )来判断我们需不需要fallback,毕竟user agent伪造太容易了。比如 Chrome Mobile 版本则会加入Safari的user agent,这也是为什么移动浏览器市场Safari雄踞第一的真正原因之一。
本文向你介绍 Modernizr.js 这个类库,可以说它干的事情目的与jQuery.support并无二致,但是功能和成熟程度在整个领域都是首屈一指的。
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在官方文档中都有涉及,建议在使用的时候仔细了解一下即可。
Modernizr无疑是成功的,在主页下方,它明确的标识它的著名用户:
当我们在Visual Studio中创建Web应用程序的时候,默认模板中便引入了Modernizr.js类库。
自从有了Modernizr.js,开发人员可以开心的编码了,哪怕我们嘴上还是会喋喋不休的诅咒那些“不够友好”的浏览器。
但是,谁又真正在乎呢。
http://www.tuicool.com/articles/UVnEVj
Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)的更多相关文章
- d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
- 《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件(轨道控制)实现模型控制
3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制) 说明 本节内容属于插入节,<Three.js入门指南>这本书中,只是简单的介绍了一些概念,是一本基础的入 ...
- 《Three.js 入门指南》3.0 - 代码构建的最基本结构。
3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...
- 《Three.js 入门指南》0 - 说明
本笔记,摘自:<Three.js 入门指南>一书 地址链接为:https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录: 本书结构 ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- App开发Native.js入门指南
概述 Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展 ...
- Vue.js 入门指南
1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...
- JS中常遇到的浏览器兼容问题和解决方法
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...
随机推荐
- ntelliJ IDEA 14 注册码
user or company nameo license key63625-MQ87K-3SRZ2-8MQYB-6NQZC-2Z8K6
- lua 的 WriteFile 和 ReadFile
lua 的 ReadFile 和 WriteFile 注意: lua 代码中的 string 可以包含二进制数据 string.len(str) 不会被 '\0' 截断 从 lua 传入 c 时: 需 ...
- fastdfs-client-java工具类封装
FastDFS是通过StorageClient来执行上传操作的 通过看源码我们知道,FastDFS有两个StorageClient工具类.
- Android UI 之 Tab类型界面总结
Android 程序中实现Tab类型界面很常见,本人在做项目的时候也经常用到,所以想在这里总结一下,实现tab类型界面的几种方式,供大家参考.如有不对之处,欢迎大家指正! 一.TabActivity ...
- CactiEZ命令行添加主机监控参考
1.添加主机 php -q add_device.php --description= --community="public" 查询主机模板: php -q add_device ...
- Socket网络通讯开发总结之:Java 与 C进行Socket通讯 + [备忘] Java和C之间的通讯
Socket网络通讯开发总结之:Java 与 C进行Socket通讯 http://blog.sina.com.cn/s/blog_55934df80100i55l.html (2010-04-08 ...
- code manager tools svn服务安装配置
svn server 安装配置: 下载地址:http://www.visualsvn.com/server/download/ 然后安装图一步一步前进: 1.点击download now: 2.点击N ...
- 怎样用delphi关闭并重新启动 explorer.exe进程
uses Tlhelp32; function KillTask(ExeFileName:string):integer; const PROCESS_TERMINATE = $0001; var C ...
- flex 4 写皮肤
皮肤容器:s:SparkSkin 主机组件: [HostComponent("spark.components.Panel")] 绘制: <s:Group left=&qu ...
- [2014-03-13 08:46:42 - Dex Loader] Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.
Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace. 问题提示 ...