互聯(lián)網(wǎng)的發(fā)展總是在不斷地催生新技術(shù)的產(chǎn)生，而html5和CSS3是最近一直被討論的熱門話題，對(duì)于每個(gè)互聯(lián)網(wǎng)開發(fā)者尤其是前端開發(fā)者而言，都充滿了好奇與渴望。那么html5和CSS3究竟有哪些讓我們眼前一亮的東西呢？我在WebRebuild北京交流會(huì)和珍珠奶茶幫上給大家分享了《揭秘 html5和CSS3》，
PPT在這里：
html5code.net' title='html5模板網(wǎng)'>http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

html5

HTML 5草案的前身名為Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案發(fā)布。 HTML 5是近十年來(lái)Web開發(fā)標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML 5并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容，它的新使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在HTML 5平臺(tái)上，視頻，音頻，圖象，動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。那么我們來(lái)看一下html5的技術(shù)概覽有哪些：

html5新增和移除的元素

html5新增了很多多媒體和交互性元素如video, audio，在HTML4當(dāng)中如果要嵌入一個(gè)視頻或是音頻的話需要引入一大段的代碼，還有兼容各個(gè)瀏覽器，而html5只需要通過(guò)引入一個(gè)標(biāo)簽就可以，就像img標(biāo)簽一樣方便。在頁(yè)面布局和內(nèi)容實(shí)現(xiàn)方面html5新增了很多結(jié)構(gòu)化標(biāo)簽元素以及塊級(jí)及語(yǔ)義元素，如果你要用HTML表示一個(gè)文件的上傳進(jìn)度條，在 html5中你可以用progress這個(gè)元素來(lái)表示，它有一個(gè)value屬性描述了已經(jīng)完成了多少任務(wù)，還有一個(gè)屬性max描述了這個(gè)任務(wù)一共需要多少，還可以通過(guò)DOM接口得到這個(gè)進(jìn)度條的position屬性(只讀)，也就是任務(wù)完成的百分比。Youtube在html5技術(shù)上已經(jīng)做了一個(gè)嘗試，http://www.youtube.com/html5(需要翻墻) 是用html5做的一個(gè)DEMO，從整個(gè)頁(yè)面源代碼來(lái)看，非常簡(jiǎn)潔。當(dāng)然html5也對(duì)一些元素新增了一些屬性，如input和textarea的placeholder屬性，相當(dāng)于輸入框的輸入提示，script有一個(gè)async屬性會(huì)影響腳本的加載和執(zhí)行。對(duì)于所有的HTML共有的屬性我們通常把它稱作是“全局屬性”，如class, id, tabindex, title，html5也新增了一些全局屬性，如contenteditable, contextmenu, hidden等屬性。html5還增加了對(duì)于微數(shù)據(jù)的支持，如html5新增的item, itempro, subject等屬性。

當(dāng)然html5也移除了一些表示頁(yè)面展現(xiàn)的元素，如font, center, strike等，這些本應(yīng)該是CSS來(lái)做的，所以還是很好理解的，也移除了一些影響網(wǎng)站可訪問(wèn)性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr來(lái)表示縮寫。html5還移除了一些影響客戶端兼容性的HTML熟悉，如link的rev屬性，td的scope屬性；html5也移除了一些表示頁(yè)面展現(xiàn)的屬性如一些元素的align,bgcolor屬性。

html5對(duì)表單的支持

html5 提供了強(qiáng)大的控件類型如url, email, date, tel等，強(qiáng)大的約束屬性，如required表示必填，文件上傳的accept屬性，以及一些表單重復(fù)元素模型的支持，html5在提交表單的時(shí)候還可以設(shè)置提交的方式為XML提交方式，這樣服務(wù)器端接收到的數(shù)據(jù)將是XML格式，html5的表單被定義為“Web Forms 2.0”，目前opera9.5+對(duì)Web Forms 2.0的支持較為完美。

html5 DOM變化

html5在DOM LEVEL 2 HTML方面很多都是繼承自HTMLDocument的接口，當(dāng)然html5在DOM上也有一些值得注意的新成員，如：支持 getElementsByClassName，可以根據(jù)class類名選擇元素，getSelection()將會(huì)返回當(dāng)前選中的對(duì)象，在選擇器上面有兩個(gè)方法querySelector和querySelectorAll可以根據(jù) css選擇符來(lái)獲取要查詢的元素，相當(dāng)于YUI3中的Y.one和Y.all。

html5的Javascript APIs

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

