HTML5简介

Published on 2016 - 07 - 10

如果说HTML是一部电影,那HTML5就是一次大转折。

HTML本来是不会活过21世纪的。官方Web标准组织W3C1998年对HTML就已经撒手不管了。W3C把未来都寄托在XHTML,这个更具现代特色的后续标准身上。 是一群被剥夺了话语权的人,让HTML起死回生。

HTML5的故事

大家都知道,HTML是用来编写网页的语言。HTML的基本思想(使用元素为内容添加结构)从Web诞生以来就没有变过。事实上,即使是最陈旧的网页,在最新的浏览器(包括Firefox、Chrome等那时候还没有的浏览器)中仍然可以得到完美的呈现。

年长和成功也会带来相当大的风险,那就是所有人都想取代你!1998年,W3C停止了对HTML的维护,作为对它的改进,开始制定一个基于XML的后续版本——XHTML 1.0。

XHTML 1.0:更严格的标准

XHTML与HTML的语法绝大部分都是相同的,只不过要求更严格。很多以前不够严谨的HTML标记,在XHTML中都变成了不能接受的。

例如,假设你想把标题中的最后一个词标记为斜体,本来应该写:

<h1>The Life of a <i>Duck</i></h1>

但你一不小心放错了最后两个标签的位置:

<h1>The Life of a <i>Duck</h1></i>

浏览器在遇到这个稍微有点乱的标记之后,它知道你想干什么。于是,它就把最后一个词变成斜体,而且不会抱怨你。可是,标签不匹配违反了XHTML的规定。如果把页面复制到一个XHTML验证器中(或使用Dreamweaver之类的网页设计工具时),你就会看到一个警告,告诉你哪里有错误。从Web设计的角度看,这种提示很有用,因为你可以发现微小的错误,这些错误会导致在不同浏览器中显示结果不一致,这些错误在编辑和增强页面时还可能导致更严重的问题。

最初,XHTML获得了成功。由于厌倦了浏览器的古怪行为和怎么写都可以通过的不正常状态,专业的Web开发人员对XHTML还是非常拥护的。后来,XHTML标准又强迫他们养成更好的习惯,同时放弃HTML中那些半生不熟的格式化功能。可是,与XML工具协同,降低自动化程序处理页面的难度,方便地移植到移动平台,以及XHTML语言自身的可扩展性等这些预期的好处,从来没有在XHTML身上实现过。

即便如此,XHTML仍然成为最严肃的Web设计师所遵循的标准。尽管看起来所有人都挺满意的,但实际上却存在一个潜规则:浏览器虽然理解XHTML标记,但却不会严格地按照标准执行错误检查。这就意味着页面仍然可以不遵守XHTML规则,浏览器则视而不见。事实上,没有什么可以阻止Web开发人员把乱糟糟的标记和陈旧的HTML内容混在一起,然后还说这是XHTML页面。世界上根本就没有一个浏览器站出来反对这种行为。这种情况让那些负责XHTML标准的人深感不安。

XHTML 2:意想不到的失败

解决方案就是XHTML 2。这个新版本规定了严格的错误处理规则,强制要求浏览器拒绝无效的XHTML 2页面,同时也摒弃了很多从HTML沿袭下来的怪异行为和编码惯例。比如,以编号方式(<h1>、<h2>、<h3>等)区分标题的方法被一个新的<h>元素取代,这个元素的重要性取决于它在网页中的位置。类似地,由于允许Web开发人员将任何元素转换为链接,<a>元素的地位一落千丈。而<img>元素因为增加了一种提供替代内容的新方式,也丧失了原有的alt属性。

这些变化是XHTML 2的典型特征。从理论上看,这些改变更优美也更合理。而从实践角度说,这就要求每个人都必须改变以前编写网页的方式(已经存在的网页必须更新),但付出这些代价却没有增加任何新功能,让这一切变得似乎没有了价值。与此同时,XHTML 2还宣布了几个众所周知的元素作废,比如<b>(用于加粗文本)、<i>(变斜体)和<iframe>(用于在网页中嵌入另一个网页),但这些元素在Web设计人员中仍然深得人心。

