作為處於發展階段的新一代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 iphone 版（labs 產品，非官方應用）介面截圖
結束語
當然除此之外還有很多激動人心的 html5 特性沒有提及，比如通訊方面的web sockets、 web workers、桌面提醒 notifications 以及倍受 lbs 應用青睞的 geolocation 等等，大家在日常開發中也可以嘗試使用，享受 html5 為我們帶來的驚喜與便利。
雖然正式標準預計要 2022 年才正式發布，但目前 html5 已經被廣泛實現，隨著規範的不斷完善、瀏覽器支援度的提高，其優勢也愈加明顯，也許會成為未來web應用的核心。
HTML5 應用快取
html5 引入了應用程式快取，這意味著 web 應用可進行快取，並可在沒有網際網路連線時進行訪問。應用程式快取為應用帶來三個優勢 新增快取 manifest 檔案可分為三個部分 network 在此標題下列出的檔案需要與伺服器的連線，且不會被快取 fallback 在此標題下列出的檔案規定當頁面無...
HTML5的應用快取
使用應用快取可以得到以下益處 用法 只需要在你的頁面頭部加上乙個 manifest 的屬性就可以了。cache.manifest檔案的書寫方式 cache manifest v1 2011 08 14 這是乙個完整的頁面 index.html cache.html style.css image1....
SASS在HTML5移動應用開發中的應用方法
一 什麼是sass sass是一種css的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得css的開發，變得簡單和可維護。本文總結了sass的主要用法。二 安裝和使用 2.1 安裝 sass是ruby語言寫的，但是兩者的語法沒有關係。不懂ruby，照樣使用。只是必須先安裝ruby，然後再...