互聯網的發展總是在不斷地催生新技術的產生，而HTML 5和CSS 3是最近一直被討論的熱門話題，關于HTML 5與Flash之間的唇槍舌戰一直不斷，而CSS 3的新功能也讓人們備受期待。那么HTML 5和CSS3究竟有哪些讓我們眼前一亮的東西呢？

　　HTML 5的Javascript API，HTML 5在Javascript上面新增了哪些API呢?

　　Video/Audio: HTML 5為Video和Audio提供了API來讓開發者控制他們自己的用戶界面，如可以播放或暫停媒體內容。

　　Canvas:Canvas是一個新的HTML元素，這個元素可以被Script語言(通常是JavaScript)用來繪制圖形。例如可以用它來畫圖、合成圖象、或做簡單的(和不那么簡單的)動畫。Canvas是一個神奇的東西，它給我的第一感覺就像是在用Photoshop一樣，它的每一個方法跟Photoshop是那么地相似，通過canvas.getContext(’2d’)就可以得到這個canvas的API，你可以通過fillStyle設置其填充顏色或是通過strokeStyle設置其描邊顏色，甚至它畫路徑的操作跟Photoshop的鋼筆操作更是不謀而合。Canvas在很多網站都已經有應用，如Firefox的實時下載狀態統計，甚至還可以用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也開發了GoogleGears瀏覽器擴展，不過最后Google轉投HTML5可能也是看到了HTML5存儲和離線應用的這種優勢。

　　Storage: Webkit已經實現了databasestorage，你可以像后端操作數據庫一樣查詢數據并執行一些操作。還有一種存儲是鍵值對存儲，如sessionStorage和localStorage，可以通過setItem和getItem來存儲與獲取值，相對于Cookie的存儲來說，存儲的容量要大很多。

　　X-Document Messaging:瀏覽器因為安全和隱私的原因，阻止了不同域之間文檔的通信，雖然這是一個安全限制，但是對于那些沒有危害的不同域的文檔通信帶來了很多問題，但是HTML5可以實現這種跨文檔通信，讓我們可以不用管源域是來自哪里，同時可以防止腳本攻擊。

　　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-)都有它們自己的屬性擴展(目前只有IE8支持-ms-前綴)。

　　那我們在開發中該如何去用CSS3呢?我覺得首先是遵循一個優雅降級的原則，比如前面談到的圓角，我們可以針對Firefox和Safari等這些支持圓角的瀏覽器中應用CSS圓角，而那些不支持CSS圓角的瀏覽器則顯示為直角。其次就是對于不支持CSS3的瀏覽器可以使用Javascript來實現，如CSS3任何元素支持:hover偽類，我們就可以對只支持鏈接:hover的IE6用JS來實現。最后就是在向用戶或老板推廣新技術的同時也要關注他們的目標與可行性，不能為了技術而技術。

it知識庫：揭秘HTML 5和CSS3 Web實現飛躍的踏板，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。