揭祕 HTML5 和 CSS3

互聯網的發展老是在不斷地催生新技術的產生，而 HTML5 和 CSS3 是最近一直被討論的熱門話題，對於每一個互聯網開發者尤爲是前端開發者而言，都充滿了好奇與渴望。那麼 HTML5 和 CSS3 究竟有哪些讓咱們眼前一亮的東西呢？

HTML5

HTML 5 草案的前身名爲 Web Applications 1.0，於 2004 年被 WHATWG 提出，於 2007 年被 W3C 接納，併成立了新的 HTML 工做團隊。在 2008 年 1 月 22 日，第一份正式草案發布。HTML5 是近十年來 Web 開發標準最巨大的飛躍。和之前的版本不一樣，HTML5 並不是僅僅用來表示 Web 內容，它的新使命是將 Web 帶入一個成熟的應用平臺，在 HTML5 平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。那麼咱們來看一下 HTML5 的技術概覽有哪些：

HTML5 新增和移除的元素

HTML5 新增了不少多媒體和交互性元素如 video，audio，在 HTML4 當中若是要嵌入一個視頻或是音頻的話須要引入一大段的代碼，還有兼容各個瀏覽器，而 HTML5 只須要經過引入一個標籤就能夠，就像 img 標籤同樣方便。在頁面佈局和內容實現方面 HTML5 新增了不少結構化標籤元素以及塊級及語義元素，若是你要用 HTML 表示一個文件的上傳進度條，在 HTML5 中你能夠用 progress 這個元素來表示，它有一個 value 屬性描述了已經完成了多少任務，還有一個屬性 max 描述了這個任務一共須要多少，還能夠經過 DOM 接口獲得這個進度條的 position 屬性（只讀），也就是任務完成的百分比。Youtube 在 HTML5 技術上已經作了一個嘗試，www.youtube.com/html5 是用 HTML5 作的一個 DEMO，從整個頁面源代碼來看，很是簡潔。固然 HTML5 也對一些元素新增了一些屬性，如 input 和 textarea 的 placeholder 屬性，至關於輸入框的輸入提示，script 有一個 async 屬性會影響腳本的加載和執行。對於全部的 HTML 共有的屬性咱們一般把它稱做是「全局屬性」，如 class，id，tabindex，title，HTML5 也新增了一些全局屬性，如 contenteditable，contextmenu，hidden 等屬性。HTML5 還增長了對於微數據的支持，如 HTML5 新增的 item，itempro，subject 等屬性。

固然 HTML5 也移除了一些表示頁面展示的元素，如 font，center，strike 等，這些本應該是 CSS 來作的，因此仍是很好理解的，也移除了一些影響網站可訪問性的元素如 frame，frameset，noframe 以及一些不經常使用的元素如 acronym，而採用 abbr 來表示縮寫。HTML5 還移除了一些影響客戶端兼容性的 HTML 熟悉，如 link 的 rev 屬性，td 的 scope 屬性；HTML5 也移除了一些表示頁面展示的屬性如一些元素的 align，bgcolor 屬性。

HTML5 對錶單的支持

HTML5 提供了強大的控件類型如 url，email，date，tel 等，強大的約束屬性，如 required 表示必填，文件上傳的 accept 屬性，以及一些表單重複元素模型的支持，HTML5 在提交表單的時候還能夠設置提交的方式爲 XML 提交方式，這樣服務器端接收到的數據將是 XML 格式，HTML5 的表單被定義爲「Web Forms 2.0」，目前 Opera 9.5+ 對 Web Forms 2.0 的支持較爲完美。

HTML5 DOM 變化

HTML5 在 DOM LEVEL 2 HTML 方面不少都是繼承自 HTMLDocument 的接口，固然 HTML5 在 DOM 上也有一些值得注意的新成員，如：支持 getElementsByClassName，能夠根據 class 類名選擇元素，getSelection() 將會返回當前選中的對象，在選擇器上面有兩個方法 querySelector 和 querySelectorAll 能夠根據 CSS 選擇符來獲取要查詢的元素，至關於 YUI 3 中的 Y.one 和 Y.all。

