思享工具箱

HTML5, CSS3, ES5新的web标准和浏览器支持一览 转

摘要：
更新：当我在solidot上发布一条软消息时，我突然想知道如何表达这个问题：事实上，许多浏览器制造商也是基于浏览器的应用程序开发人员和网络标准制定者，就像搭建舞台的工程师也是舞台上的演员和舞蹈指导一样，和苹果公司都在努力实施有利于开发web应用程序的技术标准，即使他们仍然是W3CWorkingDraft，与IEteam相比，IEteam缺乏动力。事实上，计划经济缺乏活力。XD…CSS3 Mediaqueries检测整个外部链css文件和一些css代码所使用的媒体类型。高受欢迎的原因显然是移动设备

本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是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. <linkmedia=“alland(orientation:portrait)”src="http://t.zoukankan.com/screen.css"type="text/css">
  1. @mediaalland(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)skew(15deg, 15deg);
  1. 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 Filterhttp://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;
  4. animation-name: 'diagonal-slide';
  5. animation-duration: 5s;
  6. animation-iteration-count: 10;
  7. @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. <htmlmanifest="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. vardb=window.openDatabase("notes","","The Example Notes App!",1048576);
  2. db.transaction(function(tx){
  3. tx.executeSql(‘SELECT*FROMNotes’,[],function(tx,rs){});
  4. });

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+替代/过渡：Gearshttp://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

多线程，在后台执行复杂运算，不能操作dom，线程之间通过消息事件通信

  1. varmyWorker=newWorker('my_worker.js');
  2. myWorker.onmessage=function(event){event.data};
  3. myWorker.postMessage(str);

w3c标准：http://www.w3.org/TR/workers/ MDC文档：https://developer.mozilla.org/En/Using_web_workers

支持：Firefox 3.5+替代/过渡：Gearshttp://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

地理api

  1. window.navigator.geolocation

w3c标准：http://www.w3.org/TR/geolocation-API/ MDC文档：https://developer.mozilla.org/En/Using_geolocation

支持：Firefox 3.5+替代/过渡：Gearshttp://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop

原生拖拽事件

  1. ondragstart
  2. ondrag
  3. ondragend
  4. //拖拽过程中
  5. ondragenter
  6. ondragover
  7. ondragleave
  8. 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. <videocontrols>
  2. <sourcesrc=“zombie.ogg”type=“video/ogg”/>
  3. <sourcesrc=“zombie.mp4″type=“video/mp4″/>
  4. </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标签嵌套embedhttp://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. varctx= $('#canvas')[0].getContext("2d");
  2. ctx.fillStyle="#00A308";
  3. ctx.beginPath();
  4. ctx.arc(220,220,50,0,Math.PI*2,true);
  5. ctx.closePath();
  6. ctx.fill();

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

支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+替代/过渡：excanvas.jshttp://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.jshttp://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标准化的东西……

  1. 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,translate)
  3. String.prototype.toJSON
  4. Boolean.prototype.toJSON
  5. Number.prototype.toJSON
  6. 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.jshttp://www.json.org/json2.js

ECMAScript 5 Array Extras

js1.6里实现的数组方法，主要是forEach, map, fliter这几个函数式编程里非常重要的方法，还有反向查询

  1. Array.prototype.indexOf(str)
  2. Array.prototype.lastIndexOf(str)
  3. Array.prototype.every(fn)
  4. Array.prototype.some(fn)
  5. Array.prototype.filter(fn)
  6. Array.prototype.forEach(fn)
  7. 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()

区分数组和对象

  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)

约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/

支持：Firefox3.5替代/过渡：object.__proto__ 或 object.constructor.prototype

  1. Object.create(proto,props)//克隆或继承对象
  3. Object.keys(obj)//数据结构的映射
  4. Object.getOwnPropertyNames(obj)
  6. Object.preventExtensions(obj)//不能添加新属性
  7. Object.isExtensible(obj)
  9. Object.seal(obj)//不能删除和修改属性的配置，不能添加新属性
  10. Object.isSealed(obj)
  12. Object.freeze(obj)//不能删除和修改属性的配置，不能添加新属性，不能写属性
  13. Object.isFrozen(obj)

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无替代/过渡：Object.create和Object.keys可以自己实现

ECMAScript 5 Property Descriptor

