it-swarm.cn

我应该使用HTML5和/或CSS3来构建我的网站吗?

新的HTML5/CSS3(Web8!)听起来很酷!我现在应该开始使用它还是坚持使用css/xhtml等到更多浏览器可以使用它?

16
Jason

现在所有浏览器都支持HTML5,甚至是IE5!(如果使用html5shiv脚本)。我强烈推荐阅读 http://diveintohtml5.org 这是最好的HTML5资源之一。

对于CSS3,如果您确实使用它,请确保在常规语法之上使用供应商预测。例如.

边界半径

-moz-边界半径

-webkit-边界半径

我相信渐进增强。 IE9的css3支持听起来很有前途。

13
Jin

可能。

现在,您可以使用HTML5的一部分。例如表格。如果你在不支持HTML5的浏览器中有<input type="email">(是的,甚至是IE6),如果使用了<input type="text">,你会看到同样的东西。然而,在支持HTML5表单元素的浏览器上,您可以获得email类型的优点:即客户端将错误地检查值,而不需要额外的JS。虽然是的,你仍然需要非HTML5浏览器的JS,你将在支持的浏览器中再增加一层验证。

另一个 本网站上的问题 通过HTML5和CSS3提供了一个很好的概述。这个问题中的表格也有很多好的数据。

因为Internet Explorer(以及旧版本的Safari和Firefox,但它们可能很少见)不支持许多这些功能,所以您需要使用JavaScript库来填补空白。这些包括性能损失(即使它仅适用于需要使用它们的浏览器),因此在使用它们时要注意用户。

要缓解缺少功能支持的问题,如果您认为这些新功能是值得的,请使用以下资源:

  • html5shiv : IE的JavaScript shiv识别和设置HTML5元素的样式。
  • CSS3 Pie:一个IE附加行为(一个.htc文件),使Internet Explorer 6-8能够渲染几个有用的CSS3装饰功能。当应用于元素时,它允许IE识别并显示border-radiusbox-shadowborder-image,多个背景图像和linear-gradient作为背景图像。
  • Modernizr :一个Javascript库,它使用特征检测来测试当前浏览器对即将出现的CSS3/HTML5特性,为<html>元素添加类,以支持那些。还创建了一个自我标题的全局JavaScript对象,其中包含每个要素的布尔属性,true如果支持,false如果不支持。添加样式和打印HTML5元素的支持,以便您可以使用<section><header><nav>等元素。
  • ie-css3.js :允许Internet Explorer识别CSS3伪类选择器并呈现用它们定义的任何样式规则。支持基于您的网站使用的JavaScript库的不同CSS3选择器。
  • DD_belatedPNG :一个为IE6添加PNG图像支持的Javascript库。您可以将PNG用作<img />元素的src或CSS中的background-image属性。与AlphaImageLoader不同,background-positionbackground-repeat按预期工作,元素将响应a:hover伪类。
  • TwinHelix IE PNG修复: a IE附加行为(.htc文件),增加了对alpha的PNG支持不透明度IE 6.完整的CSS背景定位和重复支持(包括CSS精灵)和附加(包含)JavaScript。
  • Whatever:hover :一个IE附加行为(一个.htc文件)自动修补:hover,:active和:focus for IE6 ,IE7和IE8的怪癖,让你像在任何其他浏览器中一样使用它们。包含AJAX支持,这意味着任何通过javascript插入到文档中的html也会在IE中触发:hover:active:focus样式。

有趣的是,DD_belatedPNG解决了Whatever所解决的两个问题:hover和TwinHelix的IE PNG修复与纯JavaScript,而无论如何:悬停和TwinHelix的IE PNG修复使用JavaScript和_的组合IE附加行为(.htc files)。

通常,使用非IE浏览器的人会在被要求时升级它们,因此IE首当其冲“但有些浏览器不支持此功能!”投诉。 Modernizr将添加将HTML5/CSS3用于您可能会看到的任何浏览器的功能,而不仅仅是IE。 ie-css3.js会做同样的事情,你只需要实现它而不需要IE条件注释(这意味着所有浏览器最终会得到它除非您将其包含在服务器端用户代理检查中 - 这将大大降低所有访问者的性能,而不仅仅是您的IE用户。)

12
Bryson

使用最适合您需求的技术。

Eric Meyer写道 一篇很好的文章 关于为什么开始在CSS规则上使用特定于供应商的前缀并不像使用css过滤器hack那样蹩脚。

我认为这同样适用于HTML5。如果您可以检查浏览器支持不同的功能,为什么不使用它。只要网站优雅地降级,就把它活起来吧。

5
jessegavin

在决定您可能想要使用哪些CSS3功能时,还有其他一些有用的链接: http://caniuse.com/ (详细说明哪些元素和选择器可用于哪些平台)

http://css3please.com/ (一个可以编辑CSS3功能的页面内可编辑的游乐场,这也提供了一些关于哪些技术和功能支持哪些平台用于常见请求样式的建议,像圆角,渐变背景等)

2
Jason M. Batchelor

我用它来增强现代浏览器的体验,因此拥有良好浏览器的用户可以获得更好看的UI(圆角,阴影,那种东西)的“奖励”。我想你不应该用它作为替代,让我们说你当前的客户端表格验证,除非你得到某种JS后备。

1
D4V360

如果您使用HTML5开始一个新项目,旧版浏览器也应支持该项目,最好选择使用Initializr -

http://www.initializr.com/

它在后端使用HTML5 Boilerplate,并添加了一些自己的选项,为您提供可以在自己的站点上部署的模板。它包括Javascript库(如HTML Shiv或Modernizr),它们将使您的站点与旧版浏览器兼容。

1
Mozan Sykol

取决于观众是什么以及您想要使用哪些功能。我预计在平均项目可以降低对ie6的支持之前还需要几年时间:(

0
theotherreceive

如果您的站点是私有内部网,并且您要么控制浏览器,要么只使用有限的浏览器来处理,那么请随意使用技术的流行边缘。

如果没有,无论你使用什么,你都必须考虑到最低的共同点。在这种情况下,它可能是IE 6和一系列移动浏览器的某种组合。因此,如果您继续使用HTML 5,则会遇到额外的问题,即确保您的网站“降级”得很好。

0
Gary.Ray