HTML5 在豆瓣中的应用

作为处于发展阶段的新一代 Web 开发标准，HTML5 正以其简洁的书写规范、良好的兼容性以及务实的原则为越来越多的网站所接受，这是 WHATWG 与 W3C 共同努力的结果，作为标准的参与制订者，各浏览器厂商也在积极地为其提供支持。豆瓣一向热衷于新技术的探索和创新，前端团队在 HTML5 与 CSS3 方面也有过很多尝试，从视觉效果到富媒体内容再到本地存储等等，其中一部分已经应用于线上产品，还有一部分以浏览器扩展、客户端、手持设备应用等形式服务于不同需求的用户。下面我就来简单介绍下：

在线上产品中的应用

豆瓣目前主要的流量来源依然是 PC 端的 IE6，这是个颇具中国特色的无奈事实，但我们同时发现，豆瓣的 Chrome 和 Firefox 用户量在不断增长，特别是 Chrome，目前已超过 Firefox 位居第二，这让我们有了充足的理由在产品中加入 HTML5 特性来提升用户体验。

劝导用户升级浏览器是个需要耐心的工作，一般用户并不会因只停留在单方游说层面的所谓更快、更安全、更符合标准做出任何反应，毕竟改变习惯是个痛苦的决定，引导方式不正确会让用户烦躁，甚至对标准浏览器反目成仇。那何不换个思路，先为一部分勇于尝试新鲜事物的用户提供更为友好的视觉、交互体验，在他们享用的同时自然会对身边使用过时浏览器的朋友产生一种更为直观的影响。这虽然没有游戏玩家在比对速度与 3D 特效后产生为电脑更新换代的念头来得迅猛，但毕竟是种积极而不唐突的方式。

豆瓣确实这么做了。细心留意可以发现，在近期的产品 UI 中，圆角、阴影、背景渐变均由 CSS3 来完成，这也是视觉设计师与前端工程师加深交流的意义所在，使用 CSS3 来绘制界面节省了大量代码与图片，从而降低了工作量，也为公司节省了带宽，设计师在设计的同时也考虑了在无法识别 CSS3 的浏览器下元素对应的样式，让低端浏览器用户感受到另一种简约的风格。

表单验证方面，我们优先判断 Form 2.0 中新增元素的默认属性，比如 type、placeholder、pattern、required 等，脚本中对于类型、验证规则的处理只在不支持这些属性的浏览器中生效，让高级浏览器用户体会到原生的执行效率。在读书、电影条目方面我们也开始加入 Microdata 来实现强大的语义结构，让豆瓣不仅能够提供数据，还能提供数据定义。

HSL 是一个全新的色彩空间，它可以方便地定义色彩的色相、亮度、饱和度，这种定义方式对称于亮与暗，更类似于人类感觉颜色的方式。豆瓣小站的风格是用户自定义的，比如导航栏标签的背景色，但标签悬停时的颜色是由系统生成的，生成的规则便是增加当前背景色的饱和度，使其颜色比默认状态下更深，这在传统 RGB 色彩空间中是不方便做到的。

除此之外，豆瓣还在桌面客户端、浏览器扩展、手机应用等方面大量使用了 HTML5 与 CSS3 特性，相较于传统开发方式，这种利用前端技术实现的跨平台跨设备的开发思路有其明显的优势：学习成本低（HTML & CSS & JS）、开发周期短（类似于网站前端开发）、代码复用性强（除了针对不同设备的接口调用外，界面、逻辑部分大多可以复用），这也得益于浏览器厂商、手机厂商对于 HTML5 的充分肯定与积极支持。当然，Webkit 这个优质的浏览器引擎功不可没。

桌面客户端

OneRing 是由豆瓣首席架构师洪强宁开发的一款跨平台桌面应用框架，它支持使用前端技术开发桌面客户端。即将发布的豆瓣电台桌面版（PC/Mac）便是基于 OneRing 完成的，HTML5 新增的 <audio> 元素与相应的 API 在其中发挥了重要的作用，相信很快就会和大家见面。OneRing 项目主页： http://code.google.com/p/onering-desktop/

豆瓣电台桌面版（Mac）界面截图

浏览器扩展

Douban Pulse 是一个 Chrome 浏览器的豆瓣扩展，它可以让用户随时关注友邻动态、参与互动，同时收听“豆瓣电台”。整个扩展完全基于豆瓣 API 并结合 HTML5 与 CSS3 特性完成，除了使用代码绘制界面，CSS Animation 完成简单动画、<audio> 元素实现电台外，还使用了 Web Storage 与 Web Database 进行持久化本地存储。

比如利用 Local Storage 来保存登录信息与各种状态，用以再次开启扩展时迅速恢复关闭前的界面；之外还用于实时保存用户输入的文字信息，确保信息不会因网络中断、浏览器崩溃而丢失。比起 Cookie，Local Storage 的优势显而易见：存储空间大、数据不会随请求发送至服务器，存储空间独立等等，你还可以利用浏览器原生的 JSON 支持，用它来保存结构化对象。

Douban Pulse 偏好设置页界面截图

Douban Pulse 广播列表界面截图

Douban Pulse 的歌曲信息是保存在 Web Database 中的，虽然这种使用 SQL 语句通过 Web SQL Database API 操作数据的方式在 HTML5 规范中存在一些争议（W3C 也停止了该文档的维护），但书写 SQL 存储复杂数据的方式还是让前端开发者眼前一亮，Chrome 从 4.0 开始至今对其有着良好的支持。

Douban Pulse 电台已播放曲目列表截图

手机应用

如今 Webkit 在智能手机平台大行其道，iOS 中的 Safari Mobile、Android 的 Chrome Lite 都是很好的实践者，这也为基于 HTML5 的 web app 的开发提供了便利，利用一些诸如 PhoneGap 的框架还可以轻松地将 web app 变成 native app 上架 App Store。我也尝试了这种方式并将 Douban Pulse 成功地移植到了 iOS 上：

Douban Pulse iPhone 版（Labs 产品，非官方应用）界面截图

结束语

当然除此之外还有很多激动人心的 HTML5 特性没有提及，比如通信方面的 Web Sockets、 Web Workers、桌面提醒 Notifications 以及倍受 LBS 应用青睐的 Geolocation 等等，大家在日常开发中也可以尝试使用，享受 HTML5 为我们带来的惊喜与便利。

虽然正式标准预计要 2022 年才正式发布，但目前 HTML5 已经被广泛实现，随着规范的不断完善、浏览器支持度的提高，其优势也愈加明显，也许会成为未来 web 应用的核心。

注：据 wikipedia ，HTML5 的第一个推荐候选版预计将会在 2012 年或晚些时候发布，但正式推荐版预计在 2022 年推出。

关于作者 

石岩，豆瓣前端工程师，关注网站前端开发、移动设备应用开发，他的豆瓣主页： http://douban.com/people/mockee

另外，感谢豆瓣网张克军先生对 InfoQ 中文站的大力支持。

感谢崔康对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。