Modernizr & YepNope Tips

最新推荐文章于 2024-08-10 07:10:35 发布

whqet

最新推荐文章于 2024-08-10 07:10:35 发布

阅读量3.9k

点赞数 2

css3 同时被 3 个专栏收录

81 篇文章 3 订阅

订阅专栏

学习笔记

66 篇文章 1 订阅

订阅专栏

技术总结

59 篇文章 0 订阅

订阅专栏

本文由前端开发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 关注网页前端技术，分享网页相关资源。

-----------------------------------------------------------------------------------------------------------------------------------

whqet

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Modernizr & YepNope Tips

本文由前端开发whqet翻译自WDL，Rochester Oliveira2013年5月2日写的文章Modernizr & YepNope Tips。每天都有新的更好的浏览器版本产生，
复制链接

扫一扫

专栏目录