本文由前端开发whqet翻译自WDL,Rochester Oliveira2013年5月2日写的文章Modernizr & YepNope Tips。
每天都有新的更好的浏览器版本产生,现代浏览器(如firefox和chrome)已经达到了第二十个版本有一段时间了,增加了很多很棒的功能。另一方面,开发者必须保证产品能够良好兼容较老的浏览器(ie6这种老古董不能算在内),很多付费用户仍然在使用IE8或者IE7,一些较慢的设备甚至不能运行高负荷的JS和HTML5。
应该如何避免破坏网站,很多人会简单剥离出新的技术,但是我确信应该惠及及时更新的用户,给他们更好的用户体验,如果你想做类似的工作,你应该好好试试Modernizr和YepNope。
啥是Modernizr
它是一个很棒的JS类库,可以通过检测浏览器特征实现渐进增强,你可以通过CSS或者JS判断处理。当然,第一步你得下载、安装它,下面演示如何安装。
<!DOCTYPE HTML>
<HTML lang=”en”>
<HEAD>
<SCRIPT src=”modernizr.js”></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
如何Modernizr您的网站
使用方法非常简单,你可以通过JS测试某种功能(例如html音频)是否可用,如果可用加载你需要的内容,如果不可用,则使用替代的方案(通常是槽糕选项)。
这里有段示例代码。
if(Modernizr.audio){
alert(“HTML5 Audio enabled”);
}else{
alert(“HTML5 Audio NOT enabled”);
}
你也可以测试某个CSS属性以免破坏网站。例如,网站某个效果利用borderimage实现,你可以条件性的加载它,否则调用替代的css或者js效果。
if(Modernizr.borderimage){
alert(“Border-image support”);
}else{
alert(“Border-image not supported”);
}
可以将CSS3和HTM|L5的检测结果附加在html标签上,防止丑陋的hack和大量不可靠的代码,更好的兼容未来的浏览器。html标签生成的class如下一段代码所示。
<!DOCTYPE HTML>
<HTML lang=”en” class="boxshadow opacity borderimage">
<HEAD>
<SCRIPT src=”modernizr.js”></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
这样你就可以在你的CSS文件中使用这些优雅的class了。
.no-borderimage{
border: 0px;
}
Modernizr还提供了一个可以检测的特征列表。
好吧,这个时候你可能要问,他可以检测缺乏某个特征,可不可以提供一个替代的方案?我能感受你的痛苦,这个也是我们使用另一个类库Polyfills的原因,他可以在不支持的浏览器里创建html5功能。但是但是,这样可能会加载的比较慢,我们可以使用另一个工具,YepNope。
YepNope-Modernizr的现代版本
Yepnope是一个异步的条件资源加载器,允许用户仅仅记载需要的脚本,速度超快。你可以在项目页面实现自定义下载。
它语法简单,更重要的是实现了与Modernizr的兼容,下面的代码展示了基础语法。
Yepnope({
test: /* 判断条件,返回true or false */,
yep: /* 返回true时执行的脚本 */,
nope: /* 返回false时执行的脚本 */,
both: /* 无论如何都会执行的脚本*/,
load: /* 每次都会加载的脚本*/,
callback:/* 加载完成之后,做什么 */,
complete: /* 全部加载完成后,加载什么 */,
});
来看一个html5特征检测的案例,可以方便的检测某个特征的支持情况,判断不同的反应。省却了大量的if else语句。
yepnope({
test: Modernizr.audio,
yep: ‘audio.js’
nope: ‘audio-polyfill.js’
});
再来看一个很cool的案例,
yepnope({
test: Modernizr.video,
yep: ‘video.css’,
nope: [‘video-html5.css’,’video-polyfill.js’],
callback: function(url, result, key){
if(url == ‘video- html5.css’){
alert(“HTML5 Video Ready”);
}
)};
判断是否支持html5 video,如果支持加载video.css,否则加载video-html5.css和video-polyfill.js两个文件,加载完成后执行callback里面的代码。
总结
特征检测是一个向用户提供更好用户体验的途径,在需要时使用本地方法,可以保证每次顺利执行。
-----------------------------------------------------------------------------------------------------------------------------------
完工!前端开发 whqet 关注网页前端技术,分享网页相关资源。
-----------------------------------------------------------------------------------------------------------------------------------