Internet Explorer 10重新設計網站介面,利用HTML5和CSS3提升效能和排版。IE10支援觸控操作、手勢事件和釘選網站。開發者可以針對不同解析度和裝置設定不同樣式,並讓網站在Windows 8下快速翻頁和子母畫面切換。IE10也可以將網站打包成App發佈。

1. Internet Explorer 10
重新想像網站設計

2. Agenda

4. 各種 Internet Explorer 10

6. 使用 HTML5 優化網站效能

7. 使用 CSS3 優化網站排版或效果顯示

9. : <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">

11. 根據不同的解析度套用不同的樣式
@media (max-width: 480px) {
body {
padding-top: 70px;
}
}
@media (max-width: 768px) {
body {
padding-top: 0;
}
}

12. if (navigator.msMaxTouchPoints &&
navigator.msMaxTouchPoints > 1) {
// the user's hardware supports touch input
}

13. <input type="email" >

14. -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
Value Description
Default value for -ms-touch-action. Browser
auto
determines.
none No default behavior is allowed.
Only panning, pinch zoom, and swiping to navigate
manipulation
forward or back are allowed.
double-tap-zoom Only double-tap zooming is allowed.
The element inherits the value of -ms-touch-action
inherit
from its parent.
利用觸控方式捲動和縮放: http://msdn.microsoft.com/zh-TW/library/ie/hh920761.aspx

15. Pointer Event
event.pointerType
var el = document.getElementById('drawface');
// 判斷是否支援 pointer event
if (navigator.msPointerEnabled) {
el.addEventListener('MSPointerDown', handleTouchInput, false);
} else {
// fallback
el.addEventListener('mousedown', handleTouchInput, false);
}
參考: http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

16. Gesture event
var el = document.getElementById('drawface');
var gesture = new MSGesture();
// 加入 pointer
el.addEventListener('MSPointerDown', function (evt) {
gesture.addPointer(evt.pointerId);
}, false);
// Tap and Hold
el.addEventListener('MSGestureTap', handleTap, false);
el.addEventListener('MSGestureHold', handleHold, false);
// dynamic gesture
// 讀取 evt 裡各種位移、旋轉、速度等參數
el.addEventListener('MSGestureChange', handleGesture, false);
參考: http://blogs.msdn.com/b/ie/archive/2012/06/20/go-beyond-pan-zoom-and-tap-using-gesture-events.aspx

17. 讓您的網站支援觸控操作: http://msdn.microsoft.com/zh-TW/library/ie/jj583807.aspx

18. 釘選網站 (Pinned Site)
http://buildmypinnedsite.com/
<meta name="msapplication-TileImage" content="logo.png" >
<meta name="msapplication-TileColor" content="#123456" >

19. Windows 8 子母畫面 (Snapped view)
Full
@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
/* 當 Modern IE10 在貼齊模式時的樣式設定，
並且將可視區域設為 320px */ Snap
}

20. 快速翻頁 (Flip ahead)
點擊翻頁鍵、或是從右 swipe 至左
<link rel="prev" href="/page/2">
<link rel="next" href="/page/4">

21. 從 Web 到 App
<meta name="msApplication-ID" content="App">
<meta name="msApplication-PackageFamilyName" content="在市集中的 Package 名稱">

23. http://msdn.microsoft.com/ie
http://blogs.msdn.com/b/ie
http://ietestdrive.com/
http://buildmypinnedsite.com