久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

HTML5, CSS3, ES5新的web標(biāo)準(zhǔn)和瀏覽器支持一覽 轉(zhuǎn)（一）

 quasiceo 2015-06-10

本文整理了一些最重要（或者說人氣比較高罷）的新標(biāo)準(zhǔn),，雖然它們多數(shù)還只是w3c的草案,，離Recommendation級(jí)別還早，卻已經(jīng)成為新一輪瀏覽器大戰(zhàn)中備受追捧的明星,，開發(fā)者社區(qū)里也涌現(xiàn)出大量相關(guān)的demo和API封裝,，有些已經(jīng)進(jìn)入生產(chǎn)環(huán)境（比如google在iphone上實(shí)現(xiàn)的gmail離線應(yīng)用），其實(shí)我覺得如今的web領(lǐng)域里,，從廠商私有技術(shù)轉(zhuǎn)換成委員會(huì)標(biāo)準(zhǔn)再轉(zhuǎn)換成通用技術(shù)產(chǎn)生殺手級(jí)應(yīng)用的周期已經(jīng)顯著的加速了,，是因?yàn)楝F(xiàn)在web application的需求太高了么…… UPDATE：剛才在solidot發(fā)軟文的時(shí)候我突然想明白怎么表述這個(gè)問題：其實(shí)現(xiàn)在很多瀏覽器廠商同時(shí)也是基于瀏覽器的應(yīng)用開發(fā)者和web標(biāo)準(zhǔn)的制定者，就好像修筑舞臺(tái)的工程師同時(shí)也是舞臺(tái)上的演員和舞蹈動(dòng)作的導(dǎo)演一樣,，所以google, mozilla, apple們都在不遺余力的實(shí)現(xiàn)那些有利于開發(fā)web應(yīng)用的技術(shù)標(biāo)準(zhǔn),，即時(shí)它們還是W3C Working Draft，相比之下IE team就比較缺乏動(dòng)力,，果然計(jì)劃經(jīng)濟(jì)缺乏活力亞XD……

由于是源自筆記,，對(duì)每個(gè)條目我只會(huì)列出稱呼和語法特征，暫時(shí)沒時(shí)間寫詳細(xì)的解釋和可執(zhí)行的示例,，但是會(huì)給出相關(guān)的文檔地址,，除了列出已經(jīng)支持該特性的瀏覽器，也會(huì)為不支持的瀏覽器提供替代/過渡的實(shí)現(xiàn),。

 

CSS3 Media queries

對(duì)整個(gè)外鏈css文件和部分css代碼使用的媒體類型偵測(cè),，人氣高的原因顯然是因?yàn)橐苿?dòng)設(shè)備……

  1. <link media=“all and (orientation:portrait)” src="screen.css" type="text/css">
  1. @media all and (min-color: 4) { ... }

w3c標(biāo)準(zhǔn)：http://www./TR/css3-mediaqueries/
MDC文檔：https://developer.mozilla.org/En/CSS/Media_queries
Opera文檔：http://www./docs/specs/css/

支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transforms

css變形，有人用這個(gè)實(shí)現(xiàn)偽3d效果以及旋轉(zhuǎn)效果的jquery插件

  1. -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  1. sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c標(biāo)準(zhǔn)：http://www./TR/css3-2d-transforms/
MDC文檔：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介紹: http:///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動(dòng)畫,，webkit團(tuán)隊(duì)提出的草案,，transition實(shí)現(xiàn)簡單的屬性漸變，animation定義更復(fù)雜的動(dòng)畫效果

  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標(biāo)準(zhǔn)：http://www./TR/css3-transitions/
w3c標(biāo)準(zhǔn)：http://www./TR/css3-animations/
webkit博客的介紹：http:///blog/138/css-animation/
約翰同學(xué)的介紹：http:///blog/css-animations-and-javascript/

支持：Safari 3.1+

CSS3 Downloadable fonts

能在網(wǎng)頁里嵌入任意字體是設(shè)計(jì)師的夢(mèng)想……不過這里支持的也僅限truetype和opentype

  1. @font-face {}

w3c標(biāo)準(zhǔn)：http://www./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+

