Partilhar via

迁移至基于标准模式的 IE10 的 Web 图形

  • Artigo

用户希望可以使用任意浏览器在 Internet 上访问任意网址，并且每个浏览器的性能都毫不逊色。在 2010 年 3 月 16 日的一篇博文中，宣布了发布 IE9 的第一个平台预览版，同时在这篇文章中，我们也说明了 Internet Explorer 承诺实现“相同标记，相同成果”这一目标。IE9 带领我们朝这个目标走了很长的一段路，现在由 IE10 的基于 HTML5 的标准模式和 Quirks 模式主要完成这项任务。博文 IE10 中的 HTML5 分析列出了从 IE10 的基于 HTML5 的标准模式和 Quirks 模式中删除的某些旧功能。

本篇博文扩展了已删除旧功能的列表，增加了两项功能：矢量标记语言 (VML) 和基于 DirectX 的滤镜和过渡。自 IE9 以来这两项功能在 MSDN 文档中都被标记为“弃用”（如 滤镜和过渡中的第一句：“This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9（本主题介绍了可视化滤镜和过渡这项功能，而这项功能自 Windows Internet Explorer 9 以后就被弃用了）”），现在从 IE10 的标准模式和 Quirks 模式中删除了这两项功能。

VML 和 DX 滤镜的常规用途现在已经成为标准功能在 IE10 和其他浏览器的最新版本中实施。这些 IE 功能在 IE10 的文档模式 5、7、8 和 9 中仍保留，不过，其性能却不及那些启用了硬件加速且基于标准模式的替换功能。我们鼓励 Web 开发人员将其网站转为使用基于标准的技术，从而取代以前依赖的旧的文档模式。

使用 SVG 而不是 VML

Microsoft 和其他一些公司在 1998 年向 W3C 提出了 VML（矢量标记语言）这一构想。IE5 率先实施了这一功能。W3C 将 VML 与一个有争议的提案相合并，形成了 SVG。（请参阅 矢量标记语言简单地了解一下其历史。）

SVG 在 IE9 中实施，为使用 SVG 的 Web 网站和应用程序提供了替换 VML 所需要的功能。在 Microsoft 下载中心发布的 VML 至 SVG 迁移指南提供了从 VML 迁移至 SVG 的指南。

Raphaël JavaScript 库是一个轻型而易用的图形 API，可以使用 SVG（SVG 可用时）和 VML（SVG 不可用时）。如果在 IE8 和更新浏览器中构建矢量图形解决方案，Raphaël 是一个不错的选择。

使用 CSS3 而不是 DX 滤镜

Internet Explorer 4 引入了一组可视化滤镜和过渡，允许 Web 开发人员将多媒体样式的效果应用到其 Web 页面中。名称 DX 滤镜来自其基础实施 DirectX 及其长格式语法，如“filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)”。DX 滤镜与 SVG 滤镜效果不同，尽管它们都是使用 CSS 属性名称filter。

这些最常用的效果已经成为“CSS3 工作草稿或备选建议”，包括不透明度、渐变和阴影。由于 IE10 支持这些 CSS3 规范，所以就不再需要特定于 IE 的旧滤镜。还有一个滤镜 AlphaImageLoader 曾经特别常用，是为了解决 IE6 中 PNG 透明度的问题，但是这些问题在 IE7 中已经解决。

下表列出了最常用的 DX 滤镜及其基于标准模式的备选项。

DX 滤镜 基于标准模式的备选项
Alpha opacity
AlphaImageLoader <img> or background-image and related properties
Gradient background-image: linear-gradient()
DropShadow text-shadow or box-shadow
Matrix transform, transform-origin

IE10 中的 SVG 滤镜效果可以用于在 SVG 环境下模拟某些不太常用且较为复杂的滤镜。

注意： 由于 IE9 文档模式支持 DX 滤镜和某些基于标准的备选项，所以避免在同一元素上同时指定这两个属性是明智之举。像 Modernizr 这样的库，可以方便地使用 CSS 的功能检测，并且可避免重复声明。

现在迁移到“相同标记”

上面介绍的变化自 IE10 平台第 4 预览版发布（可供 Windows 开发者预览版使用）起开始生效。

比以前任意 IE 版本多出的功能是，IE10 可以像其他常用的浏览器一样处理相同标记和代码（一经任意 CSS 供应商特定的前缀更新为包括“-ms-”）。从另一种角度来说，删除这两个旧版功能意味着针对 IE10 开发的内容也适用于其他浏览器。

当所有浏览器都可以处理相同的基于标准的内容时，用户定会从中大获裨益。

—Internet Explorer 图形主管项目经理 Ted Johnson