• Video/Audio: html5為Video和Audio提供了API來(lái)讓開發(fā)者控制他們自己的用戶界面，如可以播放或暫停媒體內(nèi)容。
• Canvas: Canvas是一個(gè)新的HTML元素，這個(gè)元素可以被Script語(yǔ)言(通常是JavaScript)用來(lái)繪制圖形。例如可以用它來(lái)畫圖、合成圖象、或做簡(jiǎn)單的(和不那么簡(jiǎn)單的)動(dòng)畫。Canvas是一個(gè)神奇的東西，它給我的第一感覺就像是在用Photoshop一樣，它的每一個(gè)方法跟Photoshop 是那么地相似，通過(guò)canvas.getContext(’2d’)就可以得到這個(gè)canvas的API，你可以通過(guò)fillStyle設(shè)置其填充顏色或是通過(guò)strokeStyle設(shè)置其描邊顏色，甚至它畫路徑的操作跟Photoshop的鋼筆操作更是不謀而合。Canvas在很多網(wǎng)站都已經(jīng)有應(yīng)用，如Firefox的實(shí)時(shí)下載狀態(tài)統(tǒng)計(jì)，甚至還可以用canvas來(lái)編寫Web Game。
• Drag&Drop: 在指示設(shè)備的視覺媒體中，”Drag”的操作就是鼠標(biāo)按下(mousedown)并伴隨著鼠標(biāo)移動(dòng)(mousemove)的事件，而”Drop”則是鼠標(biāo)釋放時(shí)觸發(fā)的事件。在Drag&Drop里定義了DataEvent和DataTransfer接口，同時(shí)當(dāng)拖拽操作發(fā)生時(shí)會(huì)觸發(fā)如 dragstart, dragenter, dragleave, drop, dragend等事件。
• Web Workers: 讓Javascript多線程，可以在后臺(tái)做很多工作而不會(huì)阻斷當(dāng)前的瀏覽器操作。
• Geolocation: 地理位置定位，運(yùn)行navigator.geolocation.getCurrentPosition(success,error)這個(gè)方法時(shí)瀏覽器會(huì)提示是否要共享你的地理位置，如果選擇共享，則會(huì)回調(diào)success函數(shù)，success函數(shù)有一個(gè)參數(shù)是position對(duì)象，這個(gè)position對(duì)象有一個(gè)coords對(duì)象，coords對(duì)象包含了很多地理位置信息如latitude(維度)和longitude(經(jīng)度)，這樣就可以知道你的具體位置了，這個(gè)功能在一些手機(jī)如Iphone上已經(jīng)有廣泛的應(yīng)用了。
• Application Cache: 這是html5對(duì)于離線應(yīng)用的支持，通過(guò)在html元素上加一個(gè)屬性manifest，瀏覽器會(huì)提示你是否要將數(shù)據(jù)緩存到客戶端，如果用戶選擇了允許，則會(huì)按照指定的manifest文件列表緩存需要的文件，當(dāng)你的網(wǎng)絡(luò)不可用時(shí)，你還是可以使用這個(gè)應(yīng)用的。對(duì)于離線應(yīng)用，Google也開發(fā)了Google Gears瀏覽器擴(kuò)展，不過(guò)最后Google轉(zhuǎn)投html5可能也是看到了html5存儲(chǔ)和離線應(yīng)用的這種優(yōu)勢(shì)。
• Storage: Webkit已經(jīng)實(shí)現(xiàn)了database storage，你可以像后端操作數(shù)據(jù)庫(kù)一樣查詢數(shù)據(jù)并執(zhí)行一些操作。還有一種存儲(chǔ)是鍵值對(duì)存儲(chǔ)，如sessionStorage和localStorage，可以通過(guò)setItem和getItem來(lái)存儲(chǔ)與獲取值，相對(duì)于Cookie的存儲(chǔ)來(lái)說(shuō)，存儲(chǔ)的容量要大很多。
• X-Document Messaging: 瀏覽器因?yàn)榘踩碗[私的原因，阻止了不同域之間文檔的通信，雖然這是一個(gè)安全限制，但是對(duì)于那些沒有危害的不同域的文檔通信帶來(lái)了很多問(wèn)題，但是html5可以實(shí)現(xiàn)這種跨文檔通信，讓我們可以不用管源域是來(lái)自哪里，同時(shí)可以防止腳本攻擊。

html5讓你心動(dòng)了嗎？那么html5什么時(shí)候會(huì)成為標(biāo)準(zhǔn)呢？據(jù)說(shuō)要等到2022年，這有一個(gè)很有意思的網(wǎng)站http://ishtml5readyyet.com/告訴你還有多少天html5會(huì)真正到來(lái)。

CSS3

CSS3對(duì)于我們Web開發(fā)者來(lái)說(shuō)不只是新奇的技術(shù)，更重要的是這些全新概念的web應(yīng)用給我們帶來(lái)更多無(wú)限的可能性，也極大地提高了我們的開發(fā)效率。我們將不必再依賴圖片或者Javascript 去完成圓角、多背景、用戶自定義字體、3D動(dòng)畫、漸變、盒陰影、文字陰影、透明度等提高Web設(shè)計(jì)質(zhì)量的特色應(yīng)用。

CSS3在選擇器上面的支持

利用屬性選擇器我們可以根據(jù)屬性值的開頭或結(jié)尾很容易選擇某個(gè)元素，利用兄弟選擇器可以選擇同級(jí)兄弟結(jié)點(diǎn)或緊鄰下一個(gè)結(jié)點(diǎn)的元素，利用偽類選擇器可以選擇某一類元素，CSS3在選擇器上的豐富支持讓我們可以靈活的控制樣式，而不必為了選擇某些元素給他們加上如”odd”或”even”這樣的類名。

CSS3在樣式上的支持

有一個(gè)調(diào)查說(shuō)開發(fā)者最期待CSS3的特性是什么，最后票數(shù)最多的是“圓角”，不錯(cuò)，圓角這個(gè)功能可以給我們這些前端工程師省去很多時(shí)間和精力去切圖拼湊一個(gè)圓角。CSS3還支持陰影，盒陰影以及文本陰影，漸變，之前你可能是通過(guò)IE的濾鏡看到過(guò)，其實(shí)CSS3實(shí)現(xiàn)起來(lái)更加方便。@font-face可以自定義字體，如果用傳統(tǒng)的方式，VD把一個(gè)帶有特殊文字的設(shè)計(jì)圖給你讓你來(lái)實(shí)現(xiàn)的話你可能會(huì)把它做成一個(gè)圖片，而通過(guò)CSS3用@font-face就可以了。CSS3對(duì)于連續(xù)文本換行也新增了一個(gè)屬性word-wrap,你可以設(shè)置其為normal(不換行)或break-word(換行)，這解決了連續(xù)英文字符出現(xiàn)頁(yè)面錯(cuò)位的問(wèn)題，也不需要后端去截取這個(gè)連續(xù)字符。使用CSS3你還可以給邊框加背景，這在iphone上也有應(yīng)用的例子。CSS3在背景上支持背景調(diào)整大小，如當(dāng)你用一張大圖要做一個(gè)小的元素背景時(shí)可以通過(guò)background-size來(lái)調(diào)整背景圖的大小來(lái)適應(yīng)這個(gè)元素。CSS3支持opacity, rgba和hsl/a, opacity和rgba的區(qū)別是opacity設(shè)置的透明對(duì)其內(nèi)容也會(huì)產(chǎn)生影響，而rgba只對(duì)你應(yīng)用的元素產(chǎn)生影響。CSS3在布局上對(duì)于盒模型提供了支持，可以設(shè)置box-sizing為content-box或border-box，應(yīng)用為content-box就是正常的模式，而應(yīng)用為border-box和IE5.5的盒模型很相似，即元素的寬度包括border和padding，這個(gè)在布局上可能會(huì)比較方便，不用去管到底這個(gè)元素會(huì)占用多大的寬度，而用content-box還需要手動(dòng)計(jì)算一下這個(gè)元素實(shí)際占用的寬度。

CSS3對(duì)于動(dòng)畫的支持

CSS3支持的動(dòng)畫類型有：transform(變換)、transition(過(guò)渡)和animation(動(dòng)畫)。你可以對(duì)特定的屬性設(shè)置transition，transiton和animation的區(qū)別不大，animation的動(dòng)畫是自己定義的，面向的更多的是腳本開發(fā)者，往往更加復(fù)雜。

為了使用大部分CSS3特性，我們不得不與原來(lái)的屬性一起使用生產(chǎn)商專有擴(kuò)展。原因是直到現(xiàn)在，大部分瀏覽器只支持部分CSS3屬性。最常見的私有屬性是用于Webkit核心瀏覽器的(比如, Safari)， 它們以-webkit-開始，以及Gecko核心的瀏覽器(比如, Firefox)，以-moz-開始，還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴(kuò)展（目前只有IE8支持-ms-前綴）

那我們?cè)陂_發(fā)中該如何去用CSS3呢？

我覺得首先是遵循一個(gè)優(yōu)雅降級(jí)的原則，比如前面談到的圓角，我們可以針對(duì)Firefox和Safari等這些支持圓角的瀏覽器中應(yīng)用CSS圓角，而那些不支持CSS圓角的瀏覽器則顯示為直角。其次就是對(duì)于不支持CSS3的瀏覽器可以使用Javascript來(lái)實(shí)現(xiàn)，如CSS3任何元素支持:hover偽類，我們就可以對(duì)只支持鏈接:hover的IE6用JS來(lái)實(shí)現(xiàn)。最后就是在向用戶或老板推廣新技術(shù)的同時(shí)也要關(guān)注他們的目標(biāo)與可行性，不能為了技術(shù)而技術(shù)。