html5 polyfill

首先我们可以使用这个js库来检测浏览器支持不支持html5的一些功能：

http://modernizr.com/download/

它会在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的库文件地址：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

下面我们引入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>

猜你喜欢