说说Modernizr的几点使用方法

关于Modernizr的中文介绍已经有很多了,可以通过百度或者谷哥搜索一下。也可以去蓝色理想上看一看,这篇相对较全面:Modernizr——为HTML5和CSS3而生 ;
Modernizr除了为HTML5和CSS3提供基础环境判定、语义支持外,还有哪些用途呢?今天一起来学一学。
说说Modernizr的几点使用方法

一、从应用Modernizr开始

这部分在“Modernizr——为HTML5和CSS3而生”一文中有详细的讲解,包括Modernizr运行后HTML元素的变化等,建议新同学可以仔细阅读阅读。
也可以直接至官方网站http://modernizr.com/docs/进一步了解。

二、Modernizr.load的使用

1、载入jquery

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

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

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

1
2
GET http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js 404 (Not Found)
modernizr.custom.js:4Resource interpreted as Image but transferred with MIME type application/x-javascript: "js/libs/jquery-1.7.1.min.js".

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

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

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

yepnopejs的文档说明中,有一节关于ie! Prefix的插件使用介绍。
大多数时候我们在做前端界面兼容的时候,不得不考虑IE不同版本的细节调整,虽然现在高调强调抛弃IE6,但仍有大多数客户端在使用着这个版本。为了能保证界面的一致性,我们通常能看到下列格式的代码:

1
2
3
4
5
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->

这是html中允许的过滤筛选的条件格式语句,通过筛选,我们可以达到针对不同版本的IE进行一些css hacks。这部分内容可以至paulirish.com进一步阅读与学习。
png图透明的解决方案,有很多很多种,这里针对如何通过modernizr引入解决png透明的js代码段,进行一些尝试,具体代码如下:

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

这是个有意思的尝试。

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

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

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

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

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

全文完。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注