”基情“无限的IE10和HTML5

最近刷微博刷得有点过了，以至于我只想到这个标题。 今晚一直在看IE Blog，发现了很多关于IE10的新特性介绍，而且有些特性还是挺激动人心的。 我以为，IE10比IE9更具革命性，毕竟IE10是仗依着即将发布的Window8和Window Phone两个重要操作系统出来混的。 之前一直很少会关心IE浏览器，但是我一想到如今移动端对HTML5，CSS3给力支持的如此动人的景象，可能以后会被Window Phone的IE10捣乱，心怀不安，于是，我怀着忧国忧民的心情研究了一下IE10对HTML5的支持，现在汇报如下。 另外，需要说明的是，现在浏览器更新节奏比较快，所以要具体说明一下，如无特别注明，本文的IE10指的是IE10 Preview2 or above.

HTML5语法解析

HTML5第一次把语法解析规则也作为一项规范，其目标是保证HTML在所有的现代浏览器里得到一致的解析，IE团队在这项工作中下了很大的功夫，使得IE10上能很好的支持HTML5解析算法。

正确语法解析

对于正确解析合法有效的标签，IE9已经表示无鸭梨了。 IE10的二逼之处在于，即使是不合法的标签，它依然会按照HTML5定义的规则来解析，下面的例子说明了对于非法标签的一些修复办法：

HTML	DOM ( HTML5 + IE10 )	DOM ( IE9 )
12	|- |- "1" |- |- "2"	|- |- "1" |- |- "2" |-
Test 1	|- |- "Test 1\n" |-	|- |- "Test 1\n" |-

使用innerHTML互操作

我们知道，在以往的IE上，某些标签的innerHTML属性不能重写；终于，IE10让它们重见天日了。 var select = document.createElement("select"); select.innerHTML = "onetwo"; var table = document.createElement("table"); table.innerHTML = "onetwo";

移除遗留的特性

因为IE早前的一些版本中的一些特性和HTML5语法解析不兼容，所以在IE10模式中，它们已经被移除掉了。依赖与这些特性的网站将会在旧模式中继续被支持。而这些移除的特性包括： 条件注释(Conditional Comments) IE10移除掉条件注释功能是一个很惊人的动作，毕竟通过条件注释来解决IE家族的各种兼容问题是目前比较安全和通用的办法。当然，IE10目前来看，已经十分接近标准了，或许真的不需要条件注释了。而官网也提倡，对于解决兼容性问题，应该使用能力检测，而不是浏览器检测。这篇文章有详细的讨论：Same Markup: Writing Cross-Browser Code 元素行为(Element Behaviors) 在IE10和其他浏览器中，这会被解析为未知元素 而在老版本IE中，它会与 "my.htc"绑定 XML数据岛(XML Data Islands) 在IE10和其他浏览器中，这会被解析为HTML 而在老版本IE中，这回被解析为XML.

Page Visibility

这个HTML5特性可能很少人听说，毕竟目前只有IE10和Chrome13及以上版本的浏览器支持。但是，这个API很有用，它可以用来判断用户是否正在浏览当前页面。在一些需要经常轮询的网站，可以通过判断用户是在浏览还是在挂页面来决定轮询频率，这样可以提高性能和节约带宽。 具体地说，它包括两个属性和一个事件：

• document.hidden: 返回一个布尔值表示页面是否可见
• document.visibilityState: 返回一个可视状态值, 例如, PAGE_VISIBLE, PAGE_PREVIEW等.
• visibilitychange: 可视状态改变会触发的事件.

在IE10中使用，需要在属性前面加上前缀"ms"。这里有一个官方的Demo，可以更清楚地告诉你这个API的作用。

Sandbox属性

HTML5新属性Sandbox让开发者可以限制iframe页面的行为权限。使用方法很简单，只需要在iframe元素里面加入sandbox属性即可。 加上这个属性之后，iframe里面的内容就会被禁用以下功能：

• 实例化插件
• 执行脚本
• 打开弹出窗口
• 提交表单
• 访问本地存储（包括localStorage,sessionStorage,cookies等）
• 发送XMLHttpRequests请求
• 访问父级Dom
• 使用HTC