但最糟糕的,还是慢得要死的制定过程。XHTML 2的制定过程整整拖了5年才完成,开发人员的激情早都荡然无存了。

HTML5:起死回生

几乎与此同时(从2004年开始),有一群人从另外一个角度展望Web的未来。他们想的不是从HTML中挑出各式各样的毛病(或者干脆说是主张“不纯粹的哲学观”),而是它还缺少什么Web开发人员编码时急需的功能。

归根结底,HTML最早是作为显示文档的手段出现的。辅之以JavaScript,它其实已经演变成了一个系统,可以开发搜索引擎、网上商店、在线地图、邮件阅读器以及其他各种能够想象得到的Web应用。虽然设计巧妙的Web应用可以实现很多令人赞叹的功能,但开发这样的应用远非易事。多数都得手动编写大量JavaScript代码,还要用到一或多个流行的JavaScript工具包,乃至在Web服务器上运行的服务器端Web应用。要让所有这些方面在不同的浏览器中都能紧密配合不出差错是一个挑战。即使是赢得了挑战,你还要记住把这些方面联系到一起的那些错综复杂的细节。

开发浏览器的人对这种情况特别关注。于是,来自Opera Software(开发Opera浏览器的公司)和Mozilla Foundation(开发Firefox浏览器的组织)的一些具有超前意识的人纷纷建言,希望XHTML能加入一些对开发人员更有用的功能。但他们的建议并没有被采纳,结果Opera、Mozilla和Apple自发地组建了WHATWG(Web Hypertext Application Technology Working Group,Web超文本应用技术工作组),致力于寻找新的解决方案。

WHATWG不想取代HTML,而是考虑以无障碍、向后兼容的方式去扩展它。这个组织最早的工作成果包含两个补充规范:Web Application 1.0和Web Forms 2.0。而HTML5正是在这两个标准的基础上发展起来的。

注意 HTML5中的数字5表示这个标准是HTML的后续版本(在XHTML之前,HTML的版本号是4.01)。当然,这个解释也不完全正确,因为HTML5支持自HTML 4.01发布以来的10年间出现在网页中的所有新东西,包括严格的XHTML风格的语法(只要你愿意就可以用)和大量的JavaScript创新。但不管怎么说,这个名字仍然清楚地表明:HTML5虽然支持XHTML的规定,但它要求的则是HTML的规则。

2007年,WHATWG阵营获得了空前的支持。痛定思痛之后,W3C宣布解散负责制定XHTML 2标准的工作组,并开始致力于将HTML5改造为正式的标准。就这样,最初的HTML5被分割成多个容易管理的模块,而本来统称为HTML5的很多功能分散到了几个独立的标准中(详见后面的附注栏)。

HTML5包含哪些功能

如果有人说某某浏览器“支持”HTML5,其实根本没有这回事。实际上,任何浏览器支持的都是一个逐步扩展的HTML5相关功能的子集。这个结果既好又不好。说好,是因为浏览器可以迅速实现HTML5中业已成熟的部分,而任由其他部分继续发展。说不好,则是因为编写网页的人必须检查浏览器是否支持自己想用的功能。

以下列出了HTML5涵盖的一些主要功能。

  • HTML5核心。这一部分主要由W3C官方的规范组成,涉及新的语义元素、新的增强的Web表单微件、音频和视频支持以及通过JavaScript绘图的Canvas。这一部分的功能大多数都得到了浏览器很好的支持。
  • 曾经属于HTML5的功能。这一部分源自WHATWG最初制定的HTML5规范,其中大多数功能需要JavaScript且支持富Web应用开发。最重要的包括本地数据存储、离线应用和消息传递
  • 有时候会被称为HTML5的功能。这些通常是指下一代功能,虽然它们从未进入过HTML5标准,但人们还是经常会把它们与HTML5相提并论。这部分包括CSS3和地理定位。

