第一章 1.5 无插件范式
过去,很多功能只能通过插件或者复杂的 hack(本地绘图 API、本地 socket 等)来实现,但在 HTML5 中提供了对这些功能的原生支持。插件的方式存在很多问题:
插件安装可能失败;
插件可以被禁用或屏蔽(例如 Apple 的 iPad 就不支持 Flash 插件);
插件自身会成为被攻击的对象;
插件不容易与 HTML 文档的其他部分集成(因为插件边界、剪裁和透明度问题)。
虽然一些插件的安装率很高,但在控制严格的公司内部网络环境中经常会被封锁。此外,由于插件经常还会给用户带来烦人的广告,一些用户也会选择屏蔽此类插件。这样的话,一旦用户禁用了插件,就意味着依赖该插件显示的内容也无法表现出来了。
在已经设计好的页面中,要想把插件显示的内容与页面上其他元素集成也比较困难,因为会引起剪裁和透明度等问题。插件使用的是自带的渲染模型,与普通 Web 页面所使用的不一样,所以当弹出菜单或者其他可视化元素与插件重叠时,会特别麻烦。此时,HTML5 却可以站出来,挥舞着它的原生功能魔棒,对这类问题笑而不语,它可以直接用 CSS 和 JavaScript 的方式控制页面布局。实际上这是 HTML5 的最大亮点,显示了先前任何 HTML 版本都不具备的强大能力。HTML5 不仅仅是提供新元素支持新功能,更重要的是添加了对脚本和布局之间的原生交互能力,基于此,我们可以实现以前不能实现的效果。
以 HTML5 中的 canvas 元素为例,有很多非常底层的事情以前是没办法做到的(比如在HTML4 的页面中就难画出对角线),而有了 canvas 就可以很轻易地实现了。更为重要的是新API 释放出来的潜能,以及通过寥寥几行 CSS 代码就能完成布局的能力。基于 HTML5 的各类API 的优秀设计,我们可以轻松地对它们进行组合应用。比如,从 video 元素中抓取的帧可以显示在 canvas 里面,用户点击canvas 即可播放这帧对应的视频文件。这只是一个使用原生方法实现插件功能的示例。其实,当工作不再基于黑盒后,开发反而会变得更简单。HTML5 的不同功能组合应用为 Web 开发注入了一股强大的新生力量,这也是我们为什么决定写一本关于HTML5 编程的书,而不单单是介绍那些新元素的原因。
HTML5 包括什么,不包括什么
那么,HTML5 到底包括些什么?仔细阅读过规范的读者,可能会发现本书中讲解的很多功能其实在规范中是没有的。例如,Geolocation 和 Web Workers 就不在规范中。那为什么还要将它们纳入本书的讨论范围呢?炒作?当然不是!
很多 HTML5 的研究成果(如 Web Storage 和 Canvas 2D)起初都是 HTML5 规范的一部分,后来移出来列入了单独的规范中,这么做是为了让 HTML5 规范更好地突出重点。在成为官方规范之前,先单列出来进行讨论和编辑不失为一个好办法。这样的话,即使存在争议,也不会影响到整个规范。
在讨论某个功能的时候,特定领域的专家可通过邮件列表的方式共同探讨,不会因为喋喋不休而引起激辩。业界仍然倾向于把原始功能集都视为 HTML5,其中包括 Geolocation。这样的话,HTML5 不仅涵盖了核心的标记元素,同时也可以包括很多很酷的新 API。写这本书的时候,下面这些功能也属于 HTML5:
Canvas(2D 和 3D)
Channel 消息传送
Cross-document 消息传送
Geolocation
MathML
Microdata
Server-Sent Events
Scalable Vector Graphics (SVG)
WebSocket API 及协议
Web Origin Concept
Web Storage
Web SQL database
Web Workers
XMLHttpRequest Level 2
可以看到本书中所讨论到的 API 大多都在上面的列表中。为什么选择这些 API 呢?我们挑选的都是基本成熟的功能,也就是说这些功能已经得到了不止一种浏览器的支持,其他功能(不太成熟的)可能只在个别浏览器的某个 beta 版中可用,或者基本上只是个概念。
对于我们要讨论的 HTML5 功能,本书将提供各种浏览器的最新支持情况。不过,不管现在支持情况如何,不久的将来肯定会变,因为 HTML5 发展的速度非常快。不用担心,我们会推荐一些非常好的在线资源,用以查看当前(以及将来)浏览器的支持情况。www.caniuse.com网站按 照 浏 览 器 的 版 本 提 供 了 详 尽 的 HTML5 功 能 支 持 情 况 。 若 用 户 通 过 浏 览 器 访 问www.html5test.com的话,该网站会直接显示用户浏览器对 HTML5 规范的支持情况。
此外,本书的重点不是讨论使用某种模拟或者变通的方法让 HTML5 程序能够运行在旧浏览器上,而是着重关注 HTML5 规范本身,以及它的使用方法。也就是说,在本书中我们针对所讨论的每个 API 都会提供一些示例代码,开发人员可以直接拿来检测其可用性。因为检测用户代理的方式经常不可靠,所以我们使用特性检测。当然,还可以使用 Modernizr —— 一个 JavaScript库,它提供了非常先进的 HTML5 和 CSS3 检测功能。我们强烈推荐使用 Modernizr,因为它是检测浏览器是否支持某些特性的最佳工具。
对于 HTML 多说几句 |
“ 大家好,我是 Frank①,我喜欢画画。
我见过的第一个 HTML canvas 演示是一款简单的绘图程序,用户界面模仿的是微软的画图程序。尽管那落后于数码绘图几十年,并且当时只有个别浏览器支持,不过它却让我对其表现能力充满了期待。
当我开始数码绘图的时候,一般都使用安装在本地的桌面软件。不可否认,有些软件相当不错,但它们不具备 Web 应用的迷人特性。简而言之,这些软件都是离线的。想要共享数码作品,必须先从软件中将图像导出,然后上传至 Web。但是在 Web 的实时画布上协作讨论的话就不存在这种问题了。HTML5 应用可以省掉现在数码绘图流程中的导出环节,将整个创作过程都转移到线上,直至作品完成。
不能用 HTML5 实现的应用已经变得越来越少了。对于文本,Web 已然成为双向沟通的理想媒介。通过全 Web 的方式处理文本的应用程序比比皆是,而类似绘图、视频编辑、3D 建模等图形类程序才刚刚起步。现在,我们已经开发出了许多功能强大的单机软件,用以创建和欣赏图片、音乐、电影等。
更进一步,我们可以将这些软件移植到 Web 这个功能强大、无处不在的在线平台上。”
——Frank