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

2020-03-24 16:25:01

字体：大中小

来源：转载

供稿：网友

由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。好罢这篇本来是我私下做的笔记，我特别喜欢在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代码使用的媒体类型侦测，人气高的原因显然是因为移动设备
w3c标准：http://www.w3.org/TR/css3-mediaqueries/
MDC文档：http://developer.mozilla.org/En/CSS/Media_queries
Opera文档：http://www.opera.com/docs/specs/css/支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transformscss变形，有人用这个实现伪3d效果以及旋转效果的html' target='_blank'>jquery插件
w3c标准：http://www.w3.org/TR/css3-2d-transforms/
MDC文档：http://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定义更复杂的动画效果
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
w3c标准：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档：http://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简洁的持久存储，键值对的形式
w3c标准：http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档：http://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之类）在离线状态下使用，不是结构化数据
w3c标准：http://www.w3.org/TR/offline-webapps/#offline
MDC文档：http://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 * FROMNotes , [], 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文档：http://developer.mozilla.org/En/Using_web_workers支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation地理api
w3c标准：http://www.w3.org/TR/geolocation-API/
MDC文档：http://developer.mozilla.org/En/Using_geolocation支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop原生拖拽事件
w3c标准：http://www.w3.org/TR/html5/editing.html#dnd
MDC文档：http://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容器最大的缺点。
sourcesrc= zombie.ogg type= video/ogg / sourcesrc= zombie.mp4 type= video/mp4 / /video
MDC文档：http://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 Canvasapple发明，最早应用于dashboard，目前主流的js图像技术，mozilla已经在实现OpenGL ES标准的Canvas 3D了，另外据说ie team为支持canvas做了大量工作实际上canvas api相当底层，特别是交互方面，不如svg直观，所以出现了很多封装它的库
MDC文档：http://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/

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文档：http://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标准化的东西
w3c标准：http://www.w3.org/TR/cors/
MDC文档：http://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文档：http://developer.mozilla.org/en/E4X支持：Firefox 1.5+

ECMAScript 5 Native JSON原生的JSON支持，速度和安全性都比eval强一百倍亚一百倍，另外要注意Douglas Crockford的json2.js是一个用js实现的js解释器，所以安全性更好
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 Extrasjs1.6里实现的数组方法，主要是forEach, map, fliter这几个函数式编程里非常重要的方法，还有反向查询
MDC文档：http://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 = function(a){ return Object.prototype.toString.call(a) === [object Array] };

ECMAScript 5 Object用GOOGLE I/O演讲里的话来说：更鲁棒(robust)的对象系统

约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/支持：Firefox3.5
替代/过渡：object.__proto__ 或 object.constructor.prototype

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 Setterspython和ruby里都有的属性访问方法
getinnerHTML() { return ; }, setinnerHTML(newHTML) { }
MDC文档：http://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.__defineGetter__( innerHTML , function () {}); HTMLElement.prototype.__defineSetter__( innerHTML , function(val) {});
MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx支持：IE8+ (只能对DOM使用)

ECMAScript 5 Strict ModeES5的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试
//覆写arguments //使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己） //(function(){ ... }).call( null ); // Exception //使用with
约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/支持：无
替代/过渡：从现在开始养成严谨的编程习惯

ECMAScript 5 其他新特性传递函数的引用时，绑定this
支持：无
替代/过渡：prototype http://www.prototypejs.org/api/function/bindISO-formatted dates
支持：Firefox3.5
替代/过渡：各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript

===================废话又开始的分割线=======================其实我把这个东西发出来是希望能促进创新的氛围，让更多人认识到很多新技术已经进入到实用阶段。如果只是想做个实验性的webgame，或是只能用于特定平台的应用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已经足够罢。如果不能无视主流平台，有很多技术能让你gracefully degrade（优雅的退化）或者选取不同的方法实现兼容的接口。如果你等不及IE x在若干年后实现xx，希望提前享受福利，有些技术的设计原则就是让你能在没有native支持的情况下可以自己实现一模一样的功能或语法糖（syntactic sugar），比如ES5对象的继承和访问控制，从ES4/ActionScript3时期那些老土的关键词（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不会只是为了酷炫罢很多人都喜欢抱怨我这辈子都没机会用HTML5 ，但是只要把视线从自己脚下那巴掌大块地移开看看别处，会发现世界其实一直都在改变喔XDhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS常见样式

下一篇：CSS框架的利与弊