作為處于發展階段的新一代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 新增的元素與相應的API在其中發揮了重要的作用，相信很快就會和大家見面。
豆瓣電台桌面版（Mac）界面截圖
浏覽器擴充
Douban Pulse是一個 Chrome 浏覽器的豆瓣擴充，它可以讓使用者随時關注友鄰動态、參與互動，同時收聽“豆瓣電台”。整個擴充完全基于豆瓣API并結合HTML5與CSS3特性完成，除了使用代碼繪制界面，CSS Animation完成簡單動畫、元素實作電台外，還使用了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應用的核心。