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，Chrome，IE6 / 7/8。测试它们的最佳方法是将它们安装在您的计算机上。

Answer 3

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

对于任何CSS3将其包装在条件javascript中。我总是确保设备宽度至少是240px，然后低于那个旧的，蹩脚的移动外观。

您可以使用CSS的小型移动样板来重置您使用的基本标签（使它们在不同的浏览器中看起来相同）。与任何样板文件一样，你应该查看css以确定它是否过度杀伤。

有关综合指南，请查看W3 Mobile CSS2指南：http://www.w3.org/TR/2000/WD-css-mobile-20001013

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

Answer 4

优雅降级就是妥协 - 如果你可以在较低版本中做任何事情，你可能会这样做。要选择您引用的圆角示例，您（或您的客户）可以接受没有它们的情况，那里没有渲染器特定的CSS扩展来支持它们（这就是http://www.ipswich-angle.com/处理它的方式，例如，我相信）。还有其他涉及图像的选项，但这在很大程度上取决于您和您的客户愿意做出的妥协。

Answer 5

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

Answer 6

我打算把它作为评论，但后来我被带走了......

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

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

至于构建网站，我建议首先使用语义元素（使用html5shiv）和使用IE7进行测试来构建HTML4网站。然后，当您构建需要新功能的网站部分时，请研究一个Javascript文件，该文件将为旧版浏览器提供相同的功能，例如：当需要添加第一个圆角或渐变时，可以添加CSS3Pie。永远记住你的盒子模型; webkit以及mozilla的API支持border-radius和gradients，因此你需要添加3次css3属性：

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

不幸的是，我没有很好的资源来了解webkit / mozilla API与HTML5功能的比较。

我唯一难以找到的功能是支持旧浏览器中的CSS3选择器，通常你可以逃脱这个，我的意思是如果你不打算升级你的浏览器恕我直言你可以忍受几个双厚度边框或者在表中缺少备用行样式。

也许有一天会有一个网站，你可以上传你的代码，告诉你像“chrome 20.xyz不支持圆角，添加-webkit-border-radius添加支持”之类的东西，但在此之前添加对于复杂的站点，事后几乎不可能向后兼容。

如何编写向后兼容的HTML5？

6 个答案: