使用Modernizr探测HTML5/CSS3新特性的示例代码分享

HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是：在我们使用HTML5/CSS3技术的时候，如何更好地处理不支持HTML5/CSS3特性的旧版本浏览器问题。

<script>
    window.onload =  () {
 (canvasSupported()) {
            alert('canvas supported');
        }
    };

 canvasSupported() {
 canvas = document.createElement('canvas');
 (canvas.getContext && canvas.getContext('2d'));
    }
</script> 

<script>
    window.onload =  () {
 (localStorageSupported()) {
            alert('local storage supported');
        }
    };

 localStorageSupported() {
 {
 ('localStorage'  window && window['localStorage'] != );
        }
(e) {}
 ;
    }
</script> 

$(document).ready( () {
 (Modernizr.canvas) {
    }

 (Modernizr.localstorage) {
    }
}); 

$(document).ready( () {
 (Modernizr.borderradius) {
        $('#Myp').addClass('borderRadiusStyle');
    }

 (Modernizr.csstransforms) {
        $('#Myp').addClass('transformsStyle');
    }
}); 

Modernizr.load({
    test: Modernizr.canvas,
    yep:  'html5CanvasAvailable.js’,
    nope: 'excanvas.js’, 
    both: 'myCustomScript.js' 
}); 

Modernizr.load([
    {
        load: '//ajax.googleapis测试数据/ajax/libs/jquery/1.6.4/jquery.js',
        complete:  () {
 (!window.jQuery) {
                Modernizr.load('js/libs/jquery-1.6.4.min.js');
            }
        }
    },
    {
                load: 'needs-jQuery.js'
    }
]); 

该代码会首先从Google CDN加载jQuery文件，如果下载或加载失败，complete函数就会执行，首先判断jQeury对象是否存在，如果不存在，Modernizr就会加载定义好的本机js文件，如果连 complete里的文件都加载不成功，就会加载needs-jQuery.js文件。
总结：

如果你正在使用最新的HTML5/CSS3来构建你的程序，Modernizr绝对是一个必需的工具。使用它你可以节约很多代码以及测试工作量，甚至可以对一些不支持新特性的浏览器通过额外加载脚本的形式来实现相应的新特性。

以上就是使用Modernizr探测HTML5/CSS3新特性的示例代码分享的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于使用Modernizr探测HTML5/CSS3新特性的示例代码分享的详细内容...