HTML5 CSS3新的WEB规范和访问器适用

日期：2021-02-26 类型：科技新闻 

关键词：凡科自助建站，企业网站怎么建设，智能建站系统，自己建个网站，搭建网站基本步骤

因为是源自笔记，对每一个条目我只会列出叫法和英语的语法特点，临时没時间写详尽的解释和可实行的示例，可是会得出有关的文本文档详细地址，除列出早已适用该特点的访问器，也会为不适用的访问器出示取代/过渡的完成。好罢这篇原本是我私底下做的笔记，我非常喜爱在Evernote上做备忘的笔记，尽管之前看到漏屋老师的文章内容里说我如今的年纪才不久进到记忆力力的顶峰期……可是我的信心依然屡受严厉打击！例如跟他人探讨The Dark Knight里小丑在医院门诊对检察官说了甚么让他变为两面人，我1句对白都想不起来，也有big bang theory s2里penny玩age of conan时的角色姓名是”Queen Penelope”，我看的情况下印象很深，1个月后就连奥德赛都想不起来了。留份笔记总感觉内心安稳些……啊又跑题了

本文梳理了1些最关键（或说人气较为高罢）的新规范，尽管它们大部分还只是w3c的草案，离Recommendation级別还早，却早已变成新1轮访问器对决中备受追捧的明星，开发设计者小区里也出现出很多有关的demo和API封裝，一些早已进到生产制造自然环境（例如google在iphone上完成的gmail线下运用），实际上我感觉现如今的web行业里，从厂商独享技术性变换成委员会规范再变换成通用性技术性造成杀手级运用的周期早已明显的加快了，是由于如今web application的要求太高了么…… UPDATE：刚刚在solidot发软文的情况下我忽然想搞清楚如何描述这个难题：实际上如今许多访问器厂商另外也是根据访问器的运用开发设计者和web规范的制订者，就仿佛修建舞台的工程项目师另外也是舞台上的演员和民族舞蹈姿势的导演1样，因此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(⑷5deg) skew(15deg, 15deg);
  1. sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c规范：http://www.w3.org/TR/css3⑵d-transforms/
MDC文本文档：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkitblog的详细介绍: 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.  
  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/
webkitblog的详细介绍：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/
1个检测网页页面：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

用1个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
webkitblog的详细介绍：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
webkitblog的详细介绍：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 三d了，此外听说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有1些不一样，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⑶57)

Firefox和ActionScript3早就完成了的物品……但是实际上如今json这么时兴，有木有E4X仿佛都没有谓了～（乱说的，实际上在js编码里立即写dom目标而并不是html标识符串，会便捷许多）

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

适用：Firefox 1.5+

ECMAScript 5 Native JSON

原生态的JSON适用，速率和安全性性都比eval强1百倍亚1百倍，此外要留意Douglas Crockford的json2.js是1个用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⑶1/
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.  
  3. Object.keys( obj ) //数据信息构造的投射
  4. Object.getOwnPropertyNames( obj )
  5.  
  6. Object.preventExtensions( obj ) //不可以加上新特性
  7. Object.isExtensible( obj )
  8.  
  9. Object.seal( obj ) //不可以删掉和改动特性的配备，不可以加上新特性
  10. Object.isSealed( obj )
  11.  
  12. Object.freeze( obj ) //不可以删掉和改动特性的配备，不可以加上新特性，不可以写特性
  13. Object.isFrozen( obj )

约翰同学的解读：http://ejohn.org/blog/ecmascript⑸-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⑸-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⑸-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⑵1T16:06:05.000TZ

适用：无
取代/过渡：datejs http://code.google.com/p/datejs/

  1. String.prototype.trim()

适用：Firefox3.5
取代/过渡：各种各样正则表达式完成 http://blog.stevenlevithan.com/archives/faster-trim-javascript


===================空话又刚开始的切分线=======================

实际上我把这个物品传出来是期待能推动自主创新的氛围，让更多人了解到许多新技术应用早已进到到“好用”环节。

假如只是想做个试验性的webgame，或是只能用于特殊服务平台的运用（例如iphone，greasemonkey），firefox3.5+webkit的适用就早已充足罢。

假如不可以疏忽流行服务平台，有许多技术性能让你gracefully degrade（雅致的衰退）或选择不一样的方式完成适配的插口。

假如你等不如IE x在若干年后完成xx，期待提早享有福利，一些技术性的设计方案标准便是让你能在沒有native适用的状况下能够自身完成1模1样的作用或英语的语法糖（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”，可是要是把视野从自身脚下那巴掌大块地移开看看别处，会发现全球实际上1直都在更改喔XD

上一篇：应用css怎样制做時间ICON方式实践活动 返回下一篇：没有了