Modernizr YepNope Tips

article/2025/10/8 23:13:25

本文由前端开发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里面的代码。