HTML5, CSS3, ES5新的web標準和瀏覽器支持一覽 轉

時間  2019-11-10
標籤 html5 html css3 css es5 新的 web 標準 瀏覽器 支持 一覽 欄目 HTML5 简体版
原文   原文鏈接

本文整理了一些最重要（或者說人氣比較高罷）的新標準，雖然它們多數還只是w3c的草案，離Recommendation級別還早，卻已經成爲新一輪瀏覽器大戰中備受追捧的明星，開發者社區裏也涌現出大量相關的demo和API封裝，有些已經進入生產環境（好比google在iphone上實現的gmail離線應用），其實我以爲現在的web領域裏，從廠商私有技術轉換成委員會標準再轉換成通用技術產生殺手級應用的週期已經顯著的加速了，是由於如今web application的需求過高了麼…… UPDATE：剛纔在solidot發軟文的時候我忽然想明白怎麼表述這個問題：其實如今不少瀏覽器廠商同時也是基於瀏覽器的應用開發者和web標準的制定者，就好像修築舞臺的工程師同時也是舞臺上的演員和舞蹈動做的導演同樣，因此google, mozilla, apple們都在竭盡全力的實現那些有利於開發web應用的技術標準，即時它們仍是W3C Working Draft，相比之下IE team就比較缺少動力，果真計劃經濟缺少活力亞XD……javascript

因爲是源自筆記，對每一個條目我只會列出稱呼和語法特徵，暫時沒時間寫詳細的解釋和可執行的示例，可是會給出相關的文檔地址，除了列出已經支持該特性的瀏覽器，也會爲不支持的瀏覽器提供替代/過渡的實現。css

 

CSS3 Media queries

對整個外鏈css文件和部分css代碼使用的媒體類型偵測，人氣高的緣由顯然是由於移動設備……html

  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/html5

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

CSS3 2D Transforms

css變形，有人用這個實現僞3d效果以及旋轉效果的jquery插件python

  1. -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  1. 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/jquery

支持：Firefox 3.5+, Safari 3.1+ 替代/過渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspxcss3

CSS3 Transitions and CSS Animations

備受期待的css動畫，webkit團隊提出的草案，transition實現簡單的屬性漸變，animation定義更復雜的動畫效果web

  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/ webkit博客的介紹：http://webkit.org/blog/138/css-animation/ 約翰同窗的介紹：http://ejohn.org/blog/css-animations-and-javascript/ajax

支持：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/ 一個測試頁面：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

用一個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 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，線程之間經過消息事件通訊

  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 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 Canvas

apple發明，最先應用於dashboard，目前主流的js圖像技術，mozilla已經在實現OpenGL ES標準的Canvas 3D了，另外聽說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有一些不一樣，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-357)

Firefox和ActionScript3早就實現了的東西……不過其實如今json這麼流行，有沒有E4X好像都無所謂了～（瞎說的，其實在js代碼裏直接寫dom對象而不是html字符串，會方便不少）

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

支持：Firefox 1.5+

ECMAScript 5 Native JSON

原生的JSON支持，速度和安全性都比eval強一百倍亞一百倍，另外要注意Douglas Crockford的json2.js是一個用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-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 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-5-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-5-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-5-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-21T16:06:05.000TZ

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

  1. String.prototype.trim()

支持：Firefox3.5 替代/過渡：各類正則實現 http://blog.stevenlevithan.com/archives/faster-trim-javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程