Inspire DGT 網站技術分享
-
Upload
inspire-digital -
Category
Documents
-
view
668 -
download
2
Transcript of Inspire DGT 網站技術分享
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 不支援