HTML5 與 CSS3 跨瀏覽器實務分享 – 各家瀏覽器相容性探討

HTML5 與 CSS3 跨瀏覽器實務分享 – 各家瀏覽器相容性探討上官林傑專案工程師中華電信數據通信分公司
WUX-303

HTML發展歷史 HTML5 的功能有哪些？瀏覽器的相容性 Q & A

HTML發展史「天下大勢，合久必分，分久必合」～《三國演義》第一回～

現今製作網站的主流規格，仍然停留在10年前左右！造成 plugins 氾濫，瀏覽器問題多且維護不易

Web技術現況囧

2004年左右，由 Mozilla 基金會, Apple, Opera 等公司團體著手制定並向W3C建議新一代的網頁技術標準（HTML5, Web Apps API）
W3C 還愛著 XHTML，於是暫不接受 WHATWG (Web Hypertext Application Technology Working Group) 誕生，持續制定及實作新標準 W3C 於 2007 年開始成立 HTML5 Working Group

新的語意、排版、多媒體標籤 <header>, <footer>, <video>, <canvas>, … Microdata 強化內容語意 <p>我是<span itemprop="name">Eric</span></p>

Web Forms 2.0 新的表單元件如：<input type="email" required> Web Application API
增加輔助開發 Web Application 的 JavaScript 物件如：var socket = new WebSocket(….);

HTML5 (w/ Microdata, WAI-ARIA) Web Forms 2.0 Web Application API
1.0 CSS3 ECMAScript 5

文件規格：<!DOCTYPE html> 文件編碼：<meta charset="UTF-8"> Style, script 不再需要加上 type 屬性 <style>
.highlight { color: red } </style> <script src="jquery.js"></script>

以 BASE64 編碼方式表示圖片檔案減少瀏覽器對伺服器的 requests 除了用在 <img> 標籤之外，也可以用在 CSS 裡
 <img src="data:image/png;base64,iVBORw0KGg oAAAANSUhEUgAAACAAAAAgCAYAAA Bzenr0AAAABGdBTUEAALGPC/xhBQA……" alt="" >

新一代的表單元件支援新的輸入元件加強表單驗證、操作目前支援最好的是 Opera, WebKit系瀏覽器 Opera 元件支援最完整 (Chrome 努力中)
iPhone/Android 瀏覽器以「Context-aware IME」的方式支援 IE, Firefox 表示：

不符合格式便會加上 :invalid 虛擬選擇器 <style> :invalid { border: 1px solid #f00;
} </style> <input type="email">

使用 HTML5 新增的 <canvas> 標籤，搭配使用 JavaScript
來繪圖（或是影像處理）可以製作圖片、影像處理、或者是遊戲！

用 XML 描述圖形，可以任意縮放不失真可以內嵌 JavaScript 作動畫可以直接以 <svg> 標籤放入文件中

在 HTML5 之前，瀏覽器可以使用 <img> 標籤來顯示影像（瀏覽器都有影像解碼器）在 HTML5 之後可以使用 <video>,
<audio> 標籤來播放影片或是音效檔案可以針對標籤操作（自訂播放介面）用 JavaScript 控制播放用 CSS 裝飾標籤

瀏覽器的支援狀況 Safari (包括 iPhone/iPad), Chrome, IE9 支援 H.264 編碼格式 Mozilla
Firefox, Opera 支援 Theora 編碼格式 Google 買下並開放 VP8 解碼器之後… Chrome, Firefox, Opera 皆已支援 VP8 解碼器 IE9 宣稱用戶電腦若有安裝解碼器即支援 Safari 表示：

CSS3 躺著也中槍

本來是獨立製作的規格，隨著 HTML5 發燒而一併討論各家瀏覽器支援度差異大，而且 CSS 規則名稱也會加上不同的前置詞，以圓角矩形為例標準: border-radius:
5px; Safari, Chrome: -webkit-border-radius: 5px; Firefox: -moz-border-radius: 5px; Opera: -o-border-radius: 5px;

規格分成許多模組，使用前請先行測試瀏覽器的相容性以 WebKit 系，尤其是 Safari/iPad/iPhone 支援得最多 CSS3 模組

含有許多 -moz/-webkit 的 extension

可以動態載入字型檔顯示特殊字型的文字省去製作成圖片的不方便 @font-face { font-family: 'Reenie Beanie'; font-style: normal; font-weight:
normal; src: local('Reenie Beanie'), url('Reenie.ttf') format('truetype'); }

強化的框線模組圓角矩形各瀏覽器語法稍有不同 .rounded-box { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius:
8px; }

除了色彩名稱、色彩代碼之外，也可以用 rgba, hsla 來描述顏色 .highlight-color { color: rgba(255, 0, 0,
0.5); }

可以產生 linear 及 radial 的漸層影像套用於背景時要使用 background-image WebKit, Firefox 支援，但是語法稍微不同
IE9, Opera 可用 SVG 來支援

.blue-bg { background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
background: -moz-linear-gradient(top, #eee, #fff); }

描述 CSS value 從 a 值變更為 b 值，根據時間該如何變化。目前僅
WebKit, Firefox 4+, Opera 10+ 支援

#bgTrans { width: 3em; height: 3em; background-color: red; transition: background-color
1s linear; -o-transition: background-color 1s linear; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; } #bgTrans.trans { background-color: blue; }

利用電腦圖學的 transformation 概念改變物體的顯示位置目前僅 WebKit, Firefox 4, Opera 支援
3D Transform 目前僅 Safari 5+/iPad 支援

/* transform 結合 transition */ #box { .... -webkit-transition: -webkit-transform
1s ease; -moz-transition: -moz-transform 1s ease; -o-transition: -o-transform 1s ease; } #box.rotated { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); }

