如何编写向后兼容的HTML5？
我想开始使用 HTML5 的基本功能，但同时保持我的代码向后兼容旧版浏览器（优雅降级）。例如，我想使用很酷的 CSS3 属性来制作圆角。有没有可用的教程来编写可优雅降解的 HTML5？
此外，我应该支持哪些浏览器，以便我的应用程序。对至少 95% 的访客有效吗？有哪些方法可以轻松测试这些浏览器？
I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ?
Additionally, what browsers should I support so that my app. is functional for at least 95% of visitors? What are the ways to test those browsers painlessly ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
当谈论 HTML5 或 CSS3 时，您应该转到：
我什么时候可以使用...
可以看出，我们离使用它还很远
此外，由于旧版本的浏览器不支持 HTML5 或 CSS3，因此您可以执行以下操作：
渐进增强和优雅降级
这里还有一些资源：
When talking about HTML5 or CSS3, you should head over to:
When can I use...
As can be seen, we are still far far away from using that.
Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:
Progressive Enhancement and Graceful Degradation
Here are some resources also:
覆盖全球 95% 地区的浏览器：Firefox、Chrome、IE6/7/8。
测试它们的最佳方法是将它们安装在您的计算机上。
Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8.
The best way to test them is to install them on your computer.
您想要使用与移动浏览器兼容的 html 标签和 css。
对于任何 CSS3 内容，都将其包装在条件 javascript 中。我总是确保设备宽度至少为 240 像素，然后低于该宽度的任何内容都是旧的、蹩脚的移动外观。
您可以使用 CSS 的小型移动样板来重置您使用的基本标签（使它们在不同的浏览器中看起来相同）。与任何样板一样，您应该查看 CSS 看看它是否太过分了。
如需全面的指南，请查看 W3 Mobile CSS2 指南：http://www .w3.org/TR/2000/WD-css-mobile-20001013
另一个很好的资源是这个兼容性表：http://www.quirksmode.org/m/css.html
You want to use html tags and css compatible with mobile browsers.
For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.
You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.
For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013
Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html
优雅降级就是做出妥协——如果你能在较低版本中完成所有事情，你可能会这么做。选择您引用的圆角示例，您（或您的客户）可能可以接受没有它们的生活，因为不存在渲染器特定的 CSS 扩展来支持它们（这就是 http://www.ipswich-angle.com/ 处理它，例如，我相信）。涉及图像的其他选项还有，但这在很大程度上取决于您和您的客户愿意做出的妥协。
Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.
像 browsershots.org 这样的服务对于检查您的网站在不同浏览器和操作系统上的呈现方式非常有用。你必须排队等待一段时间，但这是值得的。
A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.
我本来打算对此发表评论，但后来我得意忘形了..
w3schools 有有关在网站上使用语义 Web 元素的建议。它建议使用名为 html5shiv.js 的 Javascript 库为 IE8 及更低版本添加样式支持，以便您可以找到模拟 HTML5 内置特定功能的 javascript 文件，例如 JSON2.js 和 Webforms2.js。
最后这篇文章 给出了使用许多新属性/功能模拟 HTML5 表单的完整示例。
至于构建网站，我建议首先自由地使用语义元素（使用 html5shiv）构建一个 HTML4 网站，并使用 IE7 进行测试。然后，当您构建需要新功能的网站部分时，研究一个 Javascript 文件，该文件将为旧浏览器提供相同的功能，例如：当需要添加第一个圆角或渐变时，可能会添加 CSS3Pie。永远记住你的盒子模型； webkit 和 mozilla 的 API 都支持 border-radius 和渐变，因此您需要添加 3 次 css3 属性：
不幸的是，我没有很好的资源来了解 webkit/mozilla API 与 HTML5 功能的比较。
我一直在努力寻找的唯一功能是在旧版浏览器中支持 CSS3 选择器，通常你可以摆脱这个，我的意思是，如果你不打算升级你的浏览器，恕我直言，你可以忍受一些双倍厚度的边框或缺少备用边框表格中的行样式。
也许有一天，您可以将代码上传到一个网站，该网站会告诉您诸如“chrome 20.xyz 不支持圆角，添加
-webkit-border-radius以添加支持之类的信息“但在此之前，对于复杂的网站来说，事后添加向后兼容性几乎是不可能的。I was going to make this a comment, but then I got carried away..
w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.
Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.
As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:
Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.
The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.
Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add
-webkit-border-radiusto add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.