如何编写向后兼容的HTML5？

Question

我想开始使用HTML5的基本功能，但同时保持我的代码向后兼容旧浏览器（优雅降级）。例如，我想使用酷酷的CSS3属性来制作圆角。是否有任何可用的教程来优雅地编写可降解的HTML5？

此外，我应该支持哪些浏览器让我的应用程序。适用于至少95％的访客？无痛测试这些浏览器的方法有哪些？

Answer 1

在谈到HTML5或CSS3，你应该头部到：

When can I use...

可以看出，我们仍然很远很远的使用。

此外，由于浏览器的旧版本将不支持HTML5或CSS3，但是，你可以做的是被称为：

Progressive Enhancement and Graceful Degradation

这里有一些资源也：

• Gallery of HTML5 Sites（你可以学习，并从他们那里得到的想法）
• Create modern Web sites using HTML5 and CSS3

Answer 2

浏览器是，集体地覆盖全世界的95％：Firefox，铬，IE6/7/8。 测试它们的最好方法是将它们安装到您的计算机上。

Answer 3

优雅降级是所有关于作出妥协 - 如果你能在低版本做的一切，你可能会。为了选择你引用的圆角的例子，你（或你的客户）可以接受没有它们的生活，那里不存在渲染器特定的CSS扩展来支持它们（例如http://www.ipswich-angle.com/可以处理它，我相信）。其他涉及图像的选项在那里，但它很大程度上取决于你和你的客户愿意做出哪些妥协。

Answer 4

像browsershots.org服务是非常有用的检查您的网站如何呈现在不同的浏览器和操作系统。你必须排队等待一段时间，但值得这样做。

Answer 5

你想使用HTML标签和CSS与移动浏览器兼容。

对于任何CSS3敷在有条件的JavaScript。我总是确保设备宽度至少为240像素，然后低于此值的任何东西都是旧的，蹩脚的，移动的外观。

你可以用较小的手机样板的CSS，重置您使用基本标签（让他们同样看着他们不同的浏览器）。和任何样板一样，你应该看看CSS，看看它是否是过度杀伤。

对于全面指导检查出的W3手机CSS2准则：http://www.w3.org/TR/2000/WD-css-mobile-20001013

另一个很好的资源是这样的兼容性表：http://www.quirksmode.org/m/css.html

Answer 6

我会做出这样的评论，但后来，我被带走。

w3schools对您的网站上使用语义网元素有建议。它建议使用名为html5shiv.js的Javascript库向IE8和以下版本添加样式支持，以便您可以找到模拟HTML5中内置的特定功能的JavaScript文件，如JSON2.js和Webforms2.js。

最后this article给出了一个模拟具有许多新属性/功能的HTML5表单的完整示例。

至于构建网站，我建议首先使用语义元素（使用html5shiv）并使用IE7进行测试来构建HTML4网站。然后，当您构建需要新功能的部分网站时，需要研究一个Javascript文件，该文件将为旧版浏览器提供相同的功能，例如：何时添加第一个圆角或渐变，可能会添加CSS3Pie。永远记住你的盒子模型;

border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 

不幸的是我没有对如何WebKit的/ Mozilla浏览器的API一个很好的资源：边框半径和梯度的WebKit和Mozilla的API很多CSS3属性你需要加3倍的支持与HTML5功能进行比较。

我一直在努力寻找的唯一功能是支持旧版浏览器中的CSS3选择器，通常您可以摆脱这种情况，我的意思是如果您不打算升级浏览器恕我直言，您可以生活几乎没有双倍厚度边框或表格中缺少交替行样式。

也许有一天会有一个网站，你可以上传你的代码，它会告诉你像“铬20.xyz不支持圆角，添加-webkit-border-radius添加支持”，但直到那时后添加向后兼容性事实对于复杂的网站来说几乎是不可能的。