描述 CSS 值變化的影格（keyframes），使物體會自行目前只有 Safari/iPad/iPhone 支援

.anim { -webkit-animation-name: 'anim1'; -webkit-animation-duration: 6s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes
anim1 { from { -webkit-transform: translateY(100px); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: translateY(100px); -webkit-animation-timing-function: ease-out; } to { -webkit-transform: translateY(100px); } }

ＷEB APPLICATIONS API Native App, Web App 傻傻分不清楚

藉由不同方法將資料儲存在用戶端（本地） Application Cache: 將要快取的 URI 表列出來 Web Storage: 在瀏覽器上儲存 key-value
資料 Web Database: 以資料庫形式（未定）儲存減少網路傳輸離線支援

var obj = { name: 'eric', values: [1, 2, 3,
4, 5] }; // 轉成字串存入 localStorage['foo'] = JSON.stringify(obj); …… // 讀出來後再以 JSON.parse 還原回原本的 object type var theObj = JSON.parse(localStorage['foo']);

用來取得用戶端的經緯度座標若有 GPS 裝置則用 GPS 定位，否則使用 IP 定位結合其它地理資訊服務 navigator.geolocation.getCurrentLocation(succ,
fail, opt); var succ = function(geo) { var pos = geo.coords; // pos.latitude, pos.longitude };

在不同文件之間傳遞訊息減少使用 JavaScript 全域物件溝通 // 接收訊息事件 window.addEventListener('message', function(evt) { //
evt.origin 是傳遞訊息的來源 domain // evt.data 是傳遞訊息來的資料 });

與網頁伺服器建立 Socket 連線即時取得 Server 回應，不必 polling var ws
= new WebSocket('ws://localhost:8080/handle'); // 當 server 回傳資料時就會觸發 onmessage event ws.onmessage = function(evt) { };

多緒執行 JavaScript 程式碼，藉以利用多核心裝置的運算能力以訊息傳遞（postMessage）的方式溝通 // 啟用 Worker 執行另一支 JavaScript
var wk = new Worker('heavy_works.js'); Wk.onmessage = function(evt) { // evt.data }; // heavy_work.js while (counter < 1000000) { …… } postMessage(msgObj);

在桌面上出現通知訊息需要使用者授權 // 要求使用者授權使用 webkitNotifications.requestPermission(); // 發出通知 webkitNotifications.createHTMLNotification(xxx).show();

可以拖拉檔案進瀏覽器，並且使用 JavaScript 處理拖進的檔案 FileReader API 可讀取本地端檔案資料結合 <input type='file' >
做 AJAX 檔案上傳

var dropZone = document.getElementById('drop-zone'); dropZone.addEventListener('dragenter', onDragEnter, false); dropZone.addEventListener('dragover', onDragOver, false);
dropZone.addEventListener('dragleave', onDragLeave, false); dropZone.addEventListener('drop', onDrop, false);

ECMASCRIPT 5 惡夢真的結束了嗎？

目前流行的 JavaScript (1.5) 是採用 ECMA-262 3/e 的規格 ECMAScript 5 ===
ECMA-262 5/e 語法上進行強化 Native JSON New Array New Object …

use strict; 使用ES5模式 String.prototype.trim() 去掉字串首尾空白 new Date('2009-05-21T16:06:05.000Z') ISO日期格式 Function.prototype.bind()
: 指定該 function 被執行時的 context isArray(): 判斷是否為 array 資料

indexOf lastIndexOf some forEach map reduce

create defineProperty defineProperties getPrototypeOf keys seal freeze prevenExtensions

可以參考 http://kangax.github.com/es5- compat-table/

結論喂～該起床囉

學會 HTML5 之後，你不只是可以寫 Web，還能寫 App! 學會 HTML/CSS/JavaScript 吃遍天下減輕設計網站版面的負擔
(CSS3) 優化網頁效能最重要的，寫出好的 web/app 造成瀏覽器全面升級的局面！

相關課程與內容微軟商業智慧完整藍圖及最佳案例分享 ( BIN201 ) 9/28/2010 13:30 – 14:40 Room
101CD http://blogs.msdn.com/camerons (相關連結1) http://blogs.msdn.com/stevecook (相關連結2) http://www.peterprovost.org/blog/ (相關連結3) 9/28/2010 13:30 – 14:40 Room 101CD

http://technet.microsoft.com/zh- tw/default.aspx Resources for IT Professionals http://msdn.microsoft.com/zh- tw/default.aspx Resources for
Developers www.microsoft.com/learning (產品相關連結1) Microsoft Certification and Training Resources (連結名稱1) 其他資源 http://support.microsoft.com/default.aspx?ln=ZH-TW (產品相關連結2) Microsoft 技術支援與服務 (連結名稱2) http://www.microsoft.com/taiwan/security/default.mspx (產品相關連結3) Microsoft 資訊安全首頁 (連結名稱3)

請協助完成「本課程問卷」，並在離開教室時交給工作人員！填妥大會背包中的大會問卷，可於活動第三天兌換問卷禮哦！感謝您的合作。

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows
Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

HTML5 與 CSS3 跨瀏覽器實務分享 – 各家瀏覽器相容性探討

HTML5 與 CSS3 跨瀏覽器實務分享 – 各家瀏覽器相容性探討

More Decks by Eric Shangkuan

Other Decks in Programming

Featured

Transcript