IE 10 對 HMTL5 支援簡介

大綱

• IE 10 對於 HTML5 新的支持

• css hack @ IE 10

• IE 10 在 WIN8 / WP 的差異

IE 10 對於 HTML5 新的支持能

Asynchronus script execution

File API

HTML5 Parsing

Forms Validation

Sandbox

Drag and Drop

Web worker

Channel messaging

IE 10 對於 HTML5 新的支持能

Asynchronus script execution

非同步程式執行

<script src=“my.js"></script>

<script async src="my.js"></script>

<script defer src="my.js"></script>

<script async defer src="my.js"></script>

* 對於 js 需求增加、兼容性

IE 10 對於 HTML5 新的支持能

File API

<input type="file" name=“myphoto" accept="image/gif, image/jpeg" />

* 檔案上傳前的格式限定* 免套件即支持 上傳進度 與 狀態反饋

var fread = new FileReader();

fread.readAsText(readFile, "UTF-16");

fread.onprogress = updateProgress;

fread.onerror = errorHandler;

IE 10 對於 HTML5 新的支持能

Drag and Drop

拖曳

<img src=“my.jpg" draggable="true" />

* data transfer

* 從桌面拖曳到瀏覽器中，或瀏覽器內拖曳。

var filelist =  event.dataTransfer.files;  var filecount = filelist.length;  if (filecount > 0) {   上傳檔案……         }

IE 10 對於 HTML5 新的支持能

Forms Validation

表單驗證

<input name=“email" type="text" required>

<input type="email" name="email"/>

* 新增輸入類型屬性* 簡化開發人員對於表單的驗證需求。* 便利使用者輸入。

*placeholder 、 autofocus 、大小寫提示、 pattern

*

IE 10 CSS Hack能

@cc_on

<!--[if !IE]><!--<script>if (/*@cc_on!@*/false) { document.documentElement.className+=' ie_10';}</script><!--<![endif]-->

.ie_10 .myclass { /*IE 10 專用的 css */ }

使用 js 定義 一個 CSS

IE 10 CSS Hack能

@media -ms-high-contrast 

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /*IE 10 專用的 css */ }

@media Zero

@media screen and (min-width:0\0) { /* IE 9 / IE 10 共用的 css */ }

IE 10 在 WIN8 與 WP 的差異

Inline video

多音軌執行Drag and Drop

File Access API

另開視窗 ( 無返回值 )

Link preview & connect to App

以上 WP 不支援