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

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

本地数据库,支持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 * FROM Notes’, [], 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文档:https://developer.mozilla.org/En/Using_web_workers

支持:Firefox 3.5+
替代/过渡:Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

地理api

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

原生拖拽事件

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

支持:Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+

HTML5 Audio and Video

用html标签来嵌入视频音频的好处并非是“开源格式”,而是“开放性”,让多媒体可以与其他页面元素交互,或者用页面技术去跟视频“mashup”,这种随意组合和交互的能力是web技术兴盛的基石,也是像flash这类封闭RIA容器最大的缺点。

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>