HTML5 CSS3新的WEB標準和瀏覽器支援_html5教學技巧

由於是源自筆記，對每個條目我只會列出稱呼和語法特徵，暫時沒時間寫詳細的解釋和可執行的示例，但是會給出相關的文檔地址，除了列出已經支持該特性的瀏覽器，也會為不支援的瀏覽器提供替代/過渡的實作。好罷這篇本來是我私下做的筆記，我特別喜歡在Evernote上做備忘的筆記，雖然上次看到漏屋老師的文章裡說我現在的年齡才剛進入記憶力的巔峰期…但是我的自信心仍然屢受打擊！例如跟別人討論The Dark Knight裡小丑在醫院對檢察官說了什麼讓他變成雙面人，我一句對白都想不起來，還有big bang theory s2裡penny玩age of conan時的人物名字是「Queen Penelope”，我看的時候印像很深，一個月後就連奧德賽都想不起來了。留份筆記總覺得心裡踏實……啊又離題了

本文整理了一些最重要（或者說人氣比較高罷）的新標準，雖然它們多數還只是w3c的草案，離Recommendation級別還早，卻已經成為新一輪瀏覽器大戰中備受追捧的明星，開發者社群裡也湧現大量相關的demo和API封裝，有些已經進入生產環境（例如google在iphone上實現的gmail離線應用），其實我覺得如今的web領域裡，從廠商私有技術轉換成委員會標準再轉換成通用技術產生殺手級應用的周期已經顯著的加速了，是因為現在web application的需求太高了麼… UPDATE：剛才在solidot發軟文的時候我突然想明白怎麼表述這個問題：其實現在許多瀏覽器廠商同時也是基於瀏覽器的應用開發者和web標準的製定者，就好像修築舞台的工程師同時也是舞台上的演員和舞蹈動作的導演一樣，所以google, mozilla, apple們都在不遺餘力的實現那些有利於開發web應用的技術標準，即時它們還是W3C Working Draft，相比之下IE team就比較缺乏動力，果然計劃經濟缺乏活力亞XD……

由於是源自筆記，對每個條目我只會列出稱呼和語法特徵，暫時沒時間寫詳細的解釋和可執行的示例，但是會給出相關的文檔地址，除了列出已經支持該特性的瀏覽器，也會為不支援的瀏覽器提供替代/過渡的實作。

===================廢話結束的分割線=======================

CSS3 Media queries

對整個外鏈css檔案和部分css程式碼使用的媒體類型偵測，人氣高的原因顯然是因為行動裝置…

1. link media=「all=「 >and (orientation:portrait)」 src=src== screen.css" type=類型=

"

"

/css

1. "> @media all and

(min-color: 4)

and (min-color: 4) { ... }

w3c標準：http://www.w3.org/TR/css3-mediaqueries/
MDC文件：https://developer.mozilla.org/En/CSS/Media_queries
Opera文件：http ://www.opera.com/docs/specs/css/

支援：Firefox 3.5 , Safari 3 , Opera 7

CSS3 2D Transforms

css變形，有人用這個實現偽3d效果以及旋轉效果的jquery插件

1. -moz-transform: rotate(-45deg) deg) >(15deg, 15deg);