HTML5 的 Javascript APIs

HTML5 在 Javascript 上面新增了哪些 API 呢？

• Video/Audio：HTML5 爲 Video 和 Audio 提供了 API 來讓開發者控制他們本身的用戶界面，如能夠播放或暫停媒體內容。
• Canvas：Canvas 是一個新的 HTML 元素，這個元素能夠被 Script 語言（一般是 JavaScript）用來繪製圖形。例如能夠用它來畫圖、合成圖象、或作簡單的（和不那麼簡單的）動畫。Canvas 是一個神奇的東西，它給個人第一感受就像是在用 Photoshop 同樣，它的每個方法跟 Photoshop 是那麼地類似，經過 canvas.getContext(‘2d’) 就能夠獲得這個 Canvas 的 API，你能夠經過 fillStyle 設置其填充顏色或是經過 strokeStyle 設置其描邊顏色，甚至它畫路徑的操做跟 Photoshop 的鋼筆操做更是不謀而合。Canvas 在不少網站都已經有應用，甚至還能夠用 Canvas 來編寫 Web Game。
• Drag&Drop：在指示設備的視覺媒體中，」Drag」 的操做就是鼠標按下（mousedown）並伴隨着鼠標移動（mousemove）的事件，而 」Drop」 則是鼠標釋放時觸發的事件。在 Drag&Drop 裏定義了 DataEvent 和 DataTransfer 接口，同時當拖拽操做發生時會觸發如 dragstart，dragenter，dragleave，drop，dragend 等事件。
• Web Workers：讓 JavaScript 多線程，能夠在後臺作不少工做而不會阻斷當前的瀏覽器操做。
• Geolocation：地理位置定位，運行 navigator.geolocation.getCurrentPosition(success, error) 這個方法時瀏覽器會提示是否要共享你的地理位置，若是選擇共享，則會回調 success 函數，success 函數有一個參數是 position 對象，這個 position 對象有一個 coords 對象，coords 對象包含了不少地理位置信息如 latitude（維度）和 longitude（經度），這樣就能夠知道你的具體位置了，這個功能在一些手機如 iPhone 上已經有普遍的應用了。
• Application Cache：這是 HTML5 對於離線應用的支持，經過在 HTML 元素上加一個屬性 manifest，瀏覽器會提示你是否要將數據緩存到客戶端，若是用戶選擇了容許，則會按照指定的 manifest 文件列表緩存須要的文件，當你的網絡不可用時，你仍是可使用這個應用的。對於離線應用，Google 也開發了 Google Gears 瀏覽器擴展，不過最後 Google 轉投 HTML5 可能也是看到了 HTML5 存儲和離線應用的這種優點。
• Storage：Webkit 已經實現了 database storage，你能夠像後端操做數據庫同樣查詢數據並執行一些操做。還有一種存儲是鍵值對存儲，如 sessionStorage 和 localStorage，能夠經過 setItem 和 getItem 來存儲與取值，相對於 Cookie 的存儲來講，存儲的容量要大不少。
• X-Document Messaging：瀏覽器由於安全和隱私的緣由，阻止了不一樣域之間文檔的通訊，雖然這是一個安全限制，可是對於那些沒有危害的不一樣域的文檔通訊帶來了不少問題，可是 HTML5 能夠實現這種跨文檔通訊，讓咱們能夠不用管源域是來自哪裏，同時能夠防止腳本攻擊。

HTML5 讓你心動了嗎？那麼 HTML5 何時會成爲標準呢？聽說要等到 2022 年，這有一個頗有意思的網站 ishtml5readyyet.com/ 告訴你還有多少天 HTML5 會真正到來。

CSS3

CSS3 對於咱們 Web 開發者來講不僅是新奇的技術，更重要的是這些全新概念的 Web 應用給咱們帶來更多無限的可能性，也極大地提升了咱們的開發效率。咱們將沒必要再依賴圖片或者 JavaScript 去完成圓角、多背景、用戶自定義字體、3D 動畫、漸變、盒陰影、文字陰影、透明度等提升 Web 設計質量的特點應用。