对象属性的访问控制

  1. Object.getOwnPropertyDescriptor(obj,prop)
  2. Object.defineProperty(obj,prop,desc)
  3. Object.defineProperties(obj,props)
  4. desc={
  5. value:true,
  6. writable:false,//修改
  7. enumerable:true,//for in
  8. configurable:true,//删除和修改属性
  9. get:function(){returnname;},
  10. set:function(value){name=value;}
  11. }

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无替代/过渡：Object.defineProperties其实相当于jQuery.extend，用来实现Mixin

ECMAScript 5 Getters and Setters

python和ruby里都有的属性访问方法

  1. obj={
  2. getinnerHTML(){return…;},
  3. setinnerHTML(newHTML){…}
  4. };

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里的旧方法

  1. HTMLElement.prototype.__defineGetter__("innerHTML",function(){});
  2. HTMLElement.prototype.__defineSetter__("innerHTML",function(val){});

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

  1. 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的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试

  1. "use strict";//以下情况下抛出异常
  2. //对未定义的变量赋值
  3. //操作被设置为不可写，不可配置或不可扩充的属性
  4. //删除变量，函数，参数
  5. //在对象直接量里重复定义属性
  6. //eval做关键字，在eval的字符串里定义变量
  7. //覆写arguments
  8. //使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己）
  9. //(function(){ ... }).call( null ); // Exception
  10. //使用with

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

支持：无替代/过渡：……从现在开始养成严谨的编程习惯

ECMAScript 5 其他新特性

传递函数的引用时，绑定this

  1. Function.prototype.bind(thisArg,arg1,arg2....)/

支持：无替代/过渡：prototypehttp://www.prototypejs.org/api/function/bind

ISO-formatted dates

  1. Date.prototype.toISOString()// Prints 2009-05-21T16:06:05.000TZ

支持：无替代/过渡：datejshttp://code.google.com/p/datejs/

  1. String.prototype.trim()

支持：Firefox3.5替代/过渡：各种正则实现http://blog.stevenlevithan.com/archives/faster-trim-javascript

标签：#html5 app开发#safari#html5#web技术#css3动画#es5#web开发#object#mozilla#webkit#css#web标准#ecmascript#w3c标准 | 浏览：248 | 发布日期：

免责声明：文章转载自《HTML5, CSS3, ES5新的web标准和浏览器支持一览 转》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Java集合之ConcurrentHashMap解析linux svn服务器搭建、客户端操作、备份与恢复下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

Python标准库存储对象(pickle包，cPickle包)

作者：Vamei 出处：http://www.cnblogs.com/vamei 欢迎转载，也请保留这段声明。谢谢！ 在之前对Python对象的介绍中 (面向对象的基本概念，面向对象的进一步拓展)，我提到过Python“一切皆对象”的哲学，在Python中，无论是变量还是函数，都是一个对象。当Python运行时，对象存储在内存中，随时等待系统的调用。然而...

【实战HTML5与CSS3 第二篇】绚丽的快速导航！

目录 【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！ 【实战HTML5与CSS3 第二篇】绚丽的快速导航！ 【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码) 前言 今天9点就起来了，因为下午出去有个聚会，所以就早点起来进行，否则这个进度有点吃紧啊，昨天初略的完成了导航以及爆炸的图片，这里来回顾下：...

Microsoft Visual Studio Web 创作组件安装失败的解决方法

在网上查一下说是Office2007的问题。我把Office2007卸载了还是不行。 　　然后用Windows Install Clean Up工具清理，还是不行。 　　郁闷了。然后在安装包中的下面路径下找到WCUWebDesignerCore找到“Visual Studio Web 创作组件”的安装程序WebDesignerCore.EXE，双击出现提示...

WEB开发中的字符集和编码

引言 我相信很多人在初接触编程时，都被字符集狠狠地虐过，特别是数据库的中文乱码问题，那么乱码是怎么产生的呢？ 我们都知道计算机是以二进制存储和运行的，那么它是怎么把二进制数据转换为各种文字的呢？ 还有我们常用的各种字符集，常用的编码转换，都是怎么进行的呢？ 本博文所写的内容不是技术干货，只是对我们常用的字符集和编码的一个小总结，小科普。我相信读完本文，您应...

css背景透明字体不透明的解决方案

在设计中，我们经常看到有一定透明度深色背景搭配浅色字体的布局，我们一般设置 opacity: 0.3; background: #D8D8D8;color:#ffffff; 就会导致字体也有一定的透明度。 解决方案，用css颜色的rgba来解决，将背景色转化为对应的rgb值，然后加上透明度，如下所示： background: rgba(261,261...

CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。 这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。 特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方...

最新文章

随机推荐

思享工具箱导航