1. sprite.style['-webkit-transform'-webkit-transform'] = 'rotate(' v 'rad)'

;

w3c標準：http://www.w3.org/TR/css3-2d-transforms/

MDC文件：https://developer.mozilla.org/En/CSS/CSS_transform_functionswebkit博客的介紹: 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實現簡單的屬性漸變，animation定義更複雜的動畫效果
1. transition-property: width
2. ; transition-duration: 1s
3. ;
4.   animation-name: 'diagonal-slide
5. '; animation-duration: 5s
6. ;
7. animation-iteration-count: 10; @keyframes 'diagonal-slide'

{}

w3c標準：http://www.w3.org/TR/css3-transitions/

w3c標準：http://www.w3.org/TR/css3-animations/

webkit部落格的介紹：http://webkit.org/blog/138/css-animation/同學約翰的介紹：http://ejohn.org/blog/css-animations-and-javascript/

支援：Safari 3.1

CSS3 Downloadable fonts

能在網頁嵌入任意字體是設計師的夢想…不過這裡支援的也僅限truetype和opentype
1. @font-face

{}

w3c標準：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文件：http://msdn.microsoft.com/en-us/library/ms530303( VS.85).aspx
MDC文件：https://developer.mozilla.org/en/CSS/@font-face

支援：Firefox 3.5 , Safari 3.1 , Opera 10.0 , IE4.0

附贈：其他CSS3 property的相容性

ppk同學維護的文件: http://www.quirksmode.org/css/contents.html
css3.info維護的文件：http://www.css3.info/modules/selector-compat/
一個測驗頁面：http://westciv.com/iphonetests/

HTML5 DOM Storage

簡潔的持久存儲，鍵值對的形式

1. window.localStorage
2. window.sessionStorage //可跨域，標籤頁關掉就清空

w3c標準：http://www.w3.org/TR/webstorage/
ppk同學維護的相容性清單：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文件：https://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檔快取靜態資源（圖片,css, js之類）在離線狀態下使用，不是結構化資料

1. html manifest="foo.manifest ">

1. CACHE MANIFEST
2. index.html
3. style/default.css
4. images/logo.png

w3c標準：http://www.w3.org/TR/offline-webapps/#offline
MDC文件：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支援：Firefox 3.5

HTML5 Database Storage

本地資料庫，支援sql，最早是google gears實現，現在的w3c草案的編輯也是google的工程師…但奇怪的是，gears的api跟現在的草案不相容，chrome甚至為了保留捆綁的gears的資料庫api而刪除了webkit實現的html5 api…而google在iphone上實現gmail離線功能的時候又採用webkit的api…真糾結…

1. var db = window.window.window.window.("notes", "", """""The Example Notes App!
"
2. , 1048576)1048576) ; db.transaction(
function
3. functionfunction) { tx.executeSql('('('SELECTFROM Notes',
[]

4. (tx

,

rs) ) ; });

w3c標準：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/TPscriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP400072566 -SW1

支援：Safari 3.1
替代/過渡：Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

多線程，在後台執行複雜運算，不能操作dom，線程之間透過訊息事件通訊

1. var myWorker = new new ('my_worker.js')
;
2. ); ; myWorker.onmessage = function = function 🎜>) {
event
3. .event.event.event.
event

.

event

.event
.
event

.

event

. 🎜>

}
1. ; myWorker.postMessage
(

str

(

str(
🎜>

w3c標準：http://www.w3.org/TR/workers/

MDC文件：https://developer.mozilla.org/En/Using_web_workers

支援：Firefox 3.5

1. 取代/轉換：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal
2. HTML5 Geolocation
3. 地理api
4. window
.
5. navigator
.
6. geolocation
7. w3c標準：http://www.w3.org/TR/geolocation-API/
MDC文件：https://developer.mozilla.org/En/Using_geolocation
8. 支援：Firefox 3.5

替代/過渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI HTML5 Drag and Drop 原生拖曳事件 ondragstart ondrag ondragend //拖曳過程中 ondragenter ondragover ondragleave ondrop

w3c標準：http://www.w3.org/TR/html5/editing.html#dnd
MDC文件：https://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標籤來嵌入視頻音頻的好處並非是“開源格式”，而是“開放性”，讓多媒體可以與其他頁面元素交互，或者用頁面技術去跟視頻“mashup”，這種隨意組合和互動的能力是web技術興盛的基石，也是像flash這類封閉RIA容器最大的缺點。

1. video controls>
2. source src=「zombieogg” type=“video/ogg”/>
source src=「zombiemp4″ type=「video/video/video/video″
3. />
video

>

MDC文件：https://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標籤嵌套embed http://hacks.mozilla.org/2009/06/html5 -video-fallbacks-markup/

HTML5 Canvas

apple發明，最早應用於dashboard，目前主流的js圖像技術，mozilla已經在實現OpenGL ES標準的Canvas 3D了，另外據說ie team為支持canvas做了大量工作……實際上canvas api相當底層，特別是互動方面，不如svg直觀，所以出現了很多封裝它的函式庫

1. var ctx = $('#canvas ')[0].getContext.getContext "2d")
2. ; ctx.fillStyle = " = "
3. = ; ctx.
4. beginPath(); ctx.arc(220, 220, , , 50, 0, Math, Math, Math
5. , Math, Math, 。 >
PI
6. *2, true)
true

)

;

ctx
.
closePath

()

;

ctx.
fill
()

;

MDC文件：https://developer.mozilla.org/en/Canvas_tutorial


支援：Firefox 1.5 , Safari 2.0 , Chrome 1.0 , Opera 9.0

替代/過渡：excanvas.js http://code..com/p/explorercanvas/

SVG

w3c標準：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標準：http://www.w3.org/TR/XMLHttpRequest2/MDC文件：https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progressXDomainRequest (XDR)MSDN文件：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx 支援：Firefox 3.5 （實現了部分）, IE 8.0 （實現了部分） Access Control 千呼萬喚的跨域存取控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是準備提交給w3c標準化的東西… Access-Control-Allow-Origin: http://foo.example

w3c標準：http://www.w3.org/TR/cors/
MDC文件：https://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早就實現了的東西…不過其實實作在json這麼流行，有沒有E4X好像都無所謂了～（瞎說的，其實在js程式碼裡直接寫dom物件而不是html字串，會方便很多）

MDC文件：https://developer.mozilla.org/en/E4X

支援：Firefox 1.5

ECMAScript 5 Native JSON

原生的JSON支持，速度和安全性都比eval強一百倍亞一百倍，另外要注意Douglas Crockford的json2.js是一個用js實現的js解釋器，所以安全性更好

1. JSON.parse( > text >translate
2. ) JSON.stringify( obj obj
3.  objobjtranslate )
4. String.prototype.toJSON
5. Boolean.prototype.toJSON
6. Number.prototype.toJSON

Date.prototype.toJSON

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 Extras

js1.6裡實作的陣列方法，主要是forEach, map, fliter這幾個函數式程式設計裡非常重要的方法，還有反向查詢

1. Array.prototype.indexOf(indexOf( >str
2. ) Array.prototype.lastIndexOf >str )
3. Array.prototype.every(every(H >fn
4. ) Array.prototype.some(some((
>
5. fn ) Array.prototype.filterfn
)
6. Array.prototype.forEachfn )
Array
7. .prototype.map(map((fn )

MDC文件：https://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()

區分數組與對象

1. Array.isArray([]);
/true

支援：無
替代/過渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array] 」;};

ECMAScript 5 Object

用GOOGLE I/O演講裡的話來說：更穩健(robust)的物件系統

1. Object.getPrototypeOf( obj obj

)

約翰同學的解說：http://ejohn.org/blog/objectgetprototypeof/

支援：Firefox3.5
替代/過渡：object.__proto__ 或 object.constructor.prototype

1. Object.create( proto, props ) //複製或繼承物件
2.  
3. Object.keys( obj obj)
4. //資料結構的對應 Object.getOwnPropertyNames( ( 
5. ( 
6. ob )   Object.preventExtensions( (
 
7. ( obj) //不能新增屬性 Object.
8. isExtensible(
9.  ( obj )   Object.
seal
10. ( obj obj) //不能刪除和修改屬性的配置，不能新增屬性
11. Object
.
12. isSealed( obj )   Object
.
13. freeze( obj obj )

//不能刪除和修改屬性的配置，不能新增屬性，不能寫屬性 Object.isFrozen( obj )

約翰同學的解說：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支援：無
替代/過渡：Object.create和Object.keys可以自己實現

ECMAScript 5 Property Descriptor

物件屬性的存取控制

1. Object.getOwnPropertyDescriptor( obj objprop )
2. Object.defineProperty( obj objprop, desc
)
3. Object.defineProperties( ob obj >props
4. )  desc
5. = {      value:
6. true, true, true, true
7. , true,      writable:
8. false, false, false,      enumerable
9. : true, true, /for     configurable: true, true,
10. true, true, true, true, true, true, true、
11. 🎜>     

get

: function(){ 🎜> name; },      set: function(function(function( 🎜> name = value; } }

約翰同學的解說：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支援：無
替代/過渡：Object.defineProperties其實相當於jQuery.extend，用來實現Mixin

ECMAScript 5 Getters and Setters

python和ruby裡都有的屬性存取方法

1. obj = { 
2.    get innerHTML()
3. { return …; },
4.    set
 

innerHTML

(

>innerHTML
(

{

…
1. }  }; MDC文件：https://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 取代/轉換： 非標準，Firefox1.5裡的舊方法 HTMLElement.prototype
2. .__defineGetter__innerHTML", function ( {}); HTMLElement.prototype.__defineSetter__
innerHTML

"

,

function

 

(
1.  () {}); 支援：Firefox 2.0 , Safari 3.0 , Google Chrome 1.0 , Opera 9.5 標準 Object.defineProperty(document.document., "innerHTML"
,

{{, {{ get : function () () { 🎜> });

MSDN ドキュメント: http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

サポート: IE8 (DOM でのみ使用可能)

ECMAScript 5 厳密モード

ES5 の厳密モードは、古いバージョンで問題を引き起こす可能性のある要素を削除し、デバッグを容易にするためにエラーを明示的に報告します

1. "use strict"//次の状況で例外がスローされました
//未定義の変数に値を代入
//操作は書き込み不可、構成不可、または拡張不可のプロパティに設定されています
//変数、関数、パラメータを削除
//オブジェクトリテラルで属性を繰り返し定義します
//eval がキーワードとして使用され、変数は eval 文字列
6. で定義されます
//引数を上書き
//arguments.caller と argument.callee を使用します (匿名関数には、それ自体を参照する名前を付ける必要があります)
//(function(){ ... }).call( null ) // 例外
//
10. と一緒に使用します

クラスメイトのジョンの説明: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

サポート: なし

代替案/移行: ... 今から本格的なプログラミングの習慣を身につけ始めましょう


ECMAScript 5 のその他の新機能

関数に参照を渡すときは、これをバインドします

関数
1. .プロトタイプ.bind(thisArg、arg1、arg2....) /

サポート: なし

代替/遷移: プロトタイプ http://www.prototypejs.org/api/function/bind
ISO 形式の日付

日付
1. .プロトタイプ.toISOString() // 印刷 2009-05-21T16:06:05.000TZ

サポート: なし

代替/移行: datejs http://code.google.com/p/datejs/

文字列
1. .プロトタイプ.トリム()

サポート: Firefox3.5
代替/移行: さまざまな通常の実装 http://blog.stevenlevithan.com/archives/faster-trim-javascript


===================ナンセンスが再び始まる境界線================= = =====

実は、私はイノベーションの雰囲気を促進し、多くの新技術が「実用」段階に入ったことをより多くの人に知ってもらいたいと願って、このことを投稿しました。

実験的な Web ゲーム、または特定のプラットフォーム (iPhone、greasemonkey など) でのみ使用できるアプリケーションを作成したいだけの場合は、Firefox3.5 Webkit のサポートで十分です。

主流のプラットフォームを無視できない場合は、互換性のあるインターフェイスを実装するために適切に機能を低下させたり、別の方法を選択したりできるテクノロジーが多数あります。

IE を待てない場合は、たとえば、ES5 オブジェクトの継承とアクセス制御が、ES4/ActionScript3 時代の昔ながらのキーワード (クラスは private static を拡張) から Object.create(p 、attrs).defineProperty(o, n, attrs).defineProperties( o, attrs).freeze().getOwnPropertyNames().map(fn)、カッコいいだけではありません...

多くの人は「これまでの人生で HTML5 を使用する機会がなかった」と不満を言いたがりますが、足元の大きな手のひらから目をそらし、他の場所を見れば、世界は実際に変わりつつあることがわかります。いつもXD