考虑旧浏览器，使用HTML5元素是否谨慎？

Question

我正在考虑诸如<header>，<footer>，<article>，<section>和HTML5文档类型之类的内容。

现在设计页面有什么好处吗？旧版浏览器将如何看待它们？他们可以验证吗？

我只是不确定这些东西是如何向后兼容的。

Answer 1

确保向后兼容性的一个好方法是使用类似modernizr的东西，它是一个javascript文件，告诉你用户的浏览器支持哪些html5 / css3功能，这允许你设计你的代码，它会优雅地降级或者只是为不同的浏览器使用不同的规则（例如，为支持它的浏览器创建一个使用border-radius的类，为不支持该属性的浏览器创建一个单独的基于图像的圆角的圆。

Modernizr site

Answer 2

你在帖子中提出了几个问题：

  

现在[使用HTML5]设计页面有什么好处吗？

是

使用新的语义网，您将获得语义。你赋予数据意义，然后可以做出奇妙的事情。

  

旧浏览器将如何看待它们？

这取决于浏览器

HTML规范说明应该忽略非标准的HTML元素，就好像它们从不在源头开始一样（除非事情告诉他们）。对于大多数符合标准的浏览器（阅读：FF，Safari，Opera，Chrome），您必须在HTML5元素显示之前为其提供显示样式：

section, header, footer, nav, article
{
  display: block;
}

请记住，这依赖于实际符合规范的浏览器，其中一些较旧的浏览器*咳嗽* IE *咳嗽*没有做_{（有时我不知道IE开发团队是否读< / strong>任何HTML规范）}。

  

他们可以验证吗？

有点......

HTML5规范尚未最终确定，但已有许多在线HTML5验证器已经可用。

Answer 3

由于其他回复中提到的原因，这是值得的，但有几个问题需要牢记：

• 如其他地方所述，不了解新元素的浏览器需要显示：block;添加到样式表
• pre IE 9不允许您设置未知元素的样式，因此您需要使用JavaScript hack。有关如何执行此操作的详细信息，请参阅HTML5 Doctor
• BlackBerry浏览器（BlackBerry OS6之前版本）也不允许对它们进行样式设置。我不知道有任何解决方法。如果这对您很重要，取决于您的网站对移动设备的关注程度以及您是否有单独的移动网站。然而，黑莓浏览器是一种流行的移动浏览器，新的黑莓操作系统需要一段时间才能通过他们的WebKit浏览器获得大量的黑莓设备。
• 屏幕阅读器也不了解这些新元素。建议使用等效的ARIA角色将它们加倍，直到支持无处不在。有关详细信息，请参阅HTML5, ARIA Roles, and Screen Readers 。

我不知道使用HTML5 doctype有任何缺点。我相信这是完全安全的。

Answer 4

当然，是的 - 许多浏览器已经实现了对HTML 5部分的支持，或者通常与它相关的功能，以及它们中的一些，即使你确实将它们引入浏览器，你也不会破坏任何东西。没有理解它。

与往常一样，您应该使用适当的功能检测，而不是全方位的浏览器检测，以确定可用的内容 - 它不易受到用户代理字符串等损坏的影响。

有一个很好的指南Dive Into HTML 5，它基本上讨论了这一点。

Answer 5

是的，html5是一个通用标准，因此大多数（不包括IE）都支持它。此外，如果不支持视频，您可以将Flash置于视频标签内，如果不支持html5，您可以将jquery等库设置为备份。