令人不解的是,导致标准这么令人困惑的不仅仅是那些不懂技术的管理者和技术作者,甚至连W3C都在有意无意地模糊“真正的”HTML5(已有标准)和“宣传用”版本(包括所有新冒头的技术和其他乱七八糟的东西)之间的界限。举个例子,官方W3C标志网站(www.w3.org/html/logo)鼓励人们生成用于宣传CSS3和SVG的HTML5标志,而前两个标准在HTML5出现之前就已经在开发了。

HTML:活着的语言

从W3C到WHATWG,然后再回到W3C,这个过程导致了相当罕见的转换与磨合。从技术上说,什么是或什么不是HTML5由W3C说了算。但与此同时,WHATWG一直在设计未来的HTML功能。直到最近,他们才不再把自己的工作成果称为HTML5,而是简单地称为HTML,表明HTML还会继续活下去。

因为HTML是一门活着的语言,所以HTML页面永远不会作废,也不会无法阅读。HTML页面永远不需要版本号(甚至连文档类型声明都不需要),Web开发人员也永远不需要为了让它能在新浏览器中运行,而把自己的标记从一个版本“升级”到另一个版本。

因为HTML是一门活着的语言,所以任何时候在HTML标准中都可能增添新功能(和新元素)。是否使用这些功能取决编写网页的人,而是否支持这些功能则取决开发浏览器的人。但所有功能都不再与特定的版本号紧密相关。

Web开发人员听到这么说,第一反应通常是大惑不解。毕竟,谁希望浏览器对标准的支持各不相同,而谁又愿意在选择功能时只凭它们将来会得到支持这个可能性呢?然而,冷静下来想一想,大多数Web开发人员还是不情愿地接受了这个现实:不管是好是坏,这不正是今天浏览器的现状嘛,而且从Web诞生的那一天起始终都是这样的。

前面我们解释过,今天的浏览器乐于接受支持一大堆乱七八糟的功能这个现实。你可以在激进的XHTML页面中加上像<marquee>元素(用于创建滚动文本,已废弃)这样被认为是倒行逆施的东西,任何浏览器都不会反对。类似地,即便是在对最老标准的支持方面,有些浏览器也仍然存在一些广为人知的遗漏。比如,有些浏览器开发商在完整地支持CSS2之前就开始实现CSS3,结果很多CSS2特性后来都没有实现。唯一的区别就是HTML5现在把“活着的语言”变成了常规状态。同样,就像我们正在用新的、创新性的一章来介绍HTML一样,它经过了一番轮回终于又恢复了它的本来面貌,这不也正是一个天大的讽刺吗?

提示 要了解当下正在发展中的HTML,包括我们称为HTML5的部分和少量但始终在变化的、新的、还没有得到支持的功能,请访问http://whatwg.org/html。要关注有关HTML但不那么官方的新闻,可以访问WHATWG的博客http://blog.whatwg.org。

HTML5的三个主要原理

此时此刻,有的读者可能已经按捺不住了,迫不急待地想知道真正的HTML5页面到底是什么样子的。不过在此之前,有必要先了解一下制定HTML5规范的那些人当时是怎么想的。只有理解了这门语言背后的设计思想,才能真正明白本书将要介绍的那些古怪的行为、复杂的现象和偶尔会让人抓耳挠腮的问题。

不破坏Web

“不破坏Web”的意思是标准不应该引入导致已有的网页无法工作的改变。这种事极少发生。

“不破坏Web”还意味着标准不应该出人意料地更改规则,不能认定今天还完美无缺的网页到了明天就要作废(即使可以使用也要作废)。比如,XHTML 2 破坏了Web,因为它要求马上就显著改变以前编写网页的方式。没错,原来的网页还能用,但那都是浏览器支持向后兼容的功劳。如果你为将来打算,想按照最新标准重写网页,就得浪费数不清的时间去纠正XHTML 2 已经明令禁止的“错误”。

