Modernizr.js 介绍
2017-03-20 22:36
239 查看
Setting-Up Modernizr
Working With Classes
Browser Feature Test
Modernizrload
Summary
As of Modernizr 1.5,this script is identical to what is used in the popular html5shim/html5shiv library.
modernizr.js 是和 HTML5Shiv 差不多的,貌似比 HTML5Shiv 好一些,也不知道是不是真的。
html5shiv 主要是针对IE,Modernizr是支持全系列
html5shiv 主要是为IE添加 HTML5 标签支持,而 Modernizr 则是检测浏览器对 HTML5/CSS3 的支持情况,并将结果添加到 html 的 css 中。
官网http://modernizr.com/download/默认是把 html5shiv 勾选的,如果没勾选,下载的版本就没有 html5shiv。
在 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。
其实,这个类库使用非常简单,简单到你把 官方文档 从头到尾看一遍就完全了解它的使用方法了。接下来,我做一点简单的介绍。
通常我们需要检测的新特性基本都囊括在了这些选项中,我们可以根据自己需要,定制化的选择需要检测的 feature。
下载完后我们可以在
最后,我们需要在
其中有很多以 no 作为前缀的 class,当然大部分都没有这个前缀。事实上,如果一个类名以 no 作为前缀,比如 no-touch 这表示浏览器不支持 touch 特性。
Chromw 目前是对 HTML5 和 CSS3 新特性支持最好的浏览器,没有之一。
当我们引入了 Modernizr.js 类库后,
Modernizr 对象是类库创建的全局变量,我们可以在页面的任意位置使用。比如我们需要检测浏览器是否支持 WebGL,可以这么做:
你可以在这里(HTML5 Cross Browser Polyfills)找到几乎所有新特性的 fallback 的解决方案。
当浏览器支持 WebGL 的是否,就引入 three.js 这个类库做一些 3D 效果。浏览器不支持 WebGL 的时候可以使用 jebgl.js 做一些 fallback 操作。
还有一个比较酷的例子来自官方文档。我们在用 jQuery 类库的时候,通常都是这种写法:
现在用 Modernizr.load() 可以这么写:
Working With Classes
Browser Feature Test
Modernizrload
Summary
As of Modernizr 1.5,this script is identical to what is used in the popular html5shim/html5shiv library.
modernizr.js 是和 HTML5Shiv 差不多的,貌似比 HTML5Shiv 好一些,也不知道是不是真的。
html5shiv 主要是针对IE,Modernizr是支持全系列
html5shiv 主要是为IE添加 HTML5 标签支持,而 Modernizr 则是检测浏览器对 HTML5/CSS3 的支持情况,并将结果添加到 html 的 css 中。
官网http://modernizr.com/download/默认是把 html5shiv 勾选的,如果没勾选,下载的版本就没有 html5shiv。
在 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。
其实,这个类库使用非常简单,简单到你把 官方文档 从头到尾看一遍就完全了解它的使用方法了。接下来,我做一点简单的介绍。
Setting-Up Modernizr
在官方网站(http://modernizr.com) 上我们可以看到有两个下载选项,Add your detects 和 Development build 版本。其实它们都会导向同一个下载页面,只不过后者会帮我们把选项预先勾上而已。通常我们需要检测的新特性基本都囊括在了这些选项中,我们可以根据自己需要,定制化的选择需要检测的 feature。
下载完后我们可以在
<head>中引用这个类库。由于 Modernizr 帮我们内置了 html5shiv 类库,所以我们必须在
<body>加载之前引用这个类库。当然你如果针对的是 IE9+ 的浏览器,那么大可以在页面元素加载完后再引入,但这样就会有 FOUC 这样极不友好的效果出现。
最后,我们需要在
<html>标签中加入 no-js 类,以免浏览器仅用了 JavaScript。
Working With Classes
使用了 Modernizr 后,页面中渲染后的 html 代码是这个样子的:其中有很多以 no 作为前缀的 class,当然大部分都没有这个前缀。事实上,如果一个类名以 no 作为前缀,比如 no-touch 这表示浏览器不支持 touch 特性。
Chromw 目前是对 HTML5 和 CSS3 新特性支持最好的浏览器,没有之一。
当我们引入了 Modernizr.js 类库后,
<html>标签的 class 属性就会被相应的赋值,以显示浏览器是否支持某类 CSS 属性。比如在 IE6 下面,不支持 borderradius 特性,那么在
<html>标签中就会出现 no-borderradius 类,我们可以做一些 fallback 的工作:
.no-borderradius 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.9.2/jquery.s"></script> <script>widnow.jQuery || document.write('<script src="js/libs/jquery-1.9.2.min.js"></script>')</script>
现在用 Modernizr.load() 可以这么写:
{ load: '//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.js', complete: function() { if(!window.jQuery){ Modernizr.load('js/libs/jquery-1.9.2.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的介绍和使用
- Modernizr.js介绍与使用
- HTML5系列四(特征检测、Modernizr.js的相关介绍)
- Modernizr.js介绍与使用
- js类似新闻图片轮换(带有文字介绍,其实可以放任何内容)
- wordpress之js库集合研究介绍
- prototype.js开发笔记(针对Ajax的JS框架Prototype的使用介绍)
- javascript(js) join函数使用方法介绍
- Prototype.js介绍及扩展(待续)
- CSS教程(八) 简单介绍CSS结合JS的运用
- 简单介绍CSS结合JS的运用
- JsJava1.0中Javascript类库介绍
- js 中的元素和事件介绍
- CSS教程(八) 简单介绍CSS结合JS的运用
- js类似新闻图片轮换(带有文字介绍,其实可以放任何内容)
- 八款Js框架介绍及比较
- js入门·对象的综合练习(重点介绍Link对象)
- Prototype.js介绍及扩展(待续)
- Jquery提交表单 Form.js官方插件介绍
- Jquery提交表单 Form.js官方插件介绍