CSS3 在選擇器上面的支持

利用屬性選擇器咱們能夠根據屬性值的開頭或結尾很容易選擇某個元素，利用兄弟選擇器能夠選擇同級兄弟結點或緊鄰下一個結點的元素，利用僞類選擇器能夠選擇某一類元素，CSS3 在選擇器上的豐富支持讓咱們能夠靈活的控制樣式，而沒必要爲了選擇某些元素給他們加上如」odd」或」even」這樣的類名。

CSS3 在樣式上的支持

有一個調查說開發者最期待 CSS3 的特性是什麼，最後票數最多的是「圓角」，不錯，圓角這個功能能夠給咱們這些前端工程師省去不少時間和精力去切圖拼湊一個圓角。CSS3 還支持陰影，盒陰影以及文本陰影，漸變，以前你多是經過IE的濾鏡看到過，其實 CSS3 實現起來更加方便。@font-face 能夠自定義字體，若是用傳統的方式，VD 把一個帶有特殊文字的設計圖給你讓你來實現的話你可能會把它作成一個圖片，而經過 CSS3 用 @font-face 就能夠了。CSS3 對於連續文本換行也新增了一個屬性 word-wrap，你能夠設置其爲 normal（不換行）或 break-word（換行），這解決了連續英文字符出現頁面錯位的問題，也不須要後端去截取這個連續字符。使用 CSS3 你還能夠給邊框加背景，這在 iPhone 上也有應用的例子。CSS3 在背景上支持背景調整大小，如當你用一張大圖要作一個小的元素背景時能夠經過 background-size 來調整背景圖的大小來適應這個元素。CSS3 支持 opacity，rgba 和 hsl/a，opacity 和 rgba 的區別是 opacity 設置的透明對其內容也會產生影響，而 rgba 只對你應用的元素產生影響。CSS3 在佈局上對於盒模型提供了支持，能夠設置 box-sizing 爲 content-box 或 border-box，應用爲 content-box 就是正常的模式，而應用爲 border-box 和 IE5.5 的盒模型很類似，即元素的寬度包括 border 和 padding，這個在佈局上可能會比較方便，不用去管到底這個元素會佔用多大的寬度，而用 content-box 還須要手動計算一下這個元素實際佔用的寬度。

CSS3 對於動畫的支持

CSS3 支持的動畫類型有：transform（變換）、transition（過渡）和 animation（動畫）。你能夠對特定的屬性設置 transition，transiton 和 animation 的區別不大，animation 的動畫是本身定義的，面向的更多的是腳本開發者，每每更加複雜。

爲了使用大部分 CSS3 特性，咱們不得不與原來的屬性一塊兒使用生產商專有擴展。緣由是直到如今，大部分瀏覽器只支持部分 CSS3 屬性。最多見的私有屬性是用於 Webkit 核心瀏覽器的（好比 Safari），它們以 -webkit- 開始，以及 Gecko 核心的瀏覽器（好比，Firefox），以 -moz- 開始，還有 Konqueror（-khtml-）、Opera（-o-）以及 Internet Explorer（-ms-）都有它們本身的屬性擴展（目前只有 IE 8 支持 -ms- 前綴）。

那咱們在開發中該如何去用 CSS3 呢？

我以爲首先是遵循一個優雅降級的原則，好比前面談到的圓角，咱們能夠針對 Firefox 和 Safari 等這些支持圓角的瀏覽器中應用 CSS 圓角，而那些不支持 CSS 圓角的瀏覽器則顯示爲直角。其次就是對於不支持 CSS3 的瀏覽器可使用 JavaScript 來實現，如 CSS3 任何元素支持 :hover 僞類，咱們就能夠對只支持連接 :hover 的 IE6 用 JS 來實現。最後就是在向用戶或老闆推廣新技術的同時也要關注他們的目標與可行性，不能爲了技術而技術。

文章轉載地址： fed.taobao.org/blog/2009/1…