我想开始使用 HTML5 的基本功能，但同时，让我的代码向后兼容旧版浏览器（优雅降级）。例如，我想使用酷炫的 CSS3 属性来制作圆角。是否有任何可用于编写可优雅降解的 HTML5 的教程？
此外，我应该支持哪些浏览器以便我的应用程序。对至少 95% 的访问者有用吗？有什么方法可以轻松测试这些浏览器？
问问题
14440 次
6 回答
13
在谈论 HTML5 或 CSS3 时，您应该转到：
可以看出，我们离使用它还很远。
此外，由于旧版本的浏览器不支持 HTML5 或 CSS3，但是，您可以执行以下操作：
这里还有一些资源：
- HTML5 网站图库（您可以从中学习并获得灵感）
- 使用 HTML5 和 CSS3 创建现代网站
于 2010-04-20T11:38:11.880 回答
2
覆盖全球 95% 的浏览器：Firefox、Chrome、IE6/7/8。测试它们的最佳方法是将它们安装在您的计算机上。
于 2010-04-20T11:40:48.683 回答
2
您想使用与移动浏览器兼容的 html 标签和 css。
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
于 2012-10-29T23:38:16.580 回答
1
Graceful Degradation 就是妥协——如果你可以在低版本中做所有事情，你可能会这样做。要选择您引用的圆角示例，您（或您的客户）可能会接受没有它们，因为不存在渲染器特定的 CSS 扩展来支持它们（这就是http://www.ipswich -angle.com/处理它，例如，我相信）。还有其他涉及图像的选项，但这在很大程度上取决于您和您的客户愿意做出的妥协。
于 2010-04-20T11:44:02.703 回答
1
像browsershots.org这样的服务对于检查您的网站在不同浏览器和操作系统上的呈现方式非常有用。您必须在队列中等待一段时间，但这样做是值得的。
于 2011-07-05T04:58:10.070 回答
0
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:
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
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-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.
于 2013-05-13T13:26:10.543 回答