预览 IE10 支持的 HTML5 特性

从 IE8 开始，微软就逐步在浏览器中增加对 HTML5 的部分支持，如今 IE10 已经推出了几个预览版，Web 开发人员关心的是在 IE10 中，哪些 HTML5 特性获得了支持，由此会影响到技术选型和职业发展等重要问题。在本文中，我们根据微软发布的相关特性梳理一下 IE10 对 HTML5 的支持情况。

目前，IE10 预览版支持的 HTML5 特性可以概括为以下几点：

• 异步脚本执行（Asynchronus Script Execution）
• 拖放（Drag and Drop）
• File API
• 表单验证（Forms Validation）
• HTML5 解析（HTML5 Parsing）
• 沙箱（Sandbox）
• Web Workers
• 通道消息（Channel Messaging）

下面我们来详细了解一下各个 HTML5 特性的支持情况。

异步脚本执行

随着 Web 2.0 技术的发展，浏览器端脚本承载了越来越多的计算任务，这对于传统上单线程运行的浏览器来说，遭遇了性能的瓶颈。用户在碰到类似的网页时，经常会看到类似“脚本运行缓慢，是否继续运行”的提示框。为此，HTML5 考虑到了 Web 开发人员的需求，提供了一些解决方案。其中我认为最重要的两个分别是 async 属性和 Web Workers（稍后提到）。

script 元素的 async 属性允许相关的脚本与页面的其他部分异步加载和执行。也就是说，脚本可以在后台加载和运行，而不影响页面的解析工作。对于包含密集处理脚本的页面来说，async 属性能够显著提高页面加载的性能。

async 属性是 W3C HTML5 标准的一部分，设计的应用场景是：不依赖于某个脚本，但是该脚本仍然需要尽快执行。在微软的文章中举了这样一个需要 async 属性的例子：

Lilah 的个人博客使用了大量基于脚本的小组件。这些组件用于增强访问者的体验，但是她的页面在不加载这些组件的情况下也能正常运行（支持禁用脚本的浏览器用户）。目前，她在 HTML 文件的顶部加载所有小组件，但是读者抱怨说页面加载时间太长，因为脚本执行的缘故。她尝试把脚本移到页面的底部来提高速度，但是由于小组件内容太多，这种修改过程太繁琐。她真正想做的是让这些组件尽可能快的加载，但是不要阻碍页面上的其他内容。经过快速搜索后，她发现 HTML5 的 async 属性符合自己的需求。通过把所有基于脚本的小组件放在一个外部文件中，她可以在基于脚本的功能增强和性能之间取得更好的平衡：

IE10 的预览版支持 script 元素的 async 和 defer 属性。defer 属性在早期的 IE 中就被引入，那么这两个属性在用法上有什么区别吗？微软给出了四种可能的组合（无论是 async 还是 defer 属性，都必须在 src 属性存在的情况下才起作用），请读者仔细地体会 async 和 defer 之间的细微差别：

HTML5 拖放 (Drag and Drop)

拖放功能在桌面客户端软件中应用十分普遍。HTML5 标准对拖放做了规定，IE 和之前的版本支持 dataTransfer 对象和拖放图片、超链接、文本的事件。IE10 预览版对所有元素增加了 draggable 属性，并且支持把一个或多个文件从桌面拖放到网页上。draggable 属性支持你将任意 HTML 元素设为页面可拖放的。它提供了如下状态：

draggable = ‘true’ 该元素可拖放。 draggable = ‘false’ 该元素不可拖放。 draggable = ‘auto’ 该元素遵循默认的浏览器行为（文本、超链接和图片可拖放，其他元素不能）。

例如，下列代码支持用户拖放元素。

Drag me

Moveable text

当用户拖动一个可拖放的元素时，IE10 预览版随着拖动的光标移动显示一个元素的虚影。draggable 属性是不可继承的，因此元素的子元素不会自动变成可拖放的。

除此之外，dataTransfer 对象的 files 属性支持你把文件从桌面的文件夹中拖放到网页上。这种方式能够减少一些应用，如邮件客户端，把附件拖放进邮件内容中，或者在图库页面中添加照片。这种从桌面端到 Web 端的无缝交互无疑是 Web 开发的一大亮点。

下面的事件监听器和 dropHandler 函数展示了如何创建一个网页区域让用户拖放文件上去。其中的“dropspot”可以是 div、image，或者其他元素。dragover 和 drop 事件调用了 doNothing() 函数避免默认的事件处理和冒泡，否则可能会导致不可预知的结果。

// this function runs when the page loads to set up the drop area
function init()
{
// Set the drop-event handlers
var dropArea = document.getElementById(“dropspot”);
dropArea.addEventListener(“drop”, dropHandler, false);
dropArea.addEventListener(“dragover”, doNothing, false);
}
function dropHandler(event)
{
// use our doNothing() function to prevent default processing
doNothing(event);
// get the file(s) that are dropped
var filelist = event.dataTransfer.files;
if (!filelist) return; // if null, exit now
var filecount = filelist.length; // get number of dropped files
if (filecount > 0)
{
// Do something with the files.
}
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
event.stopPropagation();
event.preventDefault();
}

File API

IE10 预览版引入了对 File API 的支持。 File API 来自于 w3c 的草案，表示 web 应用中的文件对象，并且可以编程选取它们并访问数据。File API 目前正在被 W3C Web 应用工作组标准化。通过该 API，web 开发人员可以在客户端机器上以安全地方式访问本地文件，而无需扩展或者插件。

