在 IE10 Release Preview 中推动 Web 稳步发展

  • Article

作为 Windows 8 Release Preview 计划的一部分，我们检查了 IE10 所支持的所有 W3C 草案标准。我们特别检查了规范的以下方面：

  • 具有稳定性，也就是说，近期未进行增添或更改，并且未进行更名或重大变更；
  • 受至少两种非 IE10 的浏览器支持；
  • 在上述所有浏览器的功能核心使用情形中具有互操作性；
  • 已在 Web 中使用（包括其无前缀形式）；并且
  • 自 Windows 8 Consumer Preview 推出以后已经进入了候选建议阶段，或在 2012 年可能进入该阶段。

以下 W3C 草案标准功能符合这些条件，并且 IE10 现在支持这些功能的无前缀形式：

为确保与使用 Windows 8 Consumer Preview 开发的网站和应用的兼容性，IE10 仍将继续支持这些标准使用 Microsoft 供应商前缀 (‑ms‑/ms) 的供应商前缀形式。

IE10 还支持以下 W3C 草案标准的供应商前缀形式。我们认为这些草案尚不满足上面列出的条件：

从实验阶段迈向稳定阶段

Web 浏览器通过使用自有的供应商前缀标记新功能来实施新出现的标准：前缀为 ‑moz‑ 的样式属性指示 Mozilla Firefox 中的实验性 CSS 功能，具有相同意义的前缀还包括：适用于 Microsoft Internet Explorer 的 ‑ms‑，适用于 Opera 的 ‑o‑，适用于基于 WebKit 的浏览器（包括 Google Chrome 和 Apple Safari）的 ‑webkit‑。这些功能的对象模型对等项也同样带有前缀。

同理，新平台 API（如 window.requestAnimationFrame()）当前会以 window.mozRequestAnimationFrame()、window.webkitRequestAnimationFrame() 或 window.msRequestAnimationFrame() 的形式进行调用。

浏览器供应商一般会在相应的规范进入建议候选阶段后去掉其前缀。这种命名约定有多个目标，其中包括：

  • 允许改进规范： 如果没有前缀，针对最初实施编写的 Web 内容会使作者受到限制，使他们很难甚至根本不可能对这些内容进行有用增添或更改；
  • 隔离实验实施： 特定浏览器中存在的问题或所选的草案版本不会影响其他浏览器。
  • 样式表文档： 对特定供应商与样式表之间的相关性进行明确存档

其他标准可能根本不依赖供应商前缀。例如，浏览器供应商从来不会对 HTML5 规范引入的新 HTML 元素（如 <canvas> 和 <video>）添加前缀。

Web 最佳做法

在实践中，可以实现多个浏览器通过可互操作的方式支持同一个草案功能。因此，Web 开发人员会编写类似如下的声明：

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

在多次复制粘贴这种格式后，许多开发人员假设未来的 W3C 标准将向后兼容当前的 Web。他们开始通过添加一个无前缀的属性版本来确保其样式表“永不过时”：

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

从 Web 开发人员的角度来看，以上声明组应该完全适用于将来支持无前缀 CSS 变换的浏览器。

过去的标准功能在事实上验证了这种程序上的假设。当 IE9 在首个平台预览版中增加了对无前缀 border-radius 属性的支持时，我们的团队发现，由于其已部署的样式表“永不过时”，该功能在许多网站中得到了广泛应用。

其他一些功能现在也在经历着同样的变革。不仅许多 CSS 过渡演示网页已经实现“永不过时”（例如 Paul Hayes 的视差效果或 Lea Verou 的动画库），Google 的 html5slides、设计人员主页、网站徽标和教程等许多开源项目全都无一例外地包含无前缀 transition 声明。

许多过渡效果涉及 CSS 变换，相关教程通常也会频繁声明无前缀 transform 属性。

完善规范

