如何编写向后兼容的HTML5？

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

---

此外，我应该支持哪些浏览器，以便我的应用程序。至少95%的访客可以使用吗？有什么方法可以毫无痛苦地测试这些浏览器？

当谈到HTML5或CSS3时，你应该转向：

可以看出，我们离使用它还很远

此外，由于旧版本的浏览器不支持HTML5或CSS3，您可以执行以下操作：

以下是一些资源：

• （你可以从他们那里学习并获得想法）

---

总共覆盖全球95%的浏览器：Firefox、Chrome、IE6/7/8。

---

测试它们的最佳方法是将它们安装在计算机上。

优雅的降级就是要做出妥协——如果你可以在较低版本中完成所有工作，你可能会这样做。以您引用的圆角为例，您（或您的客户）可以接受没有圆角的情况，因为不存在特定于渲染器的CSS扩展来支持圆角（例如，我相信这就是处理圆角的方式）。还有其他涉及图像的选项，但这在很大程度上取决于您和您的客户愿意做出什么样的妥协。

像这样的服务对于检查您的站点在不同浏览器和操作系统上的呈现方式非常有用。您必须在队列中等待一段时间，但这样做是值得的。

您希望使用与移动浏览器兼容的html标记和css

对于任何CSS3，都可以用条件javascript包装它。我总是确保设备的宽度至少是240px，然后任何低于240px的都是旧的、蹩脚的移动外观

您可以使用一个小型的CSS移动模板来重置您使用的基本标记（使它们在不同的浏览器中看起来相同）。与任何样板一样，您应该查看css，看看它是否有点过火

有关全面的指南，请参阅W3 Mobile CSS2指南：

---

另一个很好的资源是这个兼容性表：

我本打算对此发表评论，但后来我被冲昏头脑了

提供了在站点上使用语义web元素的建议。它建议使用一个名为的Javascript库向IE8及以下版本添加样式支持，这样您就可以找到模拟HTML5中内置的特定功能的Javascript文件，比如和

最后给出了使用许多新属性/功能模拟HTML5表单的完整示例

至于构建站点，我建议首先自由使用语义元素（使用HTML5）构建HTML4站点，并使用IE7进行测试。然后，当您构建需要新功能的站点部分时，研究一个Javascript文件，该文件将为旧浏览器提供相同的功能，例如：何时添加第一个圆角或渐变。永远记住你的盒子模型；webkit和mozilla的API支持边界半径和渐变，因此需要添加3次css3属性：

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

不幸的是，对于webkit/mozilla API与HTML5功能的比较，我没有很好的资源

我一直在努力寻找的唯一功能是在较旧的浏览器中支持CSS3选择器，通常你可以不受影响，我的意思是，如果你不升级你的浏览器IMHO，你可以在表中使用很少的双层边框或缺少备用行样式

---

也许有一天会有一个网站，你可以上传你的代码，它会告诉你“chrome 20.xyz不支持圆角，添加

-webkit border radius

以添加支持”，但在那之前，添加向后兼容性对于复杂的网站来说几乎是不可能的。

我知道我可以做到这一点。。。我的问题是如何专门针对HTML5进行优雅的降级。@Olivier Lalonde:优雅的降级并不是针对HTML5这样的东西。你可能想在谷歌上搜索大量资源。感谢伟大的资源，这正是我想要的。听起来很有希望，但不幸的是，deveria和sitepoint链接从“渐进增强”链接断开了：没有人可以强制用户进行软件或升级：这样做将违背他们的民主选择权。请有人教微软。@Rob-好主意，但是…安装IE6/7/8是个特别的麻烦：）这就是虚拟机的用途。最困难的部分是找到一个仍然有IE6的VM映像。或者您可以使用类似SuperPreview等的方法进行兼容性检查：）如果您打开IE9调试程序（F12），您可以选择IE7、IE8和IE9仿真。如果你仍然支持IE6，你真的需要告诉你的终端用户升级。支持旧浏览器会消耗美元、时间，并增加大量的灰色头发。IE9甚至没有IE6仿真。只追溯到普利皮所说的7岁。