HTML5的立场不一样。HTML5之前可以接受的,在HTML5中照样可以接受。事实也是,符合HTML 4.01标准的网页在HTML5中仍然是有效的。

注意 与以往的标准不同,HTML5不仅向浏览器开发商明示该支持什么,还利用文档说明并规范化了它们原来的处理方式。由于HTML5标准描述的都是事实,而不是抛出一堆理想的规则了事,因此它有望成为有史以来受支持程度最高的Web标准。

 
HTML5怎么处理废弃元素

因为HTML5支持所有HTML,所以它支持很多被认为是废弃的功能。其中包括像<font>这样的格式化元素,被人厌恶的<blink><marquee>等特效元素,以及难对付的HTML框架体系。

这种无所不包的开放性是令很多HTML5新手感到困惑的一个原因。一方面,HTML5无论如何还是应该禁止使用这些过时的元素,因为它们已经很多年没有出现在官方规范里了。另一方面,现代浏览器依然悄无声息地支持着这些元素,而HTML5就是要体现浏览器真实的处理方式。那么这个标准到底要怎么做呢?

为解决这个问题,HTML5规范包含两个独立的部分。第一部分面向Web开发人员,要求摒弃过去的那些坏习惯和被废弃的元素。通过使用HTML5验证器可以确保遵循HTML5标准的这一部分。

第二部分,也是HTML5规范中篇幅更长的部分,针对的是浏览器开发商。它们需要支持HTML中存在的一切,以做到向后兼容。理想情况下,HTML5标准中应该包含足够的信息,让人能够据以从头开发一个新浏览器,而且无论是处理新的还是旧的标记,该浏览器都应该能够与今天的现代浏览器完全兼容。这一部分标准就是告诉浏览器如何处理那些官方不鼓励使用但仍然必须支持的废弃元素。

有时候,HTML5规范也会对浏览器应如何处理各种错误(如漏写或错配了标签)作出正式规定。这一点其实很重要,因为它可以确保有缺陷的页面在不同浏览器中都能够得到同样的处理,甚至都规定了将页面映射为DOM(Document Object Model,文档对象模型,即内存中表现页面元素的对象树,供JavaScript使用)这么细节的问题。为了写出标准的这个冗长又乏味的部分,HTML5的制定者们在现代浏览器上进行了彻底的测试,以便发现还没有作出规定的错误处理行为。然后再把该行为加到标准中。

修补牛蹄子路

牛蹄子路(cowpath)指的是高低不平但使用频率很高的路,通过它可以从一个地方到达另一个地方。之所以存在牛蹄子路,就是因为有人走。也许这条路走起来不是最舒服的,但某种程度上却是最实际的解决之道。

HTML5把标准化这些非官方(但广泛应用)的技术作为一个目标。或许与利用新方法修的高速公路相比,牛蹄子路没有那么平坦宽阔,但它赢得胜利的机会更大。因为对于一般的网站设计人员来说,切换到新技术可能会超出他们的能力范围,或者他们根本就没有兴趣。更大的问题在于,使用旧浏览器的访客无法因为新技术而受益。XHTML 2企图把人们赶出牛蹄子路,结果败得非常惨。

注意 修补牛蹄子路有一个明显的好处:它使用已经得到浏览器某种程度支持的既定技术。假设有一种只被七成浏览器支持的漂亮的新技术,还有一种任何情况都能工作但不那么雅观的hack,Web开发人员始终都会选择不那么雅观的hack,因为它适合更多的用户。

“修补牛蹄子路”的方法也需要折中。有时候,这意味着要包容那些得到广泛支持但设计却很拙劣的功能。HTML5的拖放就是一个例子,这个功能完全以微软为IE5设计的拖放机制为基础。尽管这个拖放功能目前得到了所有浏览器的支持,但由于使用起来不灵活而且过度复杂,因此几乎没有人不反感它。为此,不少的Web设计人员也抱怨“HTML5不仅鼓励不良行为,而且还给它们正名。”