附贈(zèng)：其他CSS3 property的兼容性

ppk同學(xué)維護(hù)的文檔: http://www./css/contents.html
維護(hù)的文檔：http://www./modules/selector-compat/
一個(gè)測(cè)試頁面：http:///iphonetests/

HTML5 DOM Storage

簡潔的持久存儲(chǔ),，鍵值對(duì)的形式

  1. window.localStorage
  2. window.sessionStorage //可跨域,，標(biāo)簽頁關(guān)掉就清空

w3c標(biāo)準(zhǔn)：http://www./TR/webstorage/
ppk同學(xué)維護(hù)的兼容性列表：http://www./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

用一個(gè)manifest文件緩存靜態(tài)資源（圖片,css, js之類）在離線狀態(tài)下使用，不是結(jié)構(gòu)化數(shù)據(jù)

  1. <html manifest="foo.manifest">
  1. CACHE MANIFEST
  2. index.html
  3. style/default.css
  4. images/logo.png

w3c標(biāo)準(zhǔn)：http://www./TR/offline-webapps/#offline
MDC文檔：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持：Firefox 3.5+

HTML5 Database Storage

本地?cái)?shù)據(jù)庫,，支持sql,，最早是google gears實(shí)現(xiàn)，現(xiàn)在的w3c草案的編輯也是google的工程師……但奇怪的是,，gears的api跟現(xiàn)在的草案不兼容,，chrome甚至為了保留捆綁的gears的數(shù)據(jù)庫api而刪除了webkit實(shí)現(xiàn)的html5 api……而google在iphone上實(shí)現(xiàn)gmail離線功能的時(shí)候又采用webkit的api……真糾結(jié)……

  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標(biāo)準(zhǔn)：http://www./TR/offline-webapps/#sql
webkit博客的介紹：http:///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

多線程，在后臺(tái)執(zhí)行復(fù)雜運(yùn)算,，不能操作dom,，線程之間通過消息事件通信

  1. var myWorker = new Worker('my_worker.js');
  2. myWorker.onmessage = function(event) { event.data };
  3. myWorker.postMessage(str);

w3c標(biāo)準(zhǔn)：http://www./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標(biāo)準(zhǔn)：http://www./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標(biāo)準(zhǔn)：http://www./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標(biāo)簽來嵌入視頻音頻的好處并非是“開源格式”，而是“開放性”,，讓多媒體可以與其他頁面元素交互,，或者用頁面技術(shù)去跟視頻“mashup”，這種隨意組合和交互的能力是web技術(shù)興盛的基石,，也是像flash這類封閉RIA容器最大的缺點(diǎn),。

  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
webkit博客的介紹：http:///blog/140/html5-media-support/

支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/過渡：用video標(biāo)簽嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/

HTML5 Canvas

apple發(fā)明,，最早應(yīng)用于dashboard，目前主流的js圖像技術(shù),，mozilla已經(jīng)在實(shí)現(xiàn)OpenGL ES標(biāo)準(zhǔn)的Canvas 3D了,，另外據(jù)說ie team為支持canvas做了大量工作……實(shí)際上canvas api相當(dāng)?shù)讓樱貏e是交互方面,，不如svg直觀,，所以出現(xiàn)了很多封裝它的庫

  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標(biāo)準(zhǔn)：http://www./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:///

XMLHttpRequest 2

主要是增加跨域能力以及請(qǐng)求過程中的事件

w3c標(biāo)準(zhǔn)：http://www./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+（實(shí)現(xiàn)了部分）, IE 8.0+（實(shí)現(xiàn)了部分）

Access Control

千呼萬喚的跨域訪問控制，目前firefox3.5和ie8有一些不同,，ie8搞的XDR和XDM我也不知道是不是準(zhǔn)備提交給w3c標(biāo)準(zhǔn)化的東西……

  1. Access-Control-Allow-Origin: http://foo.example

w3c標(biāo)準(zhǔn)：http://www./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早就實(shí)現(xiàn)了的東西……不過其實(shí)現(xiàn)在json這么流行,，有沒有E4X好像都無所謂了～（瞎說的，其實(shí)在js代碼里直接寫dom對(duì)象而不是html字符串,，會(huì)方便很多）

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

