HTML5开发与旧式浏览器的兼容

我们已经讨论了HTML5许多很酷的新功能，包括新的语义元素、为画图而生的canvas标签，以及音频与视频支持。

你可能会想：这些东西是很好，但当用户的浏览器不兼容HTML5时，可能就没法使用它们了。更不用说一些所谓的“支持”HTML5的浏览器，实际上只支持它的一部分功能而已。并不是所有HTML5新功能都会被所有浏览器所支持，而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。

不过，有一种方法可以使用新的特性，同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。

根据Paul Irish的说法，polyfill是模拟未来API的shim，它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时，polyfill会补充其中的空隙。学会使用这些polyfill，你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。

获得polyfill支持的一种方法是使用JavaScript库——Modernizr（当然可用的不止这一种）。它会带来特性侦测能力，这样你就能检查浏览器究竟是否支持某种功能（比如canvas元素）。如果不支持，就提供一个备用的选择。

让我们研究一个示例。还记得吗？在介绍语义元素与页面布局时，我们已经使用过这个例子了。

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>Title</title>     <link href="css/html5reset.css" rel="stylesheet" />     <link href="css/style.css" rel="stylesheet" /> </head> <body>     <header>         <hgroup>             <h1>Header in h1</h1>             <h2>Subheader in h2</h2>         </hgroup>     </header>     <nav>         <ul>             <li><a href="#">Menu Option 1</a></li>             <li><a href="#">Menu Option 2</a></li>             <li><a href="#">Menu Option 3</a></li>         </ul>     </nav>     <section>         <article>             <header>                 <h1>Article #1</h1>             </header>             <section>                 This is the first article.  This is <mark>highlighted</mark>.
            </section>         </article>         <article>             <header>                 <h1>Article #2</h1>             </header>             <section>                 This is the second article.  These articles could be blog posts, etc.  
            </section>         </article>     </section>     <aside>         <section>             <h1>Links</h1>             <ul>                 <li><a href="#">Link 1</a></li>                 <li><a href="#">Link 2</a></li>                 <li><a href="#">Link 3</a></li>             </ul>         </section>         <figure>             <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman" />             <figcaption>Jennifer Marsman</figcaption>         </figure>     </aside>     <footer>Footer - Copyright 2011</footer> </body> </html>

IE旧版本如何让HTML4转换并且支持HTML5的新特性。

HTML5开发与旧式浏览器的兼容

更多相关文章

随机推荐