实用至上

这个原理很简单:改变应该以实用为目的。改变得越多,代价也就越大。Web开发人员可能更希望标准是精心设计、始终如一,而且是没有怪异行为的。但这个理由还不足以改变一门已经用来创建了数十亿网页的语言。当然,到底需要不需要改变还是要由某个人根据利害来评判。而现有网页都是怎么做的或者说试图怎么去做,可以作为很好的判断依据。

例如,YouTube是世界上第三受欢迎的网站,但由于HTML5之前的HTML不真正支持视频,YouTube一直都得依赖Flash插件。使用Flash插件没什么问题,因为只要是能上网的计算机,基本上都会安装这个插件。不过也有例外,比如某些公司会锁定它们的计算机,不允许安装Flash,另外苹果的设备(如iPhone和iPad)也不支持Flash。不管有多少计算机安装了Flash,扩展HTML标准,使其直接支持人们今天使用Web的一种最基本方式——看视频,毋庸置疑是有必要的。

而HTML5中添加了更多交互功能的背后也有着同样的动机。像拖放、可编辑的HTML内容、在Canvas中绘制二维图形等,都是同样的情况。这些功能在我们身边的网页中并不鲜见,只不过有的通过Adobe Flash或微软Silverlight等插件实现,而有的则是利用JavaScript库或(更艰苦地)完全通过手工编写JavaScript代码来实现。因此,为什么不在HTML标准中加入官方的支持,让这些功能在所有浏览器中都能一致地工作呢?

注意 Flash等浏览器插件不会一夜之间就消失(甚至随后几年都不会)。尽管HTML5有很多创新,但通过它来构建复杂的图形界面应用,仍然不是件轻而易举的事(建议读者到www.flasharcade.com中去看一看那些基于浏览器的游戏)。不过,HTML5的终极目标很清楚:让网站不依赖插件也能够提供视频、丰富的交互功能以及各种漂亮的效果。

HTML5语法

如前所述,HTML5放松了某些规则。这是因为HTML5的制定者想让这门语言更紧密地反映浏览器的现实。换句话说,他们想缩小“可以工作的网页”与“根据标准是有效的网页”之间的差距。接下来,我们就介绍一下HTML5改变的语法规则。

放松的规则

在初次体验HTML5文档之后,我们知道HTML5并不要求网页中必须包含<html>、<head>和<body>元素(尽管它们的存在有时候非常有用)。但HTML5的轻松态度还不止于此。

HTML5不区分大小写,因此类似下面这样的标记是没有问题的:

<P>Capital and lowercase letters <EM>don't matter</eM> in tag names.</p>.

HTML5还允许省略关闭空元素(void element)的斜杠;所谓空元素,就是不会嵌套内容的元素,如<img>(图像)、<br>(换行)或<hr>(水平线)。以下是三种添加换行的等价方式:

I cannot<br />
move backward<br>
or forward.<br/>
I am caught

HTML5也修改属性的语法规则。属性值中只要不包含受限的字符(比如>、=或空格),就可以不加引号。下面这个<img>元素就利用了这一点:

<img alt="Horsehead Nebula" src=Horsehead01.jpg>

只有属性名没有属性值也可以。虽然XHTML要求必须采用如下冗余的语法将复选框设置为选中状态:

<input type="checkbox" checked="checked" />

但现在可以只包含属性名,回到HTML 4.01时代的传统短语法形式:

<input type="checkbox" checked>

对某些人来说,HTML5最令人担心的还不是这些。他们担心那些经常改变风格的开发人员会在严格的和松散的语法之间摇摆不定,特别是在一个文档内部也经常转换风格。可是,这种情况在XHTML时代同样存在。无论是严格还是松散,良好的风格都取决于Web设计师,而浏览器则会无条件地接受你扔给它的任何东西。

