HTML5, CSS3, ES5新的web标准和浏览器支持一览 转（一）
本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是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代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……
- <link media=“all and (orientation:portrait)” src="screen.css" type="text/css">
- @media all 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插件
- -moz-transform: rotate(-45deg) skew(15deg, 15deg);
- sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';
w3c标准：http://www.w3.org/TR/css3-2d-transforms/
MDC文档：https://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实现简单的属性渐变，animation定义更复杂的动画效果
- transition-property: width;
- transition-duration: 1s;
- animation-name: 'diagonal-slide';
- animation-duration: 5s;
- 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
- @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
简洁的持久存储，键值对的形式
- window.localStorage
- 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之类）在离线状态下使用，不是结构化数据
- <html manifest="foo.manifest">
- CACHE MANIFEST
- index.html
- style/default.css
- 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……真纠结……
- var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
- db.transaction(function(tx) {
- tx.executeSql(‘SELECT * FROM Notes’, [], function(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/TP40007256-CH3-SW1
支持：Safari 3.1+
替代/过渡：Gears http://code.google.com/p/gears/wiki/Database2API
HTML5 Web Workers
多线程，在后台执行复杂运算，不能操作dom，线程之间通过消息事件通信
- var myWorker = new Worker('my_worker.js');
- myWorker.onmessage = function(event) { event.data };
- myWorker.postMessage(str);
w3c标准：http://www.w3.org/TR/workers/
MDC文档：https://developer.mozilla.org/En/Using_web_workers
支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal
HTML5 Geolocation
地理api
- window.navigator.geolocation
w3c标准：http://www.w3.org/TR/geolocation-API/
MDC文档：https://developer.mozilla.org/En/Using_geolocation
支持：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容器最大的缺点。
- <video controls>
- <source src=“zombie.ogg” type=“video/ogg”/>
- <source src=“zombie.mp4″ type=“video/mp4″/>
- </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直观，所以出现了很多封装它的库
- var ctx = $('#canvas')[0].getContext("2d");
- ctx.fillStyle = "#00A308";
- ctx.beginPath();
- ctx.arc(220, 220, 50, 0, Math.PI*2, 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.google.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_progress
XDomainRequest (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解释器，所以安全性更好
- JSON.parse( text, translate )
- JSON.stringify( obj, translate )
- String.prototype.toJSON
- Boolean.prototype.toJSON
- 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这几个函数式编程里非常重要的方法，还有反向查询
- Array.prototype.indexOf( str )
- Array.prototype.lastIndexOf( str )
- Array.prototype.every( fn )
- Array.prototype.some( fn )
- Array.prototype.filter( fn )
- Array.prototype.forEach( fn )
- Array.prototype.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()
区分数组和对象
- Array.isArray([]); // true
支持：无
替代/过渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]”;};
ECMAScript 5 Object
用GOOGLE I/O演讲里的话来说：更鲁棒(robust)的对象系统
- Object.getPrototypeOf( obj )
约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/
支持：Firefox3.5
替代/过渡：object.__proto__ 或 object.constructor.prototype
- Object.create( proto, props ) //克隆或继承对象
- Object.keys( obj ) //数据结构的映射
- Object.getOwnPropertyNames( obj )
- Object.preventExtensions( obj ) //不能添加新属性
- Object.isExtensible( obj )
- Object.seal( obj ) //不能删除和修改属性的配置，不能添加新属性
- Object.isSealed( obj )
- Object.freeze( obj ) //不能删除和修改属性的配置，不能添加新属性，不能写属性
- Object.isFrozen( obj )
约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/
支持：无
替代/过渡：Object.create和Object.keys可以自己实现
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; }
- }
约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/
支持：无
替代/过渡：Object.defineProperties其实相当于jQuery.extend，用来实现Mixin
ECMAScript 5 Getters and Setters
python和ruby里都有的属性访问方法
- obj = {
- get innerHTML() { return …; },
- set innerHTML(newHTML) { … }
- };
支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：
非标准，Firefox1.5里的旧方法
- HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
- HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});
支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
标准
- Object.defineProperty(document.body, "innerHTML", { get : function () {} });
MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
支持：IE8+ (只能对DOM使用)
ECMAScript 5 Strict Mode
ES5的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试
- "use strict"; //以下情况下抛出异常
- //对未定义的变量赋值
- //操作被设置为不可写，不可配置或不可扩充的属性
- //删除变量，函数，参数
- //在对象直接量里重复定义属性
- //eval做关键字，在eval的字符串里定义变量
- //覆写arguments
- //使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己）
- //(function(){ ... }).call( null ); // Exception
- //使用with
约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
支持：无
替代/过渡：……从现在开始养成严谨的编程习惯
ECMAScript 5 其他新特性
传递函数的引用时，绑定this
- Function.prototype.bind(thisArg, arg1, arg2....) /
支持：无
替代/过渡：prototype http://www.prototypejs.org/api/function/bind
ISO-formatted dates
- Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ
支持：无
替代/过渡：datejs http://code.google.com/p/datejs/
- String.prototype.trim()
支持：Firefox3.5
替代/过渡：各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript