仓酷云
标题:
给大家带来HTML5和CSS3新的WEB尺度和扫瞄器撑持
[打印本页]
作者:
深爱那片海
时间:
2015-1-15 23:22
标题:
给大家带来HTML5和CSS3新的WEB尺度和扫瞄器撑持
HTML5语音识别（现在一般用在搜索上），目前相关介绍还是挺多的。为何呢？因为很简单！网页制造poluoluo文章简介：因为是源自条记，对每一个条目我只会列出称号和语法特性，临时没工夫写具体的注释和可实行的示例，可是会给出相干的文档地点，除列出已撑持该特征的扫瞄器，也会为不撑持的扫瞄器供应替换/过渡的完成。
好罢这篇原本是我暗里做的条记，我出格喜好在Evernote上做备忘的条记，固然前次看到漏屋先生的文章里说我如今的岁数才方才进进影象力的顶峰期……可是我的自傲心仍旧屡受冲击！好比跟他人会商TheDarkKnight里小丑在病院对审查官说了甚么让他酿成双面人，我一句对白都想不起来，另有bigbangtheorys2里penny玩ageofconan时的人物名字是”QueenPenelope”，我看的时分印象很深，一个月后就连奥德赛都想不起来了。留份条记总以为内心扎实些……啊又跑题了本文收拾了一些最主要（大概说人气对照高罢）的新尺度，固然它们多半还只是w3c的草案，离Recommendation级别还早，却已成为新一轮扫瞄器年夜战中备受追捧的明星，开辟者社区里也出现出大批相干的demo和API封装，有些已进进临盆情况（好比google在iphone上完成的gmail离线使用），实在我以为现在的web范畴里，从厂商公有手艺转换成委员会尺度再转换成通用手艺发生杀手级使用的周期已明显的减速了，是由于如今webapplication的需求太高了么……
UPDATE：
方才在solidot发软文的时分我俄然想分明怎样表述这个成绩：实在如今良多扫瞄器厂商同时也是基于扫瞄器的使用开辟者和web尺度的制订者，就仿佛修建舞台的工程师同时也是舞台上的演员和跳舞举措的导演一样，以是google,mozilla,apple们都在尽心尽力的完成那些有益于开辟web使用的手艺尺度，立即它们仍是W3CWorkingDraft，比拟之下IEteam就对照缺少动力，公然企图经济缺少活气亚XD……
因为是源自条记，对每一个条目我只会列出称号和语法特性，临时没工夫写具体的注释和可实行的示例，可是会给出相干的文档地点，除列出已撑持该特征的扫瞄器，也会为不撑持的扫瞄器供应替换/过渡的完成。
===================空话停止的支解线=======================
CSS3Mediaqueries
对全部外链css文件和部分css代码利用的媒体范例侦测，人气高的缘故原由明显是由于挪动设备……
<linkmedia=“alland(orientation:portrait)”src="screen.css"type="text/css">
@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/
撑持：Firefox3.5+,Safari3+,Opera7+
CSS32DTransforms
css变形，有人用这个完成伪3d效果和扭转效果的jquery插件
-moz-transform:rotate(-45deg)skew(15deg,15deg);
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/
撑持：Firefox3.5+,Safari3.1+
替换/过渡：IE5.5+MatrixFilterhttp://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx
CSS3TransitionsandCSSAnimations
备受等候的css动画，webkit团队提出的草案，transition完成复杂的属性突变，animation界说更庞大的动画效果
transition-property:width;
transition-duration:1s;
animation-name:diagonal-slide;
animation-duration:5s;
animation-iteration-count:10;
@keyframesdiagonal-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/
撑持：Safari3.1+
CSS3Downloadablefonts
能在网页里嵌进恣意字体是计划师的妄想……不外这里撑持的也仅限truetype和opentype
@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
撑持：Firefox3.5+,Safari3.1+,Opera10.0+,IE4.0+
附赠：其他CSS3property的兼容性
ppk同砚保护的文档:http://www.quirksmode.org/css/contents.html
css3.info保护的文档：http://www.css3.info/modules/selector-compat/
一个测试页面：http://westciv.com/iphonetests/
HTML5DOMStorage
简便的耐久存储，键值对的情势
window.localStorage
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
撑持：Firefox3.5+,Safari4.0+,IE8.0+
HTML5OfflineApplicationCache
用一个manifest文件缓存静态资本（图片,css,js之类）在离线形态下利用，不是布局化数据
<htmlmanifest="foo.manifest">
CACHEMANIFEST
index.html
style/default.css
images/logo.png
w3c尺度：http://www.w3.org/TR/offline-webapps/#offline
MDC文档：https://developer.mozilla.org/en/Offline_resources_in_Firefox
撑持：Firefox3.5+
HTML5DatabaseStorage
当地数据库，撑持sql，最早是googlegears完成，如今的w3c草案的编纂也是google的工程师……但奇异的是，gears的api跟如今的草案不兼容，chrome乃至为了保存绑缚的gears的数据库api而删除webkit完成的html5api……而google在iphone上完成gmail离线功效的时分又接纳webkit的api……真纠结……
vardb=window.openDatabase("notes","","TheExampleNotesApp!",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
撑持：Safari3.1+
替换/过渡：Gearshttp://code.google.com/p/gears/wiki/Database2API
HTML5WebWorkers
多线程，在背景实行庞大运算，不克不及操纵dom，线程之间经由过程动静事务通讯
varmyWorker=newWorker(my_worker.js);
myWorker.onmessage=function(event){event.data};
myWorker.postMessage(str);
w3c尺度：http://www.w3.org/TR/workers/
MDC文档：https://developer.mozilla.org/En/Using_web_workers
撑持：Firefox3.5+
替换/过渡：Gearshttp://code.google.com/p/gears/wiki/HTML5WorkerProposal
HTML5Geolocation
地舆api
window.navigator.geolocation
w3c尺度：http://www.w3.org/TR/geolocation-API/
MDC文档：https://developer.mozilla.org/En/Using_geolocation
撑持：Firefox3.5+
替换/过渡：Gearshttp://code.google.com/p/gears/wiki/GeolocationAPI
HTML5DragandDrop
原生拖拽事务
ondragstart
ondrag
ondragend
//拖拽过程当中
ondragenter
ondragover
ondragleave
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
撑持：Firefox3.5+,Safari2.0+,Chrome1.0+,IE5.0+
HTML5AudioandVideo
用html标签来嵌进视频音频的优点并不是是“开源格局”，而是“开放性”，让多媒体能够与其他页面元故旧互，大概用页面手艺往跟视频“mashup”，这类随便组合和交互的才能是web手艺昌盛的基石，也是像flash这类关闭RIA容器最年夜的弱点。
<videocontrols>
<sourcesrc=“zombie.ogg”type=“video/ogg”/>
<sourcesrc=“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/
撑持：Firefox3.5+,Safari3.0+,Chrome3.0+
替换/过渡：用video标签嵌套embedhttp://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/
HTML5Canvas
apple创造，最早使用于dashboard，今朝支流的js图象手艺，mozilla已在完成OpenGLES尺度的Canvas3D了，别的听说ieteam为撑持canvas做了大批事情……实践上canvasapi相称底层，出格是交互方面，不如svg直不雅，以是呈现了良多封装它的库
varctx=$(#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
撑持：Firefox1.5+,Safari2.0+,Chrome1.0+,Opera9.0+
替换/过渡：excanvas.jshttp://code.google.com/p/explorercanvas/
SVG
w3c尺度：http://www.w3.org/TR/SVG12/
IBMDW教程：http://www.ckuyun.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896
撑持：Firefox1.5+,Safari3.0+,Chrome1.0+,Opera9.0+
替换/过渡：raphael.jshttp://raphaeljs.com/
XMLHttpRequest2
次要是增添跨域才能和哀求过程当中的事务
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
撑持：Firefox3.5+（完成了部分）,IE8.0+（完成了部分）
AccessControl
千呼万唤的跨域会见把持，今朝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-documentMessaging(XDM)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx
撑持：Firefox3.5+,IE8.0+
E4X(ECMA-357)
Firefox和ActionScript3早就完成了的器材……不外实在如今json这么盛行，有无E4X仿佛都无所谓了～（瞎扯的，实在在js代码里间接写dom工具而不是html字符串，会便利良多）
MDC文档：https://developer.mozilla.org/en/E4X
撑持：Firefox1.5+
ECMAScript5NativeJSON
原生的JSON撑持，速率和平安性都比eval强一百倍亚一百倍，别的要注重DouglasCrockford的json2.js是一个用js完成的js注释器，以是平安性更好
JSON.parse(text,translate)
JSON.stringify(obj,translate)
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
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
撑持：Firefox3.5+,IE8+
替换/过渡：json2.jshttp://www.json.org/json2.js
ECMAScript5ArrayExtras
js1.6里完成的数组办法，次要是forEach,map,fliter这几个函数式编程里十分主要的办法，另有反向查询
Array.prototype.indexOf(str)
Array.prototype.lastIndexOf(str)
Array.prototype.every(fn)
Array.prototype.some(fn)
Array.prototype.filter(fn)
Array.prototype.forEach(fn)
Array.prototype.map(fn)
MDC文档：https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras
撑持：Firefox2.0+,Safari3.0+,GoogleChrome1.0+,Opera9.5+
替换/过渡：都能够经由过程扩大Array.prototype来摹拟
ECMAScript5isArray()
辨别数组和工具
Array.isArray([]);//true
撑持：无
替换/过渡：Array.isArray=function(a){returnObject.prototype.toString.call(a)===“[objectArray]”;};
ECMAScript5Object
用GOOGLEI/O演讲里的话来讲：更鲁棒(robust)的工具体系
Object.getPrototypeOf(obj)
约翰同砚的解说：http://ejohn.org/blog/objectgetprototypeof/
撑持：Firefox3.5
替换/过渡：object.__proto__或object.constructor.prototype
Object.create(proto,props)//克隆或承继工具
Object.keys(obj)//数据布局的映照
Object.getOwnPropertyNames(obj)
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能够本人完成
ECMAScript5PropertyDescriptor
工具属性的会见把持
Object.getOwnPropertyDescriptor(obj,prop)
Object.defineProperty(obj,prop,desc)
Object.defineProperties(obj,props)
desc={
value:true,
writable:false,//修正
enumerable:true,//forin
configurable:true,//删除和修正属性
get:function(){returnname;},
set:function(value){name=value;}
}
约翰同砚的解说：http://ejohn.org/blog/ecmascript-5-objects-and-properties/
撑持：无
替换/过渡：Object.defineProperties实在相称于jQuery.extend，用来完成Mixin
ECMAScript5GettersandSetters
python和ruby里都有的属性会见办法
obj={
getinnerHTML(){return…;},
setinnerHTML(newHTML){…}
};
MDC文档：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
撑持：Firefox2.0+,Safari3.0+,GoogleChrome1.0+,Opera9.5+
替换/过渡：
非尺度，Firefox1.5里的旧办法
HTMLElement.prototype.__defineGetter__("innerHTML",function(){});
HTMLElement.prototype.__defineSetter__("innerHTML",function(val){});
撑持：Firefox2.0+,Safari3.0+,GoogleChrome1.0+,Opera9.5+
尺度
Object.defineProperty(document.body,"innerHTML",{get:function(){}});
MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
撑持：IE8+(只能对DOM利用)
ECMAScript5StrictMode
ES5的严厉形式，删除旧版本中简单引发成绩的元素，而且会显式的报错，便利调试
"usestrict";//以下情形下抛出非常
//对不决义的变量赋值
//操纵被设置为不成写，不成设置或不成扩大的属性
//删除变量，函数，参数
//在工具间接量里反复界说属性
//eval做关头字，在eval的字符串里界说变量
//覆写arguments
//利用arguments.caller和arguments.callee（匿名函数必需签字才干援用本人）
//(function(){...}).call(null);//Exception
//利用with
约翰同砚的解说：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
撑持：无
替换/过渡：……从如今入手下手养成松散的编程习气
ECMAScript5其他新特征
传送函数的援用时，绑定this
Function.prototype.bind(thisArg,arg1,arg2....)/
撑持：无
替换/过渡：prototypehttp://www.prototypejs.org/api/function/bind
ISO-formatteddates
Date.prototype.toISOString()//Prints2009-05-21T16:06:05.000TZ
撑持：无
替换/过渡：datejshttp://code.google.com/p/datejs/
String.prototype.trim()
撑持：Firefox3.5
替换/过渡：各类正则完成http://blog.stevenlevithan.com/archives/faster-trim-javascript
===================空话又入手下手的支解线=======================
实在我把这个器材收回来是但愿能增进立异的气氛，让更多人熟悉到良多新手艺已进进到“有用”阶段。
假如只是想做个实行性的webgame，或是只能用于特定平台的使用（好比iphone，greasemonkey），firefox3.5+webkit的撑持就已充足罢。
假如不克不及忽视支流平台，有良多手艺能让你gracefullydegrade（文雅的退步）大概拔取分歧的办法完成兼容的接口。
假如你等不及IEx在多少年后完成xx，但愿提早享用福利，有些手艺的计划准绳就是让你能在没有native撑持的情形下能够本人完成千篇一律的功效或语法糖（syntacticsugar），好比ES5工具的承继和会见把持，从ES4/ActionScript3时代那些老土的关头词（classextandsprivatestatic）改成了Object.create(p,attrs).defineProperty(o,n,attrs).defineProperties(o,attrs).freeze().getOwnPropertyNames().map(fn)，不会只是为了酷炫罢……
良多人都喜好埋怨“我这辈子都没时机用HTML5”，可是只需把视野从本人脚下那巴掌年夜块地移开看看别处，会发明天下实在一向都在改动喔XD
</p>
HTML5开发的网页文档类型极其简单，就够了，记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明.
作者:
兰色精灵
时间:
2015-1-17 22:14
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
作者:
蒙在股里
时间:
2015-1-26 22:32
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。
作者:
乐观
时间:
2015-2-5 03:26
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者:
小妖女
时间:
2015-2-11 03:49
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
作者:
简单生活
时间:
2015-3-1 21:18
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。
作者:
莫相离
时间:
2015-3-11 00:36
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者:
若相依
时间:
2015-3-17 17:09
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2