<!--[if lt IE 7]> ? ? ?<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> ? ? ? ? <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> ? ? ? ? <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
?
?
?
modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。
Modernizr的功能
?
modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的<html>标签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，modernizr就会在<html>标签上添加video类，否则，添加no-video类。
eg:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
<!--<![endif]-->
<head>
? ? ? ? <meta charset="utf-8">
? ? ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
? ? ? ? <title></title>
? ? ? ? <meta name="description" content="">
? ? ? ? <meta name="viewport" content="width=device-width">
?
? ? ? ? <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
?
? ? ? ? <link rel="stylesheet" href="css/normalize.css">
? ? ? ? <link rel="stylesheet" href="css/main.css">
? ? ? ? <script src="//www.google-analytics.com/ga.js"></script><script src="js/vendor/modernizr-2.6.2.min.js"></script>
? ? </head>
? ? <body>
? ? ? ? <!--[if lt IE 7]>
? ? ? ? ? ? <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
? ? ? ? <![endif]-->
?
? ? ? ? <!-- Add your site or application content here -->
? ? ? ? <p>Hello world! This is HTML5 Boilerplate.</p>
? ? ? ? <abbr title="test">ttt</abbr>
? ? ? ? <dfn>231231 </dfn>
? ? ? ? <figure>
? ? ? ? ? <h1>PRC</h1>
? ? ? ? ? <p>The People's Republic of China was born in 1949...</p>
? ? ? ? </figure>
? ? ? ??
? ? ? ? <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
? ? ? ? <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script><script src="js/vendor/jquery-1.9.1.min.js"></script>
? ? ? ? <script src="js/plugins.js"></script>
? ? ? ? <script src="js/main.js"></script>
?
? ? ? ? <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
? ? ? ? <script>
? ? ? ? ? ? var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
? ? ? ? ? ? (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
? ? ? ? ? ? g.src='//www.google-analytics.com/ga.js';
? ? ? ? ? ? s.parentNode.insertBefore(g,s)}(document,'script'));
? ? ? ? </script>
? ??
?
</body></html>
?
?
