HTML5 CSS3新的WEB标准和浏览器支持

2020-04-21 08:03:39易采站长站整理

<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解释器,所以安全性更好