这堆限制基本把iframe降级到脑残水平了，如果你想还它一点智商的话，可以把允许项作为sandbox属性的值来实现，下面例子解除了对脚本和表单提交的禁用。 当下网页经常要用到各种mash-up，这固然便于站点间的数据交互，但同时也有很多安全隐患，特别是跨站点脚本攻击（XXS），用户体验劫持（user experience hijacking）等，sandbox出现让我们通过使用iframe作为沙箱容器，为用户提供安全的网页环境。这里有几个模拟的案例，可供参考。

Pointer和Gestures事件

用过Window8的童鞋都知道，Metro界面提供了全新的一流的触摸用户体验。在IE10和Metro App中，开发者可以使用一种更通用的输入形式，我们叫作“Pointer”。Pointer可以表示任何一个在屏幕中的点，这个点可以是一个鼠标指针，手写笔，一支手指或者多个手指。这个模型让我们在写网页和App的时候更加爽，无需考虑用户在使用PC，Pad还是手机。

Pointer事件

和鼠标事件类似，pointer事件会在点击，移动，释放，移进，移出的时候触发：

• MSPointerDown
• MSPointerMove
• MSPointerUp
• MSPointerOver
• MSPointerOut

与鼠标不同的是，它可能在屏幕上有同时有多个点，例如，在多点触控的设备。这种情况下，多个独立的pointer事件会被触发，对应着屏幕的每一个点。当我们要对单独一个点进行处理，可以通过调用event.getPointerList()获得包含所有pointer的一个数组。

兼容鼠标

当触发pointer事件之后，IE10也会触发鼠标事件。这保证了在不支持Pointer事件的IE浏览器中，网页依然可以兼容。 当然，如果需要，我们也可以在MSPoniterDown事件方法中调用event.preventMouseEvent()来阻止鼠标事件触发。

特性检测

检测Poniter支持情况建议如下：

If (window.navigator.msPointerEnabled) {
//Pointer events are supported.
}

下面再看一个例子：

优化触控的一般方法

跟很多其他系统平台一样，IE10对于基本的触控交互提供了相对应的默认处理方法，譬如：

• 在可滚动区域按住可以移动内容
• 双指捏张可以缩放
• 点击，Hold住会出现菜单
• 轻触文本，可以选中

这些功能可以让网页和App提高触控体验，不过，有时候我们要禁用它们，以便实现我们自己的功能效果或者特别的用户体验。 下面是各种情况的禁用办法： 平移和缩放

.disablePanZoom {

overflow: hidden; /* 禁用平移 */

-ms-content-zooming: none; /* 禁用缩放 */

}

快捷菜单

element.addEventListener("MSGestureHold", function(e) { e.preventDefault(); }, false);

//禁止菜单显示

element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);

//禁用菜单

轻触选中

element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);

//禁用选中

Gesture事件

除了Pointer事件之外，IE10还可以识别复杂的交互（譬如，捏放，猛击，旋转等等）。这些交互动作都会被描述为手势事件。最基本的两个静态手势有：

• MSGestureTap
• MSGestureDoubleTap
• MSGestureHold

更加复杂的手势，可以通过MSGestureStart, MSGestureChange和 MSGestureEnd事件来完成。这些事件包含了手势变换的信息，例如，移动，放大，旋转，加速率等。下面例子可以说明：

document.addEventListener("MSGestureChange",logGesture,false);

var log = document.getElementById("log");

function logGesture(event) {

var gesture = "Translation: " + event.translationX + "px, " + event.translationY + "px
";

gesture += "Scale: " + event.scale + "x
";

gesture += "Rotation: " + event.rotation*360/Math.PI + " deg
";

gesture += "Velocity: " + event.velocityX + ", " + event.velocityY;

log.innerHTML = gesture;

}

Others

上面几个算是我感觉比较新颖的特性了，所以简单介绍了一下，虽然介绍介绍着变成了翻译... 除了上面说的这些，IE10还支持很多HTML5特性，但是大部分都已经妇孺皆知了，在这里就也不炒冷饭。不过，真的值得赞赏的是，IE10的确非常接近标准，无论是HTML5，CSS3的支持，还是ECMAScript5的实现，还是和Window 8 ，Window Phone系统的整合，都有了很大的进步。 想了解更多的童鞋可以参考下面三个网站，其中Internet Explorer 10 Guide for Developers是介绍IE10新特性的，但这比很多HTML5，CSS3教程对它们的描述还要完整和全面，IE10的确很给力。

参考资料

IE Blog Internet Explorer 10 Guide for Developers Windows Internet Explorer Testing Center via：vinqon

标签:IE相关HTML5IE10