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

用户希望可以使用任何浏览器浏览任何网站，每个浏览器的性能都可以毫不逊色。在 2010年3月16日的一篇博文中，宣布发布 IE9 平台预览第一版，同时在这篇文章中，我们也表明了IE浏览器承诺实现“相同标记，相同效果”这一目标。IE9 带领我们往这个目标走了很长的一段路，现在由基于 HTML5 标准模式和 Quirks 模式的 IE10 来主要完成这项任务。博文“ IE10采用新的HTML5解析规则”列出了 IE10 删除的某些旧功能。 本篇博文将介绍另两项被删除的功能：矢量标记语言 (VML) 和基于 DirectX 的滤镜和过渡。自IE9以来，这两项功能在 MSDN 文档中都被标记为“弃用”（如 滤镜和过渡 在 MSDN 技术文档中的第一句：“本主题介绍了可视化滤镜和过渡这项功能，而这项功能自 Windows Internet Explorer 9 以后就被弃用了”），现在从 IE10 标准模式和 Quirks 模式中也删除了这两项功能。 VML 和 DX 滤镜现在常用于IE10和其他浏览器当前版本基于标准的替代实施方案。这两项功能在 IE10 的文档模式IE5、IE7、IE8 和 IE9 中仍保留，不过，其性能却不及那些启用了硬件加速且基于标准模式的替代功能。我们鼓励 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	不透明度
AlphaImageLoader	或背景图像和相关属性
渐变	背景图像：linear-gradient()
DropShadow	文本阴影或框阴影
Matrix	变换、变换域

IE10中的 SVG 滤镜效果可用于在 SVG 环境下模拟某些不太常用且较为复杂的滤镜。 注意：由于 IE9 文档模式支持 DX 滤镜和某些基于标准的备选项，所以避免在同一元素上同时指定这两个属性是明智之举。像 Modernizr 这样的库，可以方便地使用 CSS 的功能检测，并且可避免重复声明。 上面介绍的变化自 IE10 平台预览第4版发布（可供 Windows 开发者预览版使用）起开始生效。 比以前任意IE版本多出的功能是，IE10 可以像其他常用的浏览器一样处理相同标记和代码（一旦任何 CSS 厂商的私有前缀出现更新，包括“-ms-”）。从另一种角度来说，删除这两个旧版功能意味着针对 IE10 开发的内容也适用于其他浏览器。 当所有浏览器都可以处理基于标准的相同内容时，用户定会从中大获裨益。 —Internet Explorer 图形主管项目经理 Ted Johnson 英文出处：Moving to Standards-based Web Graphics in IE10 编译：ieblogs cn

标签:标准webIE10浏览器模式IE Web图形