HTML5和CSS3新的WEB標(biāo)準(zhǔn)和瀏覽器支持

2020-03-24 17:05:56

字體：大中小

供稿：網(wǎng)友

好罷這篇本來是我私下做的筆記，我特別喜歡在Evernote上做備忘的筆記，雖然上次看到漏屋老師的文章里說我現(xiàn)在的年齡才剛剛進入記憶力的巔峰期但是我的自信心仍然屢受打擊！比如跟別人討論The Dark Knight里小丑在醫(yī)院對檢察官說了什么讓他變成雙面人，我一句對白都想不起來，還有big bang theory s2里penny玩age of conan時的人物名字是 Queen Penelope ，我看的時候印象很深，一個月后就連奧德賽都想不起來了。留份筆記總覺得心里踏實些啊又跑題了本文整理了一些最重要（或者說人氣比較高罷）的新標(biāo)準(zhǔn)，雖然它們多數(shù)還只是w3c的草案，離Recommendation級別還早，卻已經(jīng)成為新一輪瀏覽器大戰(zhàn)中備受追捧的明星，開發(fā)者社區(qū)里也涌現(xiàn)出大量相關(guān)的demo和API封裝，有些已經(jīng)進入生產(chǎn)環(huán)境（比如google在iphone上實現(xiàn)的gmail離線應(yīng)用），其實我覺得如今的web領(lǐng)域里，從廠商私有技術(shù)轉(zhuǎn)換成委員會標(biāo)準(zhǔn)再轉(zhuǎn)換成通用技術(shù)產(chǎn)生殺手級應(yīng)用的周期已經(jīng)顯著的加速了，是因為現(xiàn)在web application的需求太高了么 UPDATE：剛才在solidot發(fā)軟文的時候我突然想明白怎么表述這個問題：其實現(xiàn)在很多瀏覽器廠商同時也是基于瀏覽器的應(yīng)用開發(fā)者和web標(biāo)準(zhǔn)的制定者，就好像修筑舞臺的工程師同時也是舞臺上的演員和舞蹈動作的導(dǎo)演一樣，所以google, mozilla, apple們都在不遺余力的實現(xiàn)那些有利于開發(fā)web應(yīng)用的技術(shù)標(biāo)準(zhǔn)，即時它們還是W3C Working Draft，相比之下IE team就比較缺乏動力，果然計劃經(jīng)濟缺乏活力亞XD 由于是源自筆記，對每個條目我只會列出稱呼和語法特征，暫時沒時間寫詳細的解釋和可執(zhí)行的示例，但是會給出相關(guān)的文檔地址，除了列出已經(jīng)支持該特性的瀏覽器，也會為不支持的瀏覽器提供替代/過渡的實現(xiàn)。===================廢話結(jié)束的分割線=======================CSS3 Media queries對整個外鏈css文件和部分css代碼使用的媒體類型偵測，人氣高的原因顯然是因為移動設(shè)備
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-mediaqueries/
MDC文檔：http://developer.mozilla.org/En/CSS/Media_queries
Opera文檔：http://www.opera.com/docs/specs/css/支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transformscss變形，有人用這個實現(xiàn)偽3d效果以及旋轉(zhuǎn)效果的html' target='_blank'>jquery插件
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-2d-transforms/
MDC文檔：http://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介紹: http://webkit.org/blog/130/css-transforms/支持：Firefox 3.5+, Safari 3.1+
替代/過渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

CSS3 Transitions and CSS Animations備受期待的css動畫，webkit團隊提出的草案，transition實現(xiàn)簡單的屬性漸變，animation定義更復(fù)雜的動畫效果
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-transitions/
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-animations/
webkit博客的介紹：http://webkit.org/blog/138/css-animation/
約翰同學(xué)的介紹：http://ejohn.org/blog/css-animations-and-javascript/支持：Safari 3.1+

CSS3 Downloadable fonts能在網(wǎng)頁里嵌入任意字體是設(shè)計師的夢想不過這里支持的也僅限truetype和opentype
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文檔：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文檔：http://developer.mozilla.org/en/CSS/@font-face支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+

附贈：其他CSS3 property的兼容性ppk同學(xué)維護的文檔: http://www.quirksmode.org/css/contents.html
css3.info維護的文檔：http://www.css3.info/modules/selector-compat/
一個測試頁面：http://westciv.com/iphonetests/

