Modernizr & YepNope Tips

桃扇骨 2022-02-19 03:21 170阅读 0赞

本文由前端开发whqet翻译自[WDL][]，Rochester Oliveira2013年5月2日写的文章[Modernizr & YepNope Tips][Modernizr _ YepNope Tips]。

每天都有新的更好的浏览器版本产生，现代浏览器(如firefox和chrome)已经达到了第二十个版本有一段时间了，增加了很多很棒的功能。另一方面，开发者必须保证产品能够良好兼容较老的浏览器(ie6这种老古董不能算在内),很多付费用户仍然在使用IE8或者IE7，一些较慢的设备甚至不能运行高负荷的JS和HTML5。

应该如何避免破坏网站，很多人会简单剥离出新的技术，但是我确信应该惠及及时更新的用户，给他们更好的用户体验，如果你想做类似的工作，你应该好好试试Modernizr和YepNope。

# 啥是[Modernizr][] #

![20130515175743084][]

它是一个很棒的JS类库，可以通过检测浏览器特征实现渐进增强，你可以通过CSS或者JS判断处理。当然，第一步你得[下载][Modernizr]、安装它，下面演示如何安装。

<!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还提供了一个可以检测的特征[列表][Link 1]。

好吧，这个时候你可能要问，他可以检测缺乏某个特征，可不可以提供一个替代的方案？我能感受你的痛苦，这个也是我们使用另一个类库Polyfills的原因，他可以在不支持的浏览器里创建html5功能。但是但是，这样可能会加载的比较慢，我们可以使用另一个工具，YepNope。

# [YepNope][]\-Modernizr的现代版本 #

![20130515212055969][]

Yepnope是一个异步的条件资源加载器，允许用户仅仅记载需要的脚本，速度超快。你可以在[项目][YepNope]页面实现自定义下载。

它语法简单，更重要的是实现了与Modernizr的兼容，下面的代码展示了基础语法。

![20130515213335679][]

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

\-----------------------------------------------------------------------------------------------------------------------------------

[WDL]: http://webdesignledger.com/
[Modernizr _ YepNope Tips]: http://webdesignledger.com/tips/modernizr-yepnope-tips
[Modernizr]: http://modernizr.com/
[20130515175743084]: /images/20220219/e244a94b59b541a1a3aa3ee4ad6f6a42.png
[Link 1]: http://modernizr.com/docs/#s2
[YepNope]: http://yepnopejs.com/
[20130515212055969]: /images/20220219/9d5cd1719e54445898015b2f83e99473.png
[20130515213335679]: /images/20220219/0dc387278b23459b8dd405a11d487c41.png