支持：Firefox 1.5+

ECMAScript 5 Native JSON

原生的JSON支持,，速度和安全性都比eval強(qiáng)一百倍亞一百倍，另外要注意Douglas Crockford的json2.js是一個(gè)用js實(shí)現(xiàn)的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./webdev/2009/02/12/native-json-in-firefox-31/
MSDN文檔：http://blogs./ie/archive/2008/09/10/native-json-in-ie8.aspx

支持：Firefox 3.5+, IE8+
替代/過渡：json2.js http://www./json2.js

ECMAScript 5 Array Extras

js1.6里實(shí)現(xiàn)的數(shù)組方法,，主要是forEach, map, fliter這幾個(gè)函數(shù)式編程里非常重要的方法，還有反向查詢

  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+
替代/過渡：都可以通過擴(kuò)展Array.prototype來模擬

ECMAScript 5 isArray()

區(qū)分?jǐn)?shù)組和對(duì)象

  1. Array.isArray([]); // true

支持：無
替代/過渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]”;};

ECMAScript 5 Object

用GOOGLE I/O演講里的話來說：更魯棒(robust)的對(duì)象系統(tǒng)

  1. Object.getPrototypeOf( obj )

約翰同學(xué)的講解：http:///blog/objectgetprototypeof/

支持：Firefox3.5
替代/過渡：object.__proto__ 或 object.constructor.prototype

  1. Object.create( proto, props ) //克隆或繼承對(duì)象
  2.  
  3. Object.keys( obj ) //數(shù)據(jù)結(jié)構(gòu)的映射
  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 )

約翰同學(xué)的講解：http:///blog/ecmascript-5-objects-and-properties/

支持：無
替代/過渡：Object.create和Object.keys可以自己實(shí)現(xiàn)

ECMAScript 5 Property Descriptor

對(duì)象屬性的訪問控制

  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. }

約翰同學(xué)的講解：http:///blog/ecmascript-5-objects-and-properties/

支持：無
替代/過渡：Object.defineProperties其實(shí)相當(dāng)于jQuery.extend,，用來實(shí)現(xiàn)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+
替代/過渡：

非標(biāo)準(zhǔn),，F(xiàn)irefox1.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+

標(biāo)準(zhǔn)

  1. Object.defineProperty(document.body, "innerHTML", { get : function () {} });

MSDN文檔：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能對(duì)DOM使用)

ECMAScript 5 Strict Mode

ES5的嚴(yán)格模式，刪除了舊版本中容易引起問題的元素,，并且會(huì)顯式的報(bào)錯(cuò),，方便調(diào)試

  1. "use strict"; //以下情況下拋出異常
  2. //對(duì)未定義的變量賦值
  3. //操作被設(shè)置為不可寫，不可配置或不可擴(kuò)充的屬性
  4. //刪除變量,，函數(shù),，參數(shù)
  5. //在對(duì)象直接量里重復(fù)定義屬性
  6. //eval做關(guān)鍵字，在eval的字符串里定義變量
  7. //覆寫arguments
  8. //使用arguments.caller和arguments.callee（匿名函數(shù)必須具名才能引用自己）
  9. //(function(){ ... }).call( null ); // Exception
  10. //使用with

約翰同學(xué)的講解：http:///blog/ecmascript-5-strict-mode-json-and-more/

支持：無
替代/過渡：……從現(xiàn)在開始養(yǎng)成嚴(yán)謹(jǐn)?shù)木幊塘?xí)慣

ECMAScript 5 其他新特性

傳遞函數(shù)的引用時(shí),，綁定this

  1. Function.prototype.bind(thisArg, arg1, arg2....) /

支持：無
替代/過渡：prototype http://www./api/function/bind

ISO-formatted dates

  1. Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ

支持：無
替代/過渡：datejs http://code.google.com/p/datejs/

  1. String.prototype.trim()

支持：Firefox3.5
替代/過渡：各種正則實(shí)現(xiàn) http://blog./archives/faster-trim-javascript

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多