如果能做到如下几点,基本上就可以算作良好的HTML5风格了。

  • 包含可选的<html>、<body>和<head>元素。要给页面定义自然语言,<html>是最理想的地方;而<body>和<head>有助于将页面内容与其他页面信息分离。
  • 标签全部小写。虽然不是必须这么做,但这种形式很常见,输入起来要轻松容易得多(因为不需要按Shift键),而且不会让人触目惊心。
  • 为属性值加引号。加引号是有理由的——防止你在不经意间犯错。要知道,没有引号的话,一个无效字符就可能破坏整个页面。

HTML5验证

没准儿新的松散的HTML5语法让你觉得很舒服。没准儿,一想到欢快的浏览器背后可能隐藏着不一致的、到处都是错误的标记,你简直夜不能寐。如果你不幸是后一种情况,那么一定会高兴听到这个消息:有验证工具可以帮你抓住那些与HTML5推荐标准不相符的标记,甚至都不会惊扰浏览器。

以下就是HTML5验证器会关注的一些可能的问题:

  • 缺少必需的元素(例如<title>元素);
  • 有开始标签但没有结束标签;
  • 标签嵌套错误;
  • 不包含必要属性的标签(例如没有src属性的<img>元素);
  • 元素或内容放错了地方(例如把文本直接放在了<head>区块中)。

Dreamweaver和Expression Web等Web设计工具都有它们自带的验证器,但只有最新版本才支持HTML5验证。实际上,你还可以使用在线验证工具,下面我们展示如何使用W3C标准组织提供的流行的验证器。在浏览器中,打开http://validator.w3.org

HTML5元素家族

到目前为止,本文集中讨论了HTML5语法的变化,但更重要的则是新增、减少及改变了HTML哪些支持的元素。接下来的几节将分别讨论这些方面的变化。

新增的元素

表1列表出这些新元素。

类别 元素
用于构建页面的语义元素 <article>、<aside>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<nav>、<section>、<details>、<summary>
用于标识文本的语义元素 <mark>、<time>、<wbr> (以前就支持,但现在已经正式列入规范)
Web表单及交互 <input>(不是新元素,但增加了很多了类型)、<datalist>、<keygen>、<meter>、<progress>、<command>、<menu>、<output>
音频、视频及插件 <audio>、<video>、<source>、<embed> (以前就支持,但现在已经正式列入规范)
Canvas <canvas>
非英语支持 <bdo>、<rp>、<rt>、<ruby> HTML5规范http://dev.w3.org/html5/markup

删除的元素

HTML5一方面添加了新元素,另一方面也从官方标准中剔除了少量元素。这些元素仍然可以得到浏览器支持,但任何遵循规范的HTML5验证器都会敏感地查出它们的藏身之所,并给出错误提示。

最明显的一点是,HTML5沿袭了不欢迎表现性元素的思想(最初萌发于XHTML)。所谓表现性元素,指的是那些仅仅是为网页添加样式的元素,而连最菜的Web设计人员也知道那是样式表该干的事儿。被剔除的元素都是专业开发人员很多年没有用过的元素(如<big>、<center>、<font>、<tt>和<strike>)。HTML的表现性属性也与之“同归于尽”了,没有什么必要在这里列出来了。

此外,HTML5进一步埋葬了Web开发人员原来已经摒弃的HTML框架。最初,HTML框架似乎是在浏览器窗口中显示多个网页的不错方式,但如今,框架往往意味着严重的可访问性问题,难以适应搜索引擎、辅助软件和移动设备。而有意思的是,<iframe>元素(通过它可以将一个网页放在另一个网页中)倒是侥幸得以保留。究其原因,主要是Web应用经常要利用<iframe>实现一些集成任务,比如在网页中包含YouTube窗口、广告单元和谷歌搜索框等。

还有另外一些元素,由于冗余或容易导致误会等原因也被剔除了,比如<acronym>(代之以<abbr>)和<applet>(因为<object>更好)。但元素家族的绝大部分成员照旧还生活在HTML5时代。