即使 Web 开发人员在其新的标记中考虑到将来的浏览器汇总，标准化流程也仍旧显得过于保守。虽然 border-radius 能够与成千上万个网站实现互操作，CSS 工作组的成员仍在努力定义更加复杂的情况，例如具有可变宽度和颜色的两个临边之间的圆角的外观。同样，CSS 过渡、动画和变换的作者正在致力于指定错误条件、修复错误或澄清不太常见的情况。

尽管必须解决这些问题才能确保实现高水平的互操作性和达到推荐状态，但其中只有相对较少的问题会影响当前和未来的内容。一旦规范具有稳定性和可互操作性，Web 就应该不会被极端情况限制。这对于新的 HTML5 元素或最终确定 CSS2.1 规范而言都不是必须的，这两种情况都不需要加前缀。

尽管通过完整的公开测试套件来巩固规范的稳定性十分重要，但使所有 Web 开发人员多次重复相同的声明直到发布建议候选版的要求实际上更重视规范的完整性，而不是内容的稳定性。

完善规范是一项耗时的工作。举例来说，CSS 渐变出现于 2008 年，第一份指定可互操作解决方案的工作草案创建于 2009 年，而直到 2012 年 4 月才发布建议候选版。同时，标准化的语法已经无法与许多网站上部署的前缀形式语法兼容。IE10 Release Preview 是最新规范的第一个公开无前缀实施。（IE10 还支持更具互操作性的带有 ‑ms‑ 供应商前缀的前缀版本。）

对您的代码的意义

CSS 渐变

虽然受所有现代化浏览器支持的前缀形式渐变语法具有广泛的互操作性，但它反映的是一个现已过时的规范草案版本。这一早期语法无法与当前的建议候选版兼容。例如，如果您声明了以下渐变：

background: -ms-linear-gradient(left, yellow, red);

那么生成无前缀的对等项就不仅仅是删除 ‑ms‑ 前缀那么简单。由于 IE10 的无前缀线性渐变功能符合最新的规范，因此它会变为：

background: linear-gradient(to right, yellow, red);

将来我们会另外发布博文，详细讨论 IE10 对 CSS 渐变的支持。

级联与 CSS 对象模型

级联将按以下规则解析前缀形式的 CSS 属性（请注意无前缀形式声明中的旋转角度更高）：

-ms-transform: rotate(30deg);

transform: rotate(60deg);

您的元素将旋转 60 度：这两个元素被视为彼此的别名，后一条声明优先级更高。它们所对应的 CSSOM 属性也是别名：如果您请求 transform 和 msTransform 样式属性的计算值，它们都将反映优先级更高的 60 度变换。

同样，设置 element.style.transform 也将设置 element.style.msTransform，反之亦然。

属性名称的序列化

transition-property 等属性会获取 CSS 属性名称的列表。例如，要使 transform 属性在 IE10 Consumer Preview 中实现 2 秒过渡，开发人员应编写以下程序：

-ms-transition-property: -ms-transform;

-ms-transition-duration: 2s;

IE10 Release Preview 会将 style.msTransitionProperty 和 style.transitionProperty 的值都序列化为“transform”。请注意，没有保留原始前缀。

这同样也适用于 propertyName 属性的过渡事件。

动画和过渡事件类型名称

IE10 Release Preview 允许使用前缀形式和无前缀形式名称注册动画和过渡事件侦听器，也就是说，以下两行内容是等价的：

element.addEventListener("MSTransitionEnd", myHandler, false);

element.addEventListener("transitionend", myHandler, false);

但 IE10 Release Preview 将始终在事件对象的 type 属性中返回无前缀形式的名称。

后续动态

我们将向 W3C 提交新测试案例来测试 IE10 中现可无需前缀而提供支持的所有功能。作为工作组的成员和共同作者，我们将与同事继续开展密切合作，将这些规范推动至建议候选状态。

非常欢迎您就我们对这些功能及其与不同浏览器之间的兼容性所提供的支持给予反馈。

—Internet Explorer 项目经理 Sylvain Galineau