首先我们可以使用这个js库来检测浏览器支持不支持html5的一些功能：
[url]http://modernizr.com/download/[/url]
它会在html标签的class中加入标记，然后就可以使用例如：
如果支持.boxshadow那么上面的box就会被覆盖了
当浏览器不支持html5的时候，例如下面的localstorage，那么我们可以使用polyfill来实现本地存储。
git的库文件地址：
[color=red]https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills[/color]
下面我们引入js库文件：
库文件代码，首先会判断浏览器是否支持localstorage如果不支持的话，那么它就会自己创建一个Storage对象。
现在存在一个问题，如果我们使用的是chrome这样的支持本地存储功能的浏览器，那么我们还是需要引入这个文件，这将会是资源的浪费，我们可以使用下面的方法：
如果不支持的话(nope)浏览器将会引入localstorage.js
完整代码：
[url]http://modernizr.com/download/[/url]
它会在html标签的class中加入标记，然后就可以使用例如：
/* Simulated box shadow using borders: */
.box {
border-bottom: 1px solid #666;
border-right: 1px solid #777;
}
.boxshadow div.box {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
box-shadow: #666 1px 1px 1px;
}如果支持.boxshadow那么上面的box就会被覆盖了
当浏览器不支持html5的时候，例如下面的localstorage，那么我们可以使用polyfill来实现本地存储。
git的库文件地址：
[color=red]https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills[/color]
下面我们引入js库文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8">
<title>Modernizr</title>
</head>
<body>
<script type="text/javascript" src="localstorage.js"></script>
<script type="text/javascript">
localstorage.setItem('key', 'value');
</script>
</body>
</html>库文件代码，首先会判断浏览器是否支持localstorage如果不支持的话，那么它就会自己创建一个Storage对象。
现在存在一个问题，如果我们使用的是chrome这样的支持本地存储功能的浏览器，那么我们还是需要引入这个文件，这将会是资源的浪费，我们可以使用下面的方法：
<script type="text/javascript">
Modernizr.load({
test: Modernizr.localstorage,
nope: 'localstorage.js'
})
</script>如果不支持的话(nope)浏览器将会引入localstorage.js
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8">
<title>Modernizr</title>
<script src="modernizr.custom.61032.js">
</script>
</head>
<body>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.localstorage,
nope: 'localstorage.js'
})
</script>
<script>
localStorage.setItem('key', 'value');
</script>
</body>
</html>
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
