掌握HTML5浏览器兼容性



在过去的几年里,HTML5已经从神话般的生物变成了生动的现实,并且在其就绪性和可行性方面受到了怀疑论者和专家的一致好评。现在,在2012年,HTML5已经可以用于包括IE9在内的所有现代浏览器。它还可以优雅地降级,即使没有JavaScript或CSS重置的帮助。

即使如此,您可能仍然担心提供完全的向后兼容性,或者不确定什么可以在一个浏览器而不是另一个浏览器中工作。jQuery和CSS3提出的问题通常归咎于HTML5,这两种新技术和标准都是随着HTML5发展而来的,但实际上并不是HTML5的一部分。为了掌握HTML5浏览器的兼容性,您必须首先了解浏览器对每种语言的看法。

HTML5与CSS3

html5 and css3

HTML5是HTML标记规范的修订版,包含了一些最佳实践和规则,浏览器制造商和web开发人员可以通过这些实践和规则找到共同点。它于2006年首次起草并被W3C接受,于2009年结束,并被视为可以使用,很可能在今年获得完全的候选人批准。它包含您可能已经看到的新布局元素,例如<;文章(>&书信电报;旁白>;和<;导航(>;);。它取消了对表示标记和属性的支持,同时引入了对本机浏览器功能(如多媒体播放和脱机存储)的支持。另一方面,CSS3是一个单独的规范,目前仍在修订中,因此,并非所有浏览器都完全支持新的选择器。

这两个规范的目的都是为了使web开发达到一个更具语义和意义的地方,即生成一组易于理解的标准,这些标准的设计目的是使彼此能够很好地协同工作。由于HTML5与CSS3无关,因此可以在各种应用中使用,而不会遇到一些尖端CSS3选择器可能带来的兼容性问题。

达成协议

这些术语我们都听过好几次了,但如果你是新手或大部分时间都专注于前端设计,那么优雅降级、渐进增强、向后兼容性和浏览器支持的概念听起来可能完全是胡说八道。幸运的是,关于这些主题已经写了很多文章,并且已经创建了一些非常有用的工具,使我们更容易应对。让我们从这些东西的基本知识开始。

浏览器兼容性有那么重要吗?

我看到设计师们争辩说,花不必要的精力支持过时的浏览器是没有意义的。当现代webkit浏览器占所有浏览器使用量的近75%时,为什么还要麻烦呢?不幸的是,很难说服客户希望接触到尽可能多的观众或支持依赖旧技术的观众。世界上很大一部分地区仍然缺乏升级的财政资源或技术能力。您还必须考虑具有可访问性需求的用户。HTML5和CSS3试图标准化浏览器显示web的方式,从而解决了巨大的兼容性差距,最终将减少在设计兼容性解决方案时花费的额外努力。

优雅降级与渐进增强

Opera的克里斯蒂安·海尔曼(Christian Heilmann)将优雅降级定义为“提供功能的替代版本,或让用户意识到产品的缺点,作为一种安全措施,以确保产品可用。”在实践中,这将包括以条件语句的形式为IE提供回退支持,使用新HTML5元素的特殊JavaScripts或Flash音频和视频。

向后兼容性是一个类似的术语,意思大致相同,指的是旧浏览器显示应用程序或网站或适应其功能的能力。

相比之下,渐进增强是一个从可用功能基线开始,然后通过各种测试方法增加用户体验丰富性的过程。因此,它是主动的,而优雅降级是临时解决方案。

现在浏览器兼容性

如前所述,所有现代浏览器都支持新的HTML5标记。当您开始实现HTML5本机浏览器功能和画布元素时,情况变得复杂起来,其中许多功能和元素仍然需要JavaScript才能完全支持。许多CSS3选择器要么依赖于JavaScript,要么对移动浏览器不安全。

HTML5元素支持:

  • Internet Explorer 9&;10

下面是一些更多的资源,可以帮助您了解CSS3和HTML5在网络上的地位。将这些添加到您的工具包中,可以节省您在下一个HTML5项目中的时间和挫折感。

FindMebyp公司

HTML5 Canvas与HTML5元素共享相同的现代浏览器对图形渲染的支持,如果您计划在应用程序或网站中实现画布幻灯片、文本效果或画布动画,这将是一个好消息。FindMybyp提供了一些一览表,用于针对各种浏览器检查特定的HTML5和CSS3功能,尽管它没有提供在不支持某些功能时该怎么办的解决方案。如果您需要查看HTML5和CSS3之外的高级功能、API或JavaScript功能,请访问caniuse.com。

html5 canvas

findmebyip html5

HTML5请

在FindMeByIP上查看图表后,或者如果您有特定的功能,请转到HTML5查找元素或选择器,并获得关于是否应该使用它的直接建议,以及可以做些什么来帮助通过多边形填充(附加脚本)提供优雅的降质。

html5please

浏览器快照

该网站允许您在几乎所有可能的浏览器和操作系统组合中测试实时网站,为您提供每个选择的屏幕截图,让您了解您的网站将如何在各种浏览器中呈现。Browsershots不会告诉您哪些标记、脚本或样式不兼容,但视觉提示允许您快速定位问题区域并开始规划解决方案。

browsershots

勺子

与浏览器快照类似,Spoon是一项免费服务,用于测试各种浏览器中的网站,包括移动浏览器和Firefox Aurora和Chrome 18等候选版本。您的网站加载在虚拟浏览器中,而不是在屏幕快照中返回,因此您可以更好地进行调试。

spoon

把它放在一起

既然HTML5和CSS3之间的区别已经确定,我们更好地理解了为什么兼容性很重要以及如何测试它,那么让我们看看如何实现它。

HTML5 Shiv

利用HTML5和CSS3的新功能意味着牺牲对旧版本体验的控制;浏览器。HTML5 shiv/shimms/bim/bams/whatevers是可以用来弥补旧浏览器中功能检测不足的脚本,无论访问者使用何种浏览器或设备,都可以让您的尖端网站和应用程序完全正常工作。

将这些脚本之一实现到HTML5网站是相当容易的。只需在文档头中链接脚本:

&;书信电报;脚本src=&;引用//googlecode.com/svn/trunk/html5.js&;引用&;燃气轮机&;lt/脚本(&A);燃气轮机;

注意,我们不再需要在HTML5中贬值的type=“属性。

脚本资源:

  • 雷米·夏普的HTML启用脚本→

CSS重置

作为CSS重置的先驱,Eric Meyer解释道:“重置样式表的目标是减少浏览器在默认行高、标题的边距和字体大小等方面的不一致。这背后的一般原因是:;如果你有兴趣,可以在2007年5月的帖子中讨论。重置样式经常出现在CSS框架中,最初的“meyerweb重置”进入了CSS框架;poular CSS框架,如Blueprint等。“实现重置为旧浏览器无法识别的样式和选择器提供了后备方案。您可以将它们直接插入主样式表的开头,使用导入,或将它们链接到主样式表上方的文档头中。

CSS重置资源:

  • Eric Meyer的CSS重置→

IE条件标记

支持HTML5的脚本和CSS重置样式表只有较旧的浏览器才需要,因此没有必要为每个人加载它们。谢天谢地,Internet Explorer支持条件标记,可以用来检测IE的特定版本,为其提供特殊的样式表、脚本或消息。例如:

&;lt--[如果IE 6]&;燃气轮机;
&;lt--[如果低于IE 9]&;燃气轮机;

条件语句可以使用许多运算符来微调控制。在我上面的例子中,“if lt IE 9”表示“if小于Internet Explorer 9”,这意味着任何低于9的IE版本都将受益于该脚本。

了解更多信息:

  • 关于条件注释(Microsoft)→

音频和;视频

<;音频>和<;视频>元素得到了广泛而快速的采用,因为它承诺了更好的移动兼容性,并且可以轻松地通过定制的播放器提供自己的多媒体。不幸的是,HTML5音频和视频在所有现成的HTML5规范中对浏览器的支持最少。实现对HTML5音频或视频的完全支持需要两到三倍于Flash支持的编码杂务,并且仍然缺乏当前基于插件技术中可用的许多关键功能。Speckyboy已经在这个主题上发表了一篇很好的文章,涵盖了正确的实现。

HTML5的可视化设计

浏览器兼容性只是手工编写自己的网站所涉及的众多复杂因素之一,而这些因素可以用正确的工具处理。Wix的新HTML5网站生成器是一个完全免费的在线工具,用于使用可视化拖放编辑器设计有效、丰富的HTML5网站,为您提供完全的创作自由。

它非常容易掌握,并附带了大量的动画、小部件和图形库,让您现在就开始使用HTML5进行设计。您可以从头开始快速设计和设计任何布局,并添加HTML5音频、视频、幻灯片等,而无需大量耗时的手工编码。。

结论

希望这篇HTML5和浏览器兼容性的介绍为您提供了一个开始的大纲,为您的访客和客户设计更好的体验。HTMl5规范正处于起步阶段,预计未来几年的采用率将突飞猛进,但总有一个百分比需要考虑。随着网络的发展,你可以确信对优雅降级和渐进增强的需求永远不会消失,技术和需求将发生变化。

我错过了什么吗?请在评论中告诉我们!

来源:https://speckyboy.com/getting-to-grips-with-html5-browser-compatibility/

0