File API 支持浏览器在用户授权的情况下读取和处理文件。此外，File API 在无插件的情况下支持更流畅的文件上传体验，包括上传进度的状态反馈等。

在下面的 W3C File API 示例中，不同的代码片段分别处理进展、错误和成功条件：

function startRead() {
// Obtain input element through DOM.

var file = document.getElementById(‘file’).files[0];
if(file) {
getAsText(file);
}
}

function getAsText(readFile) {

var reader = new FileReader();

// Read file into memory as UTF-16
reader.readAsText(readFile, “UTF-16”);

// Handle progress, success, and errors
reader.onprogress = updateProgress;
reader.onload = loaded;
reader.onerror = errorHandler;
}

function updateProgress(evt) {
if (evt.lengthComputable) {
// evt.loaded and evt.total are ProgressEvent properties.
var loaded = (evt.loaded / evt.total);

if (loaded < 1) {
// Increase the progress bar length.
// style.width = (loaded * 200) + “px”;
}
}
}

function loaded(evt) {
// Obtain the read file data.
var fileString = evt.target.result;

// Handle UTF-16 file dump
if(utils.regexp.isChinese(fileString)) {
//Chinese Characters + name validation.
}
else {
// Run other charset test.
}
// xhr.send(fileString)
}

function errorHandler(evt) {
if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
// The file could not be read.
}
}

其他文件相关的改进包括带有文件类型过滤的多文件上传。在下例中，多个 GIF 或者 JPEG 文件可以被用户选择：

HTML5 表单和输入验证

IE10 预览版增加了对新 HTML5 输入类型和属性的支持。这些支持帮助开发人员可以通过很少的脚本来快速、简便的提供用户提示和输入验证。在 HTML5 的输入类型和属性出现之前，检查手机号码没有包含字母，或者验证邮件地址正确输入，都需要开发人员编写额外的代码。HTML5 客户端表单和输入验证帮会组开放人员关注其他任务而不是构建验证函数。

新 URL 和 email 输入类型

新 HTML5 输入类型支持提供了内建的 URL 和 email 输入类型。URL 输入元素接受完全合格的地址，例如 http://www.contoso.com 。同样，email 输入类型接受标准的 email 格式，如 joe@contoso.com 。在下面的例子中，如果用户不正确地输入了 URL 或者 email 地址，IE 就会显示错误信息。

新输入属性

IE10 预览器提供了对新 HTML input 属性的支持，如 required、pattern 和 placeholder 能够帮助开发人员确保用户在网页中输入所需的、正确的数据。

• required 属性

required 属性表示该元素必须填写值才能提交。该属性能够用于 text、text area、URL、email、select、checkbox 或者 radio button 等元素。这是一个 Boolean 属性。当用户的鼠标悬停在 required 区域时，他们会看到相应的必填提示，如果设定了 title 属性，那么会显示该值。

Enter your first name:

如果用户尝试在不填写该区域的情况下提交表单，他们会收到错误信息，而且键盘焦点会置于为填写的区域中。

• pattern 属性

pattern 属性允许你定义一个正则表达式要求用户的输入必须匹配。pattern 属性支持 text、search、url、email 和 password 等输入元素。

• min、max 和 step 属性

min、max 和 step 属性适用于 input type=number。min 和 max 定义了数据的最小值和最大值。step 属性定义了开发人员允许的跳跃值。例如，如果 min=0，step=1，那么 0、1、2、3…是允许的。如果 min=1.1，step=1，那么 1.1、2.1、3.1…是允许的。下面的例子展示了输入区域要求 0 到 10 之间的偶数。任何此范围之外的数据或者奇数都不能提交，而且会显示错误消息。

Enter an even number between 0 and 10:

• placeholder 属性

占位符属性，在 web 开发中很常见，通过设置该属性，用户能够在输入区域看到“虚拟”的示例，直观明了，也减轻了开发人员的负担。IE10 预览版支持对该属性做样式化定制，包括属性值的文本颜色、背景颜色、字体等等。

• autofocus 属性

自动聚焦属性帮助开发人员设置页面加载后的光标位置，无须用户主动点击某个输入控件。该属性只能用于页面的单个元素，如果同一页面的多个元素都设置了 autofocus 属性，那么只有第一个元素起作用。

• 大小写开关提示

该功能之前已经广泛应用于桌面客户端应用，比如用户输入密码时，如果打开了大小写开关（Caps lock ），那么应用会弹出对话框提示。IE10 预览版加入了该项提示功能，无须开发人员编写任何代码，该功能在大小写开关打开的时候即自动触发提示。

HTML5 解析

IE10 预览版完全支持 HTML5 的解析算法，不断完善与其他浏览器的一致行为。这些努力包括支持 SVG-in-HTML、HTML 语义元素、保留未知元素的结构和改善对空格的处理。

IE 团队在 HTML 解析器上的目标是让所有的 HTML 在跨浏览器中解析行为一致。这可能是因为 HTML5 是第一个完整定义 HTML 解析规则的标准，细致到最边缘的情况和错误条件。即使 HTML 标记是无效的，HTML5 仍然定义了如何解析它，IE 10 遵循了这些原则。这种跨浏览器的一致行为使得开发人员在创建应用解析 DOM 元素时，不必把过多精力花费在单独处理 IE 的“异常”行为。下面的解析例子展示了这些改进中修补的部分情况。

HTML DOM ( HTML5 + IE10 ) DOM ( IE9 ) 12 |-
|- “1”
|-
|- “2” |-
|- “1”
|-
|- “2”
|-