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>