HTML5 DOM Storage簡潔的持久存儲，鍵值對的形式
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/webstorage/
ppk同學(xué)維護的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文檔：http://developer.mozilla.org/en/DOM/Storage
MSDN文檔：http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx支持：Firefox 3.5+, Safari 4.0+, IE 8.0+

HTML5 Offline Application Cache用一個manifest文件緩存靜態(tài)資源（圖片,css, js之類）在離線狀態(tài)下使用，不是結(jié)構(gòu)化數(shù)據(jù)
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/offline-webapps/#offline
MDC文檔：http://developer.mozilla.org/en/Offline_resources_in_Firefox支持：Firefox 3.5+

HTML5 Database Storage本地數(shù)據(jù)庫，支持sql，最早是google gears實現(xiàn)，現(xiàn)在的w3c草案的編輯也是google的工程師但奇怪的是，gears的api跟現(xiàn)在的草案不兼容，chrome甚至為了保留捆綁的gears的數(shù)據(jù)庫api而刪除了webkit實現(xiàn)的html5 api 而google在iphone上實現(xiàn)gmail離線功能的時候又采用webkit的api 真糾結(jié)
var db = window.openDatabase( notes , , The Example Notes App! , 1048576); db.transaction(function(tx){ tx.executeSql( SELECT * FROMNotes , [], function(tx, rs) {}); });
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介紹：http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文檔：http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1支持：Safari 3.1+
替代/過渡：Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers多線程，在后臺執(zhí)行復(fù)雜運算，不能操作dom，線程之間通過消息事件通信
var myWorker = new Worker('my_worker.js'); myWorker.onmessage = function(event){ event.data }; myWorker.postMessage(str);
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/workers/
MDC文檔：http://developer.mozilla.org/En/Using_web_workers支持：Firefox 3.5+
替代/過渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation地理api
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/geolocation-API/
MDC文檔：http://developer.mozilla.org/En/Using_geolocation支持：Firefox 3.5+
替代/過渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop原生拖拽事件
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/html5/editing.html#dnd
MDC文檔：http://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文檔：http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233支持：Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+

HTML5 Audio and Video用html標(biāo)簽來嵌入視頻音頻的好處并非是開源格式，而是開放性，讓多媒體可以與其他頁面元素交互，或者用頁面技術(shù)去跟視頻 mashup ，這種隨意組合和交互的能力是web技術(shù)興盛的基石，也是像flash這類封閉RIA容器最大的缺點。
sourcesrc= zombie.ogg type= video/ogg / sourcesrc= zombie.mp4 type= video/mp4 / /video
MDC文檔：http://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介紹：http://webkit.org/blog/140/html5-media-support/支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/過渡：用video標(biāo)簽嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/

HTML5 Canvasapple發(fā)明，最早應(yīng)用于dashboard，目前主流的js圖像技術(shù)，mozilla已經(jīng)在實現(xiàn)OpenGL ES標(biāo)準(zhǔn)的Canvas 3D了，另外據(jù)說ie team為支持canvas做了大量工作實際上canvas api相當(dāng)?shù)讓樱貏e是交互方面，不如svg直觀，所以出現(xiàn)了很多封裝它的庫
MDC文檔：http://developer.mozilla.org/en/Canvas_tutorial支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/過渡：excanvas.js http://code.google.com/p/explorercanvas/

w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/SVG12/
IBM DW教程：http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896支持：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/過渡：raphael.js http://raphaeljs.com/

XMLHttpRequest 2主要是增加跨域能力以及請求過程中的事件w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/XMLHttpRequest2/
MDC文檔：http://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文檔：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx支持：Firefox 3.5+（實現(xiàn)了部分）, IE 8.0+（實現(xiàn)了部分）

Access Control千呼萬喚的跨域訪問控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是準(zhǔn)備提交給w3c標(biāo)準(zhǔn)化的東西
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/cors/
MDC文檔：http://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文檔：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx支持：Firefox 3.5+, IE8.0+

E4X (ECMA-357)Firefox和ActionScript3早就實現(xiàn)了的東西不過其實現(xiàn)在json這么流行，有沒有E4X好像都無所謂了～（瞎說的，其實在js代碼里直接寫dom對象而不是html字符串，會方便很多）MDC文檔：http://developer.mozilla.org/en/E4X支持：Firefox 1.5+

ECMAScript 5 Native JSON原生的JSON支持，速度和安全性都比eval強一百倍亞一百倍，另外要注意Douglas Crockford的json2.js是一個用js實現(xiàn)的js解釋器，所以安全性更好
MDC文檔：http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文檔：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx支持：Firefox 3.5+, IE8+
替代/過渡：json2.js http://www.json.org/json2.js

