首页>网页设计教程>HTML教程

说说Modernizr的几点使用方法

作者：Eve Cole 更新时间：2025-08-23 02:32:01

关于Modernizr的中文介绍已经有很多了，可以通过百度或者谷哥搜索一下。也可以去蓝色理想上看一看，这篇相对较全面:Modernizr-为HTML5和CSS3而生;

Modernizr除了为HTML5和CSS3提供基础环境判定、语义支持外，还有哪些用途呢?今天一起来学一学。

一、从应用Modernizr开始

这部分在Modernizr-为HTML5和CSS3而生一文中有详细的讲解，包括Modernizr运行后HTML元素的变化等，建议新同学可以仔细阅读阅读。

也可以直接至官方网站http://modernizr.com/docs/进一步了解。

二、Modernizr.load的使用

1、载入jquery

先来看看官网上关于载入jquery的方法与代码：

  1. Modernizr.load([{
  2. load:'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
  3. complete:function(){
  4. if(!window.jQuery){
  5. Modernizr.load('js/libs/jquery-1.7.1.min.js');
  6. }
  7. }
  8. }]);

这段代码经实际测试使用发现，如果无法正常访问google提供的cdn时，浏览器会报错，信息为

  1. GEThttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404(NotFound)
  2. modernizr.custom.js:4ResourceinterpretedasImagebuttransferredwithMIMEtypeapplication/x-javascript:js/libs/jquery-1.7.1.min.js.

由反馈的信息可以看出，Modernizr在重新载入本地jQuery时所解析的文件格式存在错误，我不知道是不是都会遇到这样的情况，但这的确影响了使用。在所有中文搜索结果中，没能发现针对这一现象的说明或研究，个人能力有限，所以也没法深究。只是从stackoverflow得到了暂时的解决方法，代码如下：

  1. <scripttype=text/javascript>//<![CDATA[
  2. Modernizr.load([{
  3. load:'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
  4. complete:function(){
  5. if(!window.jQuery){
  6. Modernizr.load([{
  7. load:'js/jquery.min.js',
  8. callback:function(url,result,key){
  9. //console.log('jqueryonlocalwasloaded!');
  10. init();
  11. }
  12. }]);
  13. }else{
  14. //console.log('jqueryongooglewasloaded!');
  15. init();
  16. }
  17. }
  18. }]);
  19. functioninit(){
  20. jQuery(document).ready(function(){
  21. $('body').prepend('helloworld!');
  22. });
  23. }
  24. //]]></script>

2、针对低版本IE截入PNG图支持

在yepnopejs的文档说明中，有一节关于ie! Prefix的插件使用介绍。

大多数时候我们在做前端界面兼容的时候，不得不考虑IE不同版本的细节调整，虽然现在高调强调抛弃IE6，但仍有大多数客户端在使用着这个版本。为了能保证界面的一致性，我们通常能看到下列格式的代码：

  1. <!--[ifltIE7]><htmlclass=ie6><![endif]-->
  2. <!--[ifIE7]><htmlclass=ie7><![endif]-->
  3. <!--[ifIE8]><htmlclass=ie8><![endif]-->
  4. <!--[ifIE9]><htmlclass=ie9><![endif]-->
  5. <!--[if(gtIE9)|!(IE)]><!--><!--<![endif]-->

这是html中允许的过滤筛选的条件格式语句，通过筛选，我们可以达到针对不同版本的IE进行一些css hacks。这部分内容可以至paulirish.com进一步阅读与学习。

png图透明的解决方案，有很多很多种，这里针对如何通过modernizr引入解决png透明的js代码段，进行一些尝试，具体代码如下：

  1. <scripttype=text/javascript>//<![CDATA[
  2. Modernizr.load([
  3. {
  4. load:'js/yepnope.ie_prefix.js',//载入yepnope的ie!prefix的插件
  5. complete:function(){
  6. yepnope([{
  7. load:'ielt8!js/ie_png.js',//插件正常载入后才能进行筛选(针对低于IE8版本载入ie_png.js)
  8. complete:function(){
  9. ie_png.fix('img');
  10. }
  11. }]);
  12. }
  13. }
  14. ]);
  15. //]]></script>

这是个有意思的尝试。

3、判断浏览器对css3或html5的支持

这部分是modernizr的基本特性，利用这些基本特性，我们不仅可以进行css3或html5的新功能尝试，而且可以保证在不支持的环境下给出友好的提示。看看以下代码：

  1. <scripttype=text/javascript>//<![CDATA[
  3. Modernizr.load({
  4. test:Modernizr.csstransforms3d&#038;&Modernizr.csstransitions,//判断当前客户端是否支持3维变型和渐变过渡
  5. yep:['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],//如若支持，载入相关js
  6. nope:'css/fallback.css',//否则载入用于友情提醒的相关样式
  7. callback:function(url,result,key){//回调内容
  9. if(url==='js/jquery.hoverfold.js'){//如果最后载入的js文件路径一致，则应用
  10. $('#grid').hoverfold();
  11. }
  13. }
  14. });
  16. //]]></script>

这段代码截自《3D Thumbnail Hover Effects》中演示文档里的一段。通过分析和体验作者制作的教程，我们不仅可以学习到一些关于modernizr的使用，而且还能体验到css3的一些强大而又炫丽的效果。

以上内容整理得还很粗糙，用意是想以此来学习和了解Modernizr(YepNope)的特性和使用方法，同时也要增强对css3和html5的学习与重视。

全文完。

相关文章