本文整理了一些最重要(或者说人气比较高罢)的新标准,虽然它们多数还只是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="screen.css" type="text/css">
  1. @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插件

  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 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. animation-name: 'diagonal-slide';
  4. animation-duration: 5s;
  5. animation-iteration-count: 10;
  6. @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.openDatabase("notes", "", "The Example Notes App!", 1048576);
  2. db.transaction(function(tx) {
  3. tx.executeSql(‘SELECT * FROM Notes’, [], 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+ 替代/过渡:Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

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

  1. var myWorker = new Worker('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+ 替代/过渡:Gears http://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+ 替代/过渡:Gears http://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. <video controls>
  2. <source src=“zombie.ogg” type=“video/ogg”/>
  3. <source src=“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标签嵌套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("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.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标准化的东西……

  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.js http://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 ) //克隆或继承对象
  2. Object.keys( obj ) //数据结构的映射
  3. Object.getOwnPropertyNames( obj )
  4. Object.preventExtensions( obj ) //不能添加新属性
  5. Object.isExtensible( obj )
  6. Object.seal( obj ) //不能删除和修改属性的配置,不能添加新属性
  7. Object.isSealed( obj )
  8. Object.freeze( obj ) //不能删除和修改属性的配置,不能添加新属性,不能写属性
  9. 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(){ return name; },
  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. get innerHTML() { return …; },
  3. set innerHTML(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....) /

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

ISO-formatted dates

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

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

  1. String.prototype.trim()

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

HTML5, CSS3, ES5新的web标准和浏览器支持一览 转的更多相关文章

  1. 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  

  2. Web存储(Web Storage)的浏览器支持情况

    所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...

  3. 使用Modernizr探测HTML5/CSS3新特性(转载)

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

  4. 使用Modernizr探测HTML5/CSS3新特性

    [转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和Jav ...

  5. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  6. html5/css3常考面试题

    一.HTML5 CSS3 CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gra ...

  7. HTML5 CSS3面试题

    一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  8. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

  9. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

随机推荐

  1. Windows 服务器部署 asp.net core

    踩坑日记与 Windows 服务器部署 asp.net core 指南. 准备 操作系统:Windows Server 2008 R2 或更高版本 文件: Microsoft Visual C++ 2 ...

  2. [ 原创 ] git使用技巧

    Git的使用--如何将本地项目上传到Github Git分支图介绍 https://www.cnblogs.com/cheneasternsun/p/5952830.html https://www. ...

  3. windows下thrift的使用(C++)

    thrift cpp环境搭建: 1.  安装boost_1_53_0,注意,使用vs2010版本时,使用二进制的boost安装版本,生成的lib有可能是,在后续操作会出问题.在源码目录中,运行boot ...

  4. 安卓 开机 动画 酷派大神F1开机动画 美化 自定义 修改

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 酷派大神F1开机动画.rar

  5. PHP-FPM高负载的解决办法

    =================== 优化设置 ========================= When you running a highload website with PHP-FPM ...

  6. zoj 3157 Weapon 逆序数/树状数组

    B - Weapon Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit Sta ...

  7. .net mvc控制器传递方法到视图

    很多人都是在视图里面定义方法,然后再使用.我个人也是这么干的.但是为了验证是否可以将方法从控制器传递到视图,所以做了个测试.结果真的可以.原理是利用了委托(delegate),因为委托本身就是一种类型 ...

  8. Linux下分割、合并文件——dd和cat

    功能说明:读取,转换并输出数据. 语 法:dd [bs=<字节数>][cbs=<字节数>][conv=<关键字>][count=<区块数>][ibs=& ...

  9. Delphi7下使用FastMM4

    1> 将文件Replacement BorlndMM DLL/Precompiled/for Delphi IDE/Performance/BorlndMM.dll,替换掉Delphi/Bin下 ...

  10. 为什么说CLR是类型安全的

    CLR总是知道托管堆上的对象是什么类型,这是CLR类型安全的前提.托管堆上的每个对象都有一个"类型对象指针",指向托管堆上Type对象的一个实例.我们总是可以通过System.Ob ...