我应该使用HTML5和/或CSS3建立网站吗?


16

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


Web8是什么意思?
亚伦

3
html5 + css3 = web8!
杰森

HTTP 1.0和ECMAScript 5.0呢?

Answers:


13

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

至于CSS3,如果您确实使用过CSS3,请确保在常规语法之上也使用供应商predix。例如

边界半径

-moz-border-radius

-webkit-border-radius

我相信逐步增强。IE9的css3支持听起来很有希望。


2
我认为您的意思是将边界半径放在底部,对吗?
格兰特·帕林

1
las,原始的Dive Into HTML5网站已消失。有很多可用的镜子。这是一个:diveintohtml5.info
M. Dudley

12

大概。

现在,您可以立即使用HTML5的某些部分。例如表格。如果您使用<input type="email">的浏览器不支持HTML5(是的,甚至是IE6),您将看到与使用相同的东西<input type="text">。但是,在支持HTML5表单元素的浏览器上,您可以获得该email类型的优点:即,客户端将在不需要附加JS的情况下对值进行错误检查。是的,对于非HTML5浏览器,您仍然需要JS,但在支持的浏览器中,您将需要进行一层验证。

该站点上的另一个问题很好地概述了通过HTML5和CSS3为您提供的新功能。在这个问题上,表单上也有很多很好的数据。

由于Internet Explorer(以及Safari和Firefox的较旧版本,尽管它们可能很少见)不支持其中许多功能,所以您留有JavaScript库来填补空白。其中包括性能下降(即使仅适用于需要使用它们的浏览器),因此在使用它们时请注意用户。

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

  • html5shiv: JavaScript的IE浏览器,可识别HTML5元素并设置其样式。
  • CSS3 Pie:一种IE附加行为(.htc文件),使Internet Explorer 6-8能够呈现几种最有用的CSS3装饰功能。当应用于一个元件,它允许IE识别和显示border-radiusbox-shadowborder-image,多个背景图像,并linear-gradient作为背景图像。
  • Modernizr:一个Javascript库,它使用功能检测来针对即将到来的CSS3 / HTML5功能测试当前的浏览器,并为<html>元素添加受支持的类。true如果支持(false如果不支持),还将创建一个自命名的全局JavaScript对象,该对象包含每个功能的布尔属性。增加了对造型和打印HTML5元素,所以你可以使用的元素,如支持<section><header><nav>
  • ie-css3.js:允许Internet Explorer识别CSS3伪类选择器并呈现使用它们定义的任何样式规则。根据您的站点使用哪个JavaScript库,支持不同的CSS3选择器。
  • DD_belatedPNG:一个Javascript库,它向IE6添加了对PNG图像的支持。您可以将PNG用作CSSsrc<img />元素或background-image属性。不同于AlphaImageLoaderbackground-position并且background-repeat按预期工作,并且元素将响应a:hover伪类。
  • TwinHelix IE PNG修复: IE附加行为(.htc文件),向IE 6添加具有Alpha透明度的PNG支持。完全CSS背景定位和重复(包括CSS Sprites)与其他(包括)JavaScript一起支持。
  • 不管:悬停:一个IE浏览器附加的行为(一个.htc文件),自动补丁:悬停:活跃:集中在IE6,IE7和IE8怪癖,让你使用它们,就像您在任何其他浏览器。包括AJAX的支持,这意味着该得到任何HTML通过JavaScript插入到文档中也将触发:hover:active:focus风格在IE中。

有趣的是,DD_belatedPNG通过纯JavaScript解决了Whatever:hover和TwinHelix的IE PNG Fix解决的两个问题,而Whatever:hover和TwinHelix的IE PNG Fix结合使用了JavaScript和IE附加行为(.htc files)。

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


对不起,布赖森,但为Internet Explorer添加HTML5支持的那些事情实际上是噩梦。

1
我用一些更多的信息更新了我的帖子,并承认使用这些JS库对性能的影响。但是,我不同意您使用它们是一场噩梦。我已经至少使用了所有这些一次,并且它们都达到了目的。他们也没有使我头痛。是什么让您说他们是噩梦?
布赖森

好的,“彻底的噩梦”可能是措辞过于严格的方式,但性能通常会严重受损,以致页面无法使用,因此我认为您过分夸大了。

5

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

Eric Meyer写了一篇不错的文章,内容说明为什么开始在CSS规则上使用供应商特定的前缀并不像过去使用CSS过滤器黑客那样la脚。

我认为HTML5同样适用。如果您可以检查浏览器对不同功能的支持,为什么不使用它。只要站点正常降级,就可以使其正常运行。



1

我使用它来增强现代浏览器上的体验,从而使拥有良好浏览器的用户获得“奖励”,同时获得外观更好的UI(圆角,阴影等)。我猜您不应该用它代替当前的客户端表单验证,除非您为此得到某种JS后备。


1

如果您要使用HTML5启动新项目,而旧版本的浏览器也应支持HTML5,那么最好的选择是使用Initializr-

http://www.initializr.com/

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


0

取决于目标受众是什么以及要使用的功能。我预计,普通项目可能需要几年的时间才能放弃对ie6的支持:(


0

如果您的站点是私有Intranet,或者您控制浏览器,或者处理的浏览器范围有限,则可以随时使用技术的最新优势。

如果没有,无论您使用什么,都必须始终考虑最低公分母。在这种情况下,可能是IE 6和一系列移动浏览器的某种组合。因此,如果您继续使用HTML 5,那么还会遇到确保您的网站“降级”的问题。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.