ECMAScript 5 Array Extrasjs1.6里實現(xiàn)的數(shù)組方法，主要是forEach, map, fliter這幾個函數(shù)式編程里非常重要的方法，還有反向查詢
MDC文檔：http://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras支持：Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/過渡：都可以通過擴展Array.prototype來模擬

ECMAScript 5 isArray()區(qū)分?jǐn)?shù)組和對象
支持：無
替代/過渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === [object Array] };

ECMAScript 5 Object用GOOGLE I/O演講里的話來說：更魯棒(robust)的對象系統(tǒng)

約翰同學(xué)的講解：http://ejohn.org/blog/objectgetprototypeof/支持：Firefox3.5
替代/過渡：object.__proto__ 或 object.constructor.prototype

Object.preventExtensions(obj ) //不能添加新屬性 Object.isExtensible(obj ) Object.seal(obj ) //不能刪除和修改屬性的配置，不能添加新屬性 Object.isSealed(obj ) Object.freeze(obj ) //不能刪除和修改屬性的配置，不能添加新屬性，不能寫屬性 Object.isFrozen(obj )
約翰同學(xué)的講解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/支持：無
替代/過渡：Object.create和Object.keys可以自己實現(xiàn)

ECMAScript 5 Property Descriptor對象屬性的訪問控制
Object.getOwnPropertyDescriptor( obj, prop ) Object.defineProperty(obj, prop, desc ) Object.defineProperties(obj, props ) desc = { value: true, writable: false, //修改 enumerable: true, //for in configurable: true, //刪除和修改屬性 get: function(){return name; }, set: function(value){name = value; }
約翰同學(xué)的講解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/支持：無
替代/過渡：Object.defineProperties其實相當(dāng)于jQuery.extend，用來實現(xiàn)Mixin

ECMAScript 5 Getters and Setterspython和ruby里都有的屬性訪問方法
getinnerHTML() { return ; }, setinnerHTML(newHTML) { }
MDC文檔：http://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/過渡：非標(biāo)準(zhǔn)，F(xiàn)irefox1.5里的舊方法
HTMLElement.prototype.__defineGetter__( innerHTML , function () {}); HTMLElement.prototype.__defineSetter__( innerHTML , function(val) {});
MSDN文檔：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx支持：IE8+ (只能對DOM使用)

ECMAScript 5 Strict ModeES5的嚴(yán)格模式，刪除了舊版本中容易引起問題的元素，并且會顯式的報錯，方便調(diào)試
//覆寫arguments //使用arguments.caller和arguments.callee（匿名函數(shù)必須具名才能引用自己） //(function(){ ... }).call( null ); // Exception //使用with
約翰同學(xué)的講解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/支持：無
替代/過渡：從現(xiàn)在開始養(yǎng)成嚴(yán)謹(jǐn)?shù)木幊塘?xí)慣

ECMAScript 5 其他新特性傳遞函數(shù)的引用時，綁定this
支持：無
替代/過渡：prototype http://www.prototypejs.org/api/function/bindISO-formatted dates
支持：Firefox3.5
替代/過渡：各種正則實現(xiàn) http://blog.stevenlevithan.com/archives/faster-trim-javascript

===================廢話又開始的分割線=======================其實我把這個東西發(fā)出來是希望能促進創(chuàng)新的氛圍，讓更多人認(rèn)識到很多新技術(shù)已經(jīng)進入到實用階段。如果只是想做個實驗性的webgame，或是只能用于特定平臺的應(yīng)用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已經(jīng)足夠罷。如果不能無視主流平臺，有很多技術(shù)能讓你gracefully degrade（優(yōu)雅的退化）或者選取不同的方法實現(xiàn)兼容的接口。如果你等不及IE x在若干年后實現(xiàn)xx，希望提前享受福利，有些技術(shù)的設(shè)計原則就是讓你能在沒有native支持的情況下可以自己實現(xiàn)一模一樣的功能或語法糖（syntactic sugar），比如ES5對象的繼承和訪問控制，從ES4/ActionScript3時期那些老土的關(guān)鍵詞（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不會只是為了酷炫罷很多人都喜歡抱怨我這輩子都沒機會用HTML5 ，但是只要把視線從自己腳下那巴掌大塊地移開看看別處，會發(fā)現(xiàn)世界其實一直都在改變喔XDhtml教程

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

上一篇：html css3是什么

下一篇：幾種關(guān)于html和css的使用方法