注意 HTML5元素家族中保留的元素超过100个。除此之外,差不多有30个新元素,还有大约10个有显著改变。要了解完整的元素列表(以及哪些是新元素、哪些改变了),请参考http://dev.w3.org/html5/markup/。

HTML5现状综述

如前所述,HTML5是一个奇特的混合体。在让某些不受约束的HTML规则重现生机(并得以标准化)的同时,HTML5还引入了一些只有少数最新浏览器才支持的前沿功能。

在考虑兼容性的情况下,可以将HTML5的功能归入以下三类。

  • 已经可用的功能。包括那些以前就得到了很好的支持,但并未列入HTML标准的功能(如拖放)。此外,还包括只要额外做点工作就能在比较老的浏览器中使用的功能。
  • 平稳退化的功能。例如,<video>元素提供了一种后备机制,可以为老的浏览器提供替代内容(比如使用Flash插件的视频播放器)。(只显示一条错误消息就很不礼貌了,不能成为平稳退化的模范!)这一类还包括一些非本质的装饰性功能(例如表单中的占位符文本,以及像圆角和投影之类的CSS3属性),较老的浏览器完全可以忽略它们。
  • 需要借助JavaScript的功能。很多HTML5的新功能都源自Web开发人员费尽心机做出来的东西。因此,HTML5中的某些功能完全可以使用优秀的JavaScript库来实现(最差的情况,完全通过手工编写JavaScript代码也可以写出来),这一点也不奇怪。通过JavaScript来实现这些功能很费事儿,如果你觉得哪项功能很重要,需要用JavaScript来实现,那么就先对所有人都使用该实现,等HTML5中相应的功能可以使用了,再使用HTML5提供的功能。

了解浏览器支持情况

到底能使用哪些HTML5的功能,最终还是由浏览器开发商说了算。如果它们不支持某个功能,无论标准里怎么说,最终还是不能用。今天,主流的浏览器差不多有四五个(不包括智能手机、iPad等能上网的设备中的移动浏览器)。作为个体,没有几个Web开发人员能自己完全测试每个浏览器的每一项功能,更不用说检测那些还被很多人使用的老浏览器的支持情况了。

好在,有一个网站——http://caniuse.com可以帮我们。这个网站可以详细地列出每一款主流浏览器对HTML5的支持情况。更重要的是,它还能让你针对实际需要的功能查询浏览器。下面是这个网站的使用指南。

浏览器装机情况统计

了解浏览器装机情况是使用HTML5的另一个要关注的问题。这个统计信息可以告诉你,有多少用户的浏览器支持你想使用的功能。为此,可以查看流行的GlobalStats站点:http://gs.statcounter.com

通过Modernizr检测功能

今后几年,总会有一些访客的浏览器不支持HTML5,这是事实。但这并不影响你使用HTML5的功能,前提是你要甘心多花点时间进行一些变通或创建一个平稳退化的方案。不管怎样,肯定都离不开JavaScript代码的帮助。典型的模式是:加载页面,通过脚本检测某个具体的功能是否可用。

遗憾的是,由于HTML5本质上是一个松散的相关标准的集合,因此不可能通过一次测试就能验证所有功能。相反,为了检测不同的功能,必须分别运行各种不同的测试——甚至,有时候还会测试浏览器是否支持某项功能的某个部分,而测试速度会非常快。

检测支持通常需要检查某个可编程对象的属性,或者创建一个对象并以特定的方式使用它。不过,在按照这种思路编写测试代码之前,一定要三思而行;因为弄不好,可能会非常麻烦。比如,由于种种原因,你的测试代码在某些浏览器上总是失败,或者过不了多久,又要重写测试代码。所以,我建议你使用Modernizr(www.modernizr.com),它是一个小巧的、持续更新的工具,专门用于测试浏览器对很多HTML5及相关功能的支持情况。

参考文档