2011 年 3 月 14 日
《面向开发人员的 Internet Explorer 9 指南》提供对 Internet Explorer 9 中的功能和改进的概述。通过本指南,Web 开发人员和设计人员可以充分利用这些增强功能。开发人员还可以使用 Internet Explorer Test Drive(英文)体验实际平台。
目录
欢迎使用 Windows Internet Explorer 9。作为一名开发人员,您需要了解有关自己和客户所用的浏览器的最新信息。Internet Explorer 9 是世界上最流行的 Web 浏览器的最新版本。我们设计 Internet Explorer 9 的目的是,通过提供适用于未来 Web 的平台、工具和功能,帮助 Web 开发群体创建丰富、可互操作的以及遵循标准的 Web 应用程序。
本文档向 Web 开发人员(其客户使用 Internet Explorer)演示如何在网站和应用程序中使用这些新增强功能。请务必查看提供的 Test Drive 网站(英文),观看这些功能的实际演示。要提供反馈意见和查看有关 Internet Explorer 9 新增功能的详细信息,请参阅发行说明以及 MSDN 上的 Internet Explorer 9 新增功能(英文)。有关 Internet Explorer 9 的最新新闻,请参阅 IE 团队博客(英文)。同样,有关 Internet Explorer 的最新开发人员信息,请访问 MSDN 上的 Internet Explorer 开发人员中心。
Internet Explorer 9 旨在帮助开发人员更好地了解 Internet Explorer 9 在平台以下方面的进展:
浏览器性能涉及浏览器中许多不同的子系统。不同的网站(以及同一网站中的不同活动)会对浏览器产生不同的负载和需求。例如,与新闻聚合网站(如必应资讯或 Digg)相比,Web 应用程序(如 Windows Live Mail 或 Microsoft Office Web Apps)以完全不同的方式使用浏览器子系统。
脚本引擎性能只是总体浏览器性能状况的一部分。与 Internet Explorer 7 相比,Internet Explorer 8 中的脚本性能取得了指数级的改进幅度,Internet Explorer 9 中的新 JavaScript 引擎“Chakra”同样也是如此。Chakra 引擎可并行解释、编译和执行代码,并且能够利用多个(如果有)CPU 内核的优势。有关详细信息,请参阅 IE 团队博客上的“Internet Explorer 9 中的新 JavaScript 引擎”(英文)。
当然,Internet Explorer 团队正在关注实际网站使用本浏览器所有子系统时的性能特征。目标是为实际网站提供更好的全面性能,而不仅仅是基准性能。
Internet Explorer 向 Web 开发人员提供丰富的可互操作功能。Internet Explorer 团队知道,您不希望一次又一次地重复编写和重复测试网站;浏览器供应商采用标准可以很好地实现这一目标。
在 Internet Explorer 8 中,Internet Explorer 团队实现了 CSS 2.1 的高互操作性实现,同时向万维网联合会 (W3C) 贡献了包含 7200 多个测试的测试套件。这十分重要。如果没有验证测试,标准会更加难以一致地实现,从而难于供网站开发人员使用。
Internet Explorer 9 在标准支持和互操作性方面进行了重大改进。例如,Internet Explorer 9 新增了对 HTML5 的支持,可以对很多 CSS3 功能提供更好的支持,提供对 SVG 的内置支持(对于 Internet Explorer 而言,这是第一次)。
Windows 生态系统实现了令人惊叹的硬件创新。通过 Internet Explorer 9,现在,Web 开发人员可以利用硬件创新进行硬件驱动的图形和文本呈现。
Internet Explorer 9 使用 DirectX 系列的 Windows 应用程序编程接口 (API),为 Web 开发人员实现了几方面的改进。通过 Direct2D 和 DirectWrite,所有的图形和文本呈现功能都由图形卡而不是 CPU 实现。利用图形硬件加速,意味着图片丰富、需要处理大量图形的网站可以更快地在 Windows 上呈现,同时减少占用 CPU 资源。此外,使用习惯的标准创作网站时,您可以自动利用这些改进。
为方便起见,此列表包含 Internet Explorer 9 中的所有新增开发人员功能。有关 Internet Explorer 9 的预发布内部版本的更改信息,请参阅修订历史记录。
重要提示 Internet Explorer 9 中的新标准支持要求浏览器处于 Internet Explorer 9 标准模式(“IE9 模式”)。最佳实现方法是使用标准 !DOCTYPE 指令且没有 X-UA-Compatible meta 标签或 HTTP 标头。调用 IE9 模式的 !DOCTYPE 如下所示:
<!DOCTYPE html>
当然,您可以使用 !DOCTYPE 和 X-UA-Compatible meta 标签或 HTTP 标头来根据需要更改默认设置。
若要确定当前文档模式,请按 F12 打开 Internet Explorer 开发人员工具,然后查看菜单栏右侧。若要覆盖文档模式,请在“文档模式”菜单上单击“Internet Explorer 9 标准”。
有关 Internet Explorer 9 中文档模式行为的更新,请参阅本指南的平台版本管理一节。
Internet Explorer 9 对级联样式表 (CSS) 提供比以前所有的 Microsoft 浏览器都要多的支持。除了保留在 Internet Explorer 8(在该版本中,Internet Explorer 完全符合 CSS2.1 规范)中完成的工作外,Internet Explorer 9 增加了对许多 CSS3 组件的支持。
注意 请务必记住,许多 CSS3 模块仍处于工作草案或最后讨论阶段。在这些模块达到候选建议阶段之前,可能会进行重大更改。有关详细信息,请参阅最新 CSS3 草案模块(英文)。
Internet Explorer 9 添加了对 CSS3 2D 转换的支持。通过 CSS 2D 转换,能够将由 CSS 呈现的元素转换为二维空间。
Internet Explorer 9 支持以下 2D 转换属性:
注意 由于 CSS 2D 转换模块尚未从 W3C 接收到“备选推荐项”状态,使用 transform 和 transform-origin 属性时都必须带有 -ms- 前缀,以便可被 Internet Explorer 9 识别。有关特定于供应商的前缀的详细信息,请参阅“IE 团队博客”上的“IE9、供应商前缀和开发人员”(英文)。
Internet Explorer 9 支持以下与 -ms-transform 属性一起使用时所需的转换函数:
-ms-transform-origin 属性接受一个或两个值。每个值都可以是关键字、长度或百分比。如果不设置 -ms-transform-origin 属性,则转换在中心开始(相当于 50% 50% 的 -ms-transform-origin 值)。
如果只指定一个值,则假定第二个值为 center。
请注意以下标记。
div {
-ms-transform:translate(200px, 100px) scale(.75, .75) rotate(40deg);
-ms-transform-origin:60% 100%;
}在 Internet Explorer 9 中,如果将 -ms-transform-origin 属性设置为 60% 100%,则会将转换的起点设置为要转换的元素的长度的 60%,高度的 100%。-ms-transform 属性先在 x 方向将元素移动 200 像素,在 y 方向移动 100 像素。然后它按 75% 缩放该元素。最后,它将该元素环绕 -ms-transform-origin 属性设置的起点旋转 40 度。
有关 CSS3 2D 转换的详细信息,请参阅 MSDN。
Internet Explorer 9 增加了对 CSS3 背景和边框模块(英文)的几种功能的支持。最受关注的新功能 border-radius 属性也是最热门的 CSS 边框功能。Internet Explorer 9 还引入了对以下新 CSS3 属性的支持:
Internet Explorer 9 还向以下现有 CSS 背景和边框属性增加了功能:
使用 border-radius 属性可以使边框角弯曲,方法实质上是将硬角“替换”为四分之一椭圆并指定每个椭圆的半径。这类属性包括:
例如,看看下面的标记:
border-radius:100px 66.66px 200px 50px;
border:10px blue double;
padding: 24px;
width:400px;height:125px;
应用于文本块时,效果如下。
.jpg)
Internet Explorer 9 增加了对 CSS3 颜色模块的支持。此模块提供对 RGBA、HSL 和 HSLA 颜色模型的支持;提供 opacity 属性;提供对currentColor 关键字的支持。Internet Explorer 9 还扩展了对transparent 关键字的支持。
RGB 颜色模型进行了扩展,包括 alpha 通道(即透明度)。RGBA 值的格式是 rgba(red,green,blue,alpha)。red、green 和 blue 分量与 RGB 颜色模型的对应分量相同,以整数或百分比的形式表示。alpha 分量表示为 0.0(完全透明)至 1.0(完全不透明)之间的值。
例如,若要将背景颜色设置为具有 50% 透明度的红色,可以在样式表中包含以下两个 CSS 声明中的任意一个:
background-color:rgba(255,0,0,0.5);
background-color:rgba(100%,0%,0%,0.5);
请注意,尽管 RGB 值支持十六进制表示法,RGBA 值并不支持。
Internet Explorer 9 支持 CSS3 颜色模型的色调-饱和度-亮度 (HSL) 颜色值。在 HSL 颜色模型中,“色调”定义为指示颜色在颜色盘上的角度(例如,红色为 0 或 360,绿色为 120,蓝色为 240)。“饱和度”和“亮度”以百分比的形式表示。例如,下面的 CSS 声明定义红色背景。
background-color:hsl(0,100%,50%);
Internet Explorer 9 还使用 alpha 通道扩展了 HSL 颜色模型。与 RGBA 模型一样,alpha 通道表示为 0.0 至 1.0 之间的值。例如,下面的 CSS 声明定义透明度为 50% 的红色背景。
background-color:hsla(0,100%,50%,0.5);
Internet Explorer 9 增加了 CSS3 颜色模块的 opacity 属性,使用该属性可以在元素级别控制透明度。与 RGBA 值的 alpha 分量类似,opacity 值是 0.0(完全透明)至 1.0(完全不透明)范围之间的数字。opacity 属性在所有元素上可用。
下面的示例演示颜色海军蓝的 opacity 属性,不透明值以 0.2 的增量从 0 递增到 1。
<div class="opacity_sample">
<div style="background:navy; opacity:0;"></div>
<div style="background:navy; opacity:0.2;"></div>
<div style="background:navy; opacity:0.4;"></div>
<div style="background:navy; opacity:0.6;"></div>
<div style="background:navy; opacity:0.8;"></div>
<div style="background:navy; opacity:1;"></div>
</div>
此示例对 25×125 像素的 div 生成下面的输出。
.png)
CSS3 颜色模块定义了 CSS 颜色关键字列表,该列表与 SVG 1.0 的颜色关键字列表相同。尽管 SVG 支持是 Internet Explorer 9 中的新增功能,Internet Explorer 8 中已经实现了这一更改。
Internet Explorer 9 引入了 CSS3 颜色模块的currentColor 关键字,该关键字指示所有接受 color 的属性的 color 属性的当前值。当对 color 属性本身进行设置时,currentColor 等效于color:inherit.
Internet Explorer 9 还将transparent 关键字的使用扩展到 border-color 和 background-color 属性之外。该关键字现在可以用于所有接受 color 属性的属性。
每个新 CSS 版本都具备更好的排版控制功能。与此同时,缺乏可互操作的 Web 字体格式令人遗憾。Internet Explorer 9 增强了对 CSS 字体的现有支持,以符合 CSS3 字体模块的要求。它还增加了对 Web 开放字体格式 (WOFF) 和原始 TrueType 字体的支持。
font-weight 属性获得了更新,以便 Internet Explorer 9 可以按照 CSS3 字体模块中的规定计算字体粗细。
font-size 属性获得了更新,以便每个关键字的比例因子都遵循 CSS3 字体模块中的定义。此外,关键字和 HTML 标题大小现在按照 CSS3 字体模块中的规定进行映射。
font-stretch 属性是 Internet Explorer 9 中的新增功能,用于从字体系列中选择正常、紧缩或扩展的字体。此属性也可用作 @font-face 规则描述符。
@font-face 规则可实现字体链接。即,样式表可以引用特定字体文件,供浏览器下载和使用。例如,考虑下面的标记。
@font-face {
font-family:MyFont;
src:url(http://mysite/fonts/MyFont.ttf)
format("embedded-opentype");
}
p {font-family:MyFont, serif;
}在此示例中,@font-face 规则指示浏览器转到 src 描述符中指定的 URL,以下载包含指定字体的字体文件。在 Internet Explorer 8 及更早版本中,如果 src 描述符包含可选 format 字符串(如上例所示的字符串),则会错误地忽略该描述符。在 Internet Explorer 9 中,会正常分析 src 描述符。
Internet Explorer 9 还增加了对 unicode-range 描述符的支持,使用该描述符可以指定给定字体支持的 Unicode 字符的范围。例如,下面的代码示例指定基本 ASCII 字符的范围。
@font-face {
font-family:MyFont;
src:url(http://mysite/fonts/MyFont.ttf);
unicode-range:U+0-7F;
}Microsoft 开发的 Internet Explorer 9 可以提供尽量多的 Web 字体供您选择。为此,我们完成了以下工作:
若要查看 Internet Explorer 9 中的 Web 字体的示例,请参阅 Internet Explorer Test Drive 上的“Web 字体”(英文)或“更多 Web 字体”(英文)演示。
有关 Internet Explorer 9 中的 CSS3 字体的详细信息,请参阅 MSDN。
CSS3 媒体查询模块指定一些方法,供 Web 开发人员将样式表的范围限定为一组精确的设备功能。例如,对于在移动设备(具有非常小的屏幕、有限调色板、低分辨率等)、上网本(具有小屏幕、完整调色板、高分辨率等)和标准计算机(具有大屏幕、完整调色板、高分辨率等)上进行浏览的用户,您可能需要以不同方式为这些用户设计页面。CSS3 媒体查询支持的媒体属性的完整列表包括宽度、高度、设备宽度、设备高度、方向、纵横比、设备纵横比、颜色、颜色索引、单色和分辨率。
下面的声明是典型的媒体查询(使用 @media 规则)。
@media screen and (max-width:400px) {div {border:none;}}在本例中,screen 指示目标媒体类型,max-width 是目标媒体属性。该声明指示,仅当在宽度最多为 400 像素的屏幕上显示页面时,才应用指定规则(在div 元素上无边框)。您可以组合使用媒体属性,以创建更为具体的查询,如下所示。
@media screen and (max-width:400px) and (max-height:600px) {…}当媒体为宽度不超过 400 像素且 高度不超过 600 像素的屏幕时,此声明应用指定规则。
请在 Internet Explorer Test Drive(英文)网站查看提供的媒体查询。
Internet Explorer 9 在 CSS、HTML、XML 和 XHTML 中引入对媒体查询的支持。有关 Internet Explorer 9 中的媒体查询的详细信息,请参阅 MSDN。
Internet Explorer 9 支持大部分 CSS3 命名空间模块。开发人员使用 CSS 命名空间可以为 CSS 文件声明默认命名空间。也就是说,默认情况下,任何元素或特性选择器也使用该命名空间。
开发人员使用 CSS 命名空间还可以创建命名空间前缀,这些前缀以后可在 CSS 文件中使用。在 Internet Explorer 9 中,您还可以进一步声明针对 SVG 元素的命名空间。
@namespace at 规则声明一个 XML 命名空间(而且可以选择声明其前缀),并将该命名空间与表示命名空间名称的字符串相关联。例如,下面的规则声明一个默认命名空间。
@namespace "http://www.w3.org/1999/xhtml";
该默认命名空间应用于没有显式命名空间组成部分的名称。
如果 @namespace 规则声明为具有某个前缀,则可以在命名空间限定的名称中使用该前缀。例如,为命名空间 prfx 提供下面的命名空间声明
@namespace prfx "http://prfx.contoso.com";
…下面的选择器与 prfx 前缀引用的命名空间中的 E 元素匹配。
prfx|E
下面的示例稍微复杂一些。
@namespace prfx "http://prfx.contoso.com";
@namespace msft "http://msft.example.com";
p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}
在此示例中,创建了两个命名空间前缀。首先,将任何命名空间中的 p 元素都着色为红色。然后,将prfx 命名空间中的所有 p 元素都重新着色为蓝色,将msft 命名空间中的 p 元素重新着色为绿色。
下面的示例设置 SVG 元素的样式。
@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}
通过使用此示例中的命名空间和声明,使用 SVG 创建的所有圆都会填充为红色。
有关详细信息,请参阅 MSDN 上的 @namespace(英文)规则参考页。
Internet Explorer 9 增加了对 CSS3 值和单位模块中介绍的许多新值和单位的支持。这些新值和单位中的大多数对于支持本文档中介绍的其他 CSS3 功能是必需的。
Internet Explorer 9 增加了对以下新值和单位的支持:
此外,Internet Explorer 9 更新了用于生成的内容的 attr() 函数。该函数现在可以应用于任何属性,可接受多个参数。
下面的 CSS3 函数是 Internet Explorer 9 中新增的:
有关 CSS 函数的详细信息,请参阅 MSDN 上的 CSS 值和单位参考(英文)。
Internet Explorer 9 支持对 CSS3 选择器提案建议中指定的 CSS 选择器语法进行补充。此处列出的是 Internet Explorer 9 中新增的选择器。(有关 Internet Explorer 中的选择器支持的完整详细信息,请参阅 MSDN 上的 CSS 兼容性和 Internet Explorer(英文)。)
有关详细信息,请参阅 MSDN 上的 CSS 选择器(英文)参考部分。
若要查看提供的 CSS3 选择器示例,请转到 Internet Explorer Test Drive(英文)网站。
通过结构伪类,可以基于文档树中无法使用简单选择器或连结符选择的额外信息进行选择。
下面的代码选择作为文档根的 E 元素。
E:root
下面的代码选择作为其父级的第 n 个子级的 E 元素。
E:nth-child(n)
下面的代码选择作为其父级的第 n 个子级(从最后一个开始计数)的 E 元素。
E:nth-last-child(n)
下面的代码选择作为其类型的第 n 个同级的 E 元素。
E:nth-of-type(n)
下面的代码选择作为其类型的第 n 个同级(从最后一个开始计数)的 E 元素。
E:nth-last-of-type(n)
下面的代码选择作为其父级的最后一个子级的 E 元素。
E:last-child
下面的代码选择作为其类型的第一个同级的 E 元素。
E:first-of-type
下面的代码选择作为其类型的最后一个同级的 E 元素。
E:last-of-type
下面的代码选择作为其父级的唯一子级的 E 元素。
E:only-child
下面的代码选择作为其类型的唯一同级的 E 元素。
E:only-of-type
下面的代码选择没有子级(包括文本节点)的 E 元素。
E:empty
目标伪类选择引用 URI 的目标元素。段标识符用于标识页面中的位置,使用数字符号以及随后的锚点标识符组成,例如 http://www.example.com/mypage.html#section_3。
下面的代码选择类 important 的 div 元素,该元素是引用 URI 的目标元素。如果文档的 URI 没有段标识符,则不存在目标元素。
div.important:target
UI 元素状态伪类用于选择处于特定状态(已启用、已禁用或已选择(选中))的 UI 元素(窗体控件,如单选按钮或复选框)。
下面的代码选择已启用的 E 窗体控件元素。
E:enabled
下面的代码选择已禁用的 E 窗体控件元素。
E:disabled
下面的代码选择已选择的 E 窗体控件元素。
E:checked
:indeterminate 伪类选择无法确定其切换状态(既不是已选中(已选择),也不是未选中(未选择))的单选按钮和复选框。下面的代码选择无法确定其状态的 E 窗体控件元素。
E:indeterminate
注意 当前 CSS3 规范中不再定义 :indeterminate 伪类,但是许多常用浏览器仍支持该伪类。
求反伪类采用简单选择器作为参数,选择未被该参数选择的元素。下面的代码选择与简单选择器 s 不匹配的 E 元素:
E:not(s)
UI 元素段伪元素 ::selection 用于选择用户突出显示的任何页面部分,包括可编辑文本字段中的文本。此伪元素可以应用于 color 和 background-color 属性。下面的代码选择 E 元素中的任何用户选定文本。
E::selection
注意 当前 CSS3 规范中不再定义 ::selection 伪元素,但是许多常用浏览器仍支持该伪元素。
Internet Explorer 9 实现了对 CSS 对象模型 (OM) 视图模块工作草案的一些支持。
CSSOM 视图模块定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。Internet Explorer 8 对此模块的一部分提供支持。Internet Explorer 9 扩展了对更多 CSSOM 视图 API 的支持:
数据 URI 可用于在网页的上下文中直接嵌入数据。最常见的示例是在网页中嵌入的微小图像,如下所示:
data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP
当放置在 img 元素的 src 特性中时,此文本可有效地将图像嵌入在页面的标记中。Internet Explorer 8 将数据 URI 引入到 Internet Explorer 中。
凭借 Internet Explorer 9,开发人员现在可以在 script 元素的 src 特性中使用数据 URI。此外,数据 URI 的大小限制从 Internet Explorer 8 中的 32 KB 提高到 Internet Explorer 9 中的 4 GB。
Internet Explorer 9 采用显著改进的文档对象模型 (DOM)。除了扩展对万维网联合会 (W3C) DOM 级别 2 (L2) 和 L3 的支持之外,Internet Explorer 9 还采用增强的 DOM 以及改进的空白处理。
Internet Explorer 9 中的增强型 DOM 加快了新 JavaScript 引擎“Chakra”与 Trident 布局引擎之间的脚本执行层速度,并将 DOM 的入口点转移到 Chakra 引擎中,从而改进了 Internet Explorer 9 标准模式(IE9 模式)的整体性能。有关 IE9 模式的详细信息,请参阅本文档中的通过标准支持实现互操作性改进。增强型 DOM 同时还可按照 W3C DOM L2 和 L3 规范中的规定,实现正确的 DOM 继承对象层次结构。
以 Internet Explorer 9 标准模式运行页面时,F12 开发人员工具中现在可以反映增强型 DOM 对象类型。(有关 Internet Explorer 9 中的新 F12 开发人员工具的详细信息,请参阅本文档中的 F12 开发人员工具。)IE9 模式页面不会显示旧式的基于 COM 的类型(由各种接口和显示对象组成),而是报告由 Chakra 引擎使用的实际增强型 DOM 对象类型名称,这符合 W3C DOM L2 和 L3 标准(例如 NodeList、DocumentType、HTMLBodyElement 等)。
Internet Explorer 9 中的增强型 DOM 显著改进了 Internet Explorer 9 与其他浏览器之间的互操作性状态。同时还可提高很多方案的性能,这主要得益于表示为本机 JavaScript 对象的 DOM 对象。
增强型 DOM 将新 JavaScript 引擎“Chakra”提供的各种新功能扩展到 DOM 提供的对象和 API 中,包括:
这些功能统一了 JavaScript 引擎的本机对象与 DOM 之间的编程体验。此外还新增加了以下 DOM 功能:
if (myElement.nodeType == Node.ELEMENT_NODE)尽管 Internet Explorer 已支持在 XML 与本机 DOM 之间进行分析和序列化,脚本仍然无法方便地从 HTML 文档内部访问此功能。因此,Internet Explorer 9 增加了对 DOMParser 和 XMLSerializer 接口的支持。这些接口受到其他常用浏览器的广泛支持。
下面的脚本示例演示如何使用 DOMParser 接口将字符串分析为 XML 文档:
var parser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");
下面的脚本示例演示使用 XMLSerializer 接口,将 DOM 节点(包括 HTML 文档中的节点)序列化为 XML 字符串:
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);
Internet Explorer 9 增加了对文档对象模型级别 2 (DOM L2) 和级别 3 (DOM L3) 的支持,并在 Internet Explorer 中现有实现的基础上改进了 DOM L2 支持。还增加了对 WebIDL 工作草案规范(英文)的支持。
Internet Explorer 9 引入了对以下 DOM 功能的支持。
Internet Explorer 9 增加了对许多新 DOM L2 核心 API 的支持,包括:
还增加了对 DOM 命名空间的可互操作支持,如对 *NS 方法和命名空间相关属性(createElementNS、namespaceURI、localName、prefix 等等)的支持。Internet Explorer 9 还支持许多最常用的 DOM L3 核心方法和属性:
Internet Explorer 9 完全支持 DOM L2 视图属性。
有关详细信息,请参阅 MSDN 上的 DOM 核心和视图(英文)参考部分。
元素遍历(英文)规范定义了 ElementTraversal 接口。利用该接口,可以通过脚本对 DOM 树中的元素(如 HTML、XML 或 SVG 文档中的元素节点)进行导航。Internet Explorer 9 引入了对 ElementTraversal 接口及其五个属性的支持。
DOM 事件规范描述 DOM 事件系统(可用于实现事件处理程序的注册),描述文档树中的事件流,并定义事件的上下文信息。有关事件模型的详细信息,请参阅 MSDN 上的了解事件模型(英文)。
Internet Explorer 9 中事件系统的一个主要目标是符合 W3C 指定的可互操作系统的要求。这样,您不必再使用 Internet Explorer 专有的 attachEvent 模型,从而无需针对不同浏览器分别编写代码。
注意 包含 DOM 变异事件是考虑到完整性,但在 W3C 标准中将其弃用。
Internet Explorer 9 增加了对 DOM L2 HTML API(在以前版本的 Internet Explorer 中不可用)的支持,包括 HTML5 API(如 getElementsByClassName 和 characterSet)。Internet Explorer 9 改进了表中的对象模型,特别是在用于添加或删除元素的 DOM 操作方面。
getElementsByClassName 方法返回具有与输入字符串匹配的类特性的所有元素节点。其功能与 getElementsByTagName 方法的功能类似。
characterSet 特性返回当前文档的字符编码的首选 MIME 名称。
DOM L2 样式规范定义了一些 API,用于通过删除或修改规则,以编程方式访问和更改各个元素和整个样式表的样式。以前版本的 Internet Explorer 能够使用专有方法完成这些任务;Internet Explorer 9 增加了对 DOM L2 样式规范中定义的标准化 API 的支持。此外,还增加了对标准化 API(在 Internet Explorer 中没有等效项,如 getComputedStyle 方法)的支持。请参阅 Internet Explorer Test Drive(英文)网站提供的 getComputedStyle 方法示例。
有关详细信息,请参阅 MSDN 上的 DOM 样式(英文)。
DOM L2 遍历和范围(英文)规范的 DOM 范围部分定义在一对边界点之间选择文档内容的一般方法。边界点是通过容器(包含该点的父元素)和偏移量(该点在容器中所处的位置)指定的。结合 HTML5 Selection 接口,通过 DOM 范围功能可实现诸如以编程方式检索范围、选择子级和删除选择等功能。
Internet Explorer 9 支持所有 DOM L2 范围 API,以及所有 HTML5 选择 API(如已经广泛使用的 setSelectionRange 方法)。
有关详细信息,请参阅 MSDN 上的 DOM 范围(英文)。
DOM L2 遍历和范围(英文)规范的 DOM 遍历部分定义了在文档中移动和根据需要筛选节点的方法。Internet Explorer 9 支持 W3C 规范中定义的两种 DOM 遍历方法(NodeIterator 和 TreeWalker)以及两种节点筛选方法(whatToShow 和 NodeFilter)。
有关详细信息,请参阅 MSDN 上的 DOM 遍历(英文)。
对于在 DOM 中公开空白,Internet Explorer 中的处理方式与其他浏览器中的处理方式不同;这一领域中缺乏互操作性使 Web 开发人员倍感不便。在以前版本中,Internet Explorer 会折叠所遇到的空白,不会将其放置到 DOM 中的文本节点中。在 Internet Explorer 9 中,会按预期方式保留空白并将其放置到 DOM 中的文本节点中。此行为与其他主要浏览器一致。
除了改进 JavaScript 性能,Internet Explorer 9 还对 JavaScript 语言功能进行了增强。2009 年 12 月,ECMA 批准 ECMA-262 第五版(英文)作为第三版的后继版本(未发布过第四版),同一年,在将 JavaScript 对象的本机 JSON 支持添加到 Internet Explorer 8(英文),并将 DOM 对象的访问器支持添加到 Internet Explorer 8(英文)时,Microsoft 首次提供支持 ECMAScript 5 (ES5) 的元素。不过除了 JSON 和 DOM 访问器支持之外,ES5 还标准化了对 JavaScript 语言进行的许多重大增强功能。
Internet Explorer 9 中实现了许多重要的 ECMAScript 5 功能,包括:
Internet Explorer 9 还更正了以前的 Internet Explorer 中的 JavaScript 实现中存在的几个问题。有关详细信息,请参阅 Internet Explorer 团队博客(英文)。若要查看提供的 ECMAScript 5 支持,请转到 Internet Explorer Test Drive(英文)网站。
Internet Explorer 8 引入了对 HTML5 工作草案规范(英文)的某些功能的支持,包括:
Internet Explorer 9 以 Internet Explorer 8 已完成的 HTML5 合规性方面的工作为基础,实现了以下新功能:
注意 请务必记住,截止到撰写本文时为止,HTML5 规范仍然处于工作草案阶段。在该规范达到候选建议阶段之前,可能会进行重大更改。有关详细信息,请参阅最新 HTML5 工作草案(英文)。
HTML5 地理位置
Internet Explorer 9 增加了对地理位置的支持。地理位置 API 能让 Web 应用程序访问运行 Internet Explorer 的 PC 的当前地理位置。然后,网页可以根据位置来定制用户体验,例如,显示在地图上的位置或者显示最新当地信息(如天气或新闻报道)。位置数据是根据纬度和经度坐标返回的。Internet Explorer 9 中的地理位置 API 符合地理位置 API 规范(英文)中设定的标准。
要观看地理位置的实际演示,请参阅 Internet Explorer 9 Test Drive 网站。
有关地理位置的详细信息,请参阅 MSDN。
至于 Internet Explorer 9 中现在支持的最令人期待的 HTML5 功能,其中两个是新的 video 和 audio 元素。video 和 audio 元素都在 HTML5 规范的嵌入式内容(英文)部分中定义。
实际上,通过 video 和 audio 元素,可以将视频和音频内容嵌入到 HTML 页面中。Web 开发人员还可以为这两个元素指定几个特性。例如,考虑下面的标记。
<video width="400"
height="300"
src="video.mp4"
poster="frame.png"
autoplay
controls
loop>
This content appears if the video tag or the codec is not supported.
</video>
在 Internet Explorer 9 中,此标记将在加载视频内容时,在 400×300(width 和 height 特性)的空间中显示图像文件“frame.png” (poster 特性)。视频文件"video.mp4" (src 特性)将在加载页面后自动开始播放(autoplay 特性),并且显示用于控制视频的控件(controls 特性)。视频播放完毕时,将重复播放(loop 特性)。如果视频格式不受支持,则改为显示 video 元素中的文本(“This content appears…”)video 元素还支持 preload 元素,后者可提示浏览器:Web 开发人员认为如何可以实现最佳用户体验。
若要查看提供的 video 元素示例,请参阅 Internet Explorer Test Drive 网站上的“视频全景”演示。
Internet Explorer 9 还支持多个源的 video 元素,其中每个源都由子元素 source 指定。例如,考虑下面的标记。
<video width="400" height="300" poster="frame.png" autoplay controls loop>
<source src="video.ogv" type='video/ogg; codecs="theora,
vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'>
</video>
在这里,Internet Explorer 9 选择列出的第一种受支持格式(本例中为第二个 source 元素)并播放其关联的源文件。
audio 元素的定义方式与 video 元素的定义方式类似,但是没有 width、height 和 poster 特性。若要查看提供的 audio 元素示例,请转到 Internet Explorer Test Drive(英文)网站。
Internet Explorer 9 支持以下内容格式:
| 元素名称 | 支持的格式 |
| 视频 | MP4 容器、H.264 视频、所有配置文件 — AAC 或 MP3 格式的音频 WebM 视频(如果您安装了 VP8 编码解码器) |
| audio | AAC 或 MP3 |
有关详细信息,请参阅 MSDN 上的 HTML5 视频和音频(英文)。
Internet Explorer 9 中新增的另一个令人期待的 HTML5 功能是 canvas 元素,该元素可与 Canvas 2D API 结合使用。按照 HTML5 规范中的定义,使用 canvas 元素可以在依赖于分辨率的位图画布上呈现图形。若要在画布上绘制,可使用“上下文”,如 W3C Canvas 2D API 规范中指定的 Canvas 2D 上下文。Internet Explorer 9 通过将 2D Canvas 绘制 API 用作其上下文,引入了对 canvas 元素的支持。(在 Internet Explorer 9 中,Canvas 2D 上下文由 CanvasRenderingContext2D 对象或 ICanvasRenderingContext2D 接口表示。)与 Internet Explorer 9 中的所有图形一样,canvas 是使用 Windows 和 GPU 进行加速的硬件。
使用画布可以实现各种绘制方案,包括矩形、路径、直线、填充、弧形以及贝塞尔曲线和二次曲线。此外,Internet Explorer 9 中的 canvas 元素还支持 width 和 height 特性。(width 和 height 的默认值分别是 300 和 150 像素,默认颜色是透明黑色。)
画布是一种对 Web 上的图形进行编程的方式。canvas 标签是一种“即时模式”(绘制命令直接发送给图形硬件)的二维绘制图面,可用于提供实时图形、动画或交互式游戏,无需下载单独的插件。根据 CanvasRenderingContext2D 对象定义的 API,使用画布可以实现以下绘制方案:
您可以使用 JavaScript 创建动态画布绘制,或实现可对键盘输入、鼠标单击或任何其他浏览器事件进行响应的交互体验。例如,Internet Explorer Test Drive 网站上的示例(英文)仅使用几行 JavaScript,就实现了随机放置、着色的发光直线。
Internet Explorer 9 中的 canvas 元素支持 width 和 height 特性。(width 和 height 的默认值分别是 300 和 150 像素,默认颜色是透明黑色。)
Internet Explorer 9 支持以下 Canvas 2D 上下文 API(由 CanvasRenderingContext2D 对象公开的成员):
有关对 Internet Explorer 9 中的 HTML5 Canvas 的更加深入介绍,请参阅 MSDN。此外,还可以访问 Internet Explorer Test Drive(英文)网站,查看 canvas 元素的更多演示。有关 Internet Explorer 9 中的 canvas 元素的技术信息,请参阅 MSDN 上的 canvas(英文)元素参考页。
Internet Explorer 9 中的 HTML 分析进行了改进,更加符合 HTML5 草案规范中规定的行为。
Internet Explorer 9 支持直接嵌入 HTML 中的 SVG。有关 SVG 的详细信息,请参阅本指南中的可缩放的向量图形 (SVG)。
Internet Explorer 9 将 MIME 类型为 application/xhtml+xml 的文档分析为 XHTML。
以前,Internet Explorer 会将自己无法识别的元素分析为“未知”元素。这些元素将扁平化,因而无法应用常规 CSS 样式规则,并且不符合 HTML5 草案规范。Internet Explorer 9 改变了这一行为,现在,会将无法识别的元素分析为“泛型”元素,因而这些元素可以像常规元素一样工作。这样,开发人员无需再提供解决方法(如调用 document.createElement 强制 Internet Explorer 识别元素)。
下面是泛型元素的简单示例(本例中是名为 mydiv 的未定义元素)。
<style type="text/css">
mydiv {
color:blue;
font-weight:bold;
}
</style>
...
<p>I am using a <mydiv>generic element</mydiv> in this sentence.</p>
Internet Explorer 8 会忽略 mydiv 标签及其关联 CSS 规则。此语句的呈现效果如下。
.png)
Internet Explorer 9 会正常分析 mydiv 标签,呈现效果如下。
.png)
如果 HTML 包含重叠标签,则在分析时,Internet Explorer 8 及更早版本不会解析这些标签。这一行为不符合 HTML5 草案规范的规定。如果为了编写脚本而使一些元素重叠(如此处举例说明的元素),则可能导致令人困惑的脚本错误。Internet Explorer 9 遵循 HTML5 草案规范,在分析时会解析重叠标签。
下面是一个简单的脚本示例,将重叠的 i 标签与 b 标签之间的文本转变为红色。
<script type="text/javascript">
function load()
{
var elms = document.getElementsByTagName("i");
for(var i = 0; i < elms.length; i++)
{
var elm = elms[i];
if(elm.parentNode.tagName.toLowerCase() == "b")
elm.style.color = "red";
}
}
</script>
...
<body onload="load();">
You should be aware of how <b>this <i>affects</b> script</i>.
</body>
在 Internet Explorer 8 及更早版本中,此标记会生成意外的呈现效果。
.png)
在 Internet Explorer 9 中,此标记会正常呈现。
.png)
Internet Explorer 8 及更早版本不会将 script 或 style 块中的文本保存到 DOM 中的文本节点。Internet Explorer 9 以正常方式将 script 或 style 块中的文本作为文本节点保存到 DOM 中。这样,源代码在 DOM 中作为文本节点,便于您通过脚本进行操作。
Internet Explorer 9 增加了对三个 HTML5 文本选择 API 的支持。Selection 对象表示 Range 对象的列表,这些对象是通过 Internet Explorer 9 中新增的 DOM L2 范围(英文)支持实现的。有关详细信息,请参阅本文档前面的文档对象模型 (DOM) 改进。
getSelection 方法返回窗口的 Selection 对象,该对象表示当前所选文本。
selectionStart 属性获取相对于当前所选文本开始位置的偏移量,还可以设置所选内容的开始位置。
selectionEnd 属性获取相对于当前所选文本介绍位置的偏移量,还可以设置所选内容的结束位置。
Internet Explorer 9 改进了对若干种 HTML5 语义元素的支持。此处所指的“语义”元素定义为这样一种元素:其标记描述其内容,但它没有任何特殊行为。语义标记对于可访问性尤其有用。
Internet Explorer 9 对其语义元素支持进行了以下更改:
现在识别以下语义元素:
国际颜色协会 (ICC) 发布颜色配置文件,用于描述软件和硬件的颜色特性。
Internet Explorer 9 按照 ICC 规范(英文)中的规定,为图像引入了对 ICC v2 和 v4 颜色配置文件的支持。
选择器 API 级别 2(英文)规范定义了一组应用程序编程接口 (API),可用于评估文档对象模型 (DOM) 中的选择器。
Internet Explorer 8 实现了选择器 API querySelector 和 querySelectorAll。Internet Explorer 9 增加了对 msMatchesSelector 方法的支持。
对可缩放的向量图形 (SVG) 的支持已成为 Internet Explorer 要实现的最热门的功能之一,同时也是一种功能强大的方式,用于向网站添加可轻松缩放的高保真视觉效果(从小而简单到大而复杂),而无需插件或单独的查看器。
在 Internet Explorer 9 中,Microsoft 很自豪地引入了对基本 SVG 功能集的支持。Internet Explorer 9 中的 SVG 支持基于 SVG 1.1(第二版)规范建议(针对桌面浏览器)。已经实现了以下功能:
Internet Explorer 9 支持用于显示 SVG 标记的以下方法:
<object data="rect2.svg" width="100%" height="400px"
type="image/svg+xml"></object>
<embed id="Smiley" src="smiley.svg" type="image/svg+xml">
有关 Internet Explorer 9 中的 SVG 支持的详细信息,请参阅 MSDN。
有关 SVG 的详细信息,请参阅 MSDN 上的 svg(英文)元素参考页。
Internet Explorer 9 按照 SVG 1.1(第二版)规范的基本形状模块(英文)的规定,引入了对所有基本形状元素、其特性以及关联 DOM 接口的分析和呈现的支持。Internet Explorer 9 支持的基本形状集由以下形状元素组成:
Internet Explorer 9 还支持这些元素的关联 DOM 接口。
下面是上述每个形状元素的示例。标记之后是 Internet Explorer 9 中相应结果的屏幕截图。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect fill="orange"
stroke="black"
width="150"
height="75"
x="50"
y="25" />
</svg>
.png)
<rect fill="orange"
stroke="black"
width="150"
height="100"
x="50"
y="25"
rx="10"
ry="50"/>
.png)
有关详细信息,请参阅 MSDN 上的 rect(英文)元素参考页。
<circle fill="orange"
stroke="black"
stroke-width="3"
cx="40"
cy="25"
r="20"/>
.png)
有关详细信息,请参阅 MSDN 上的 circle(英文)元素参考页。
<ellipse stroke="orange"
cx="100"
cy="60"
rx="75"
ry="50"/>
.png)
有关详细信息,请参阅 MSDN 上的 ellipse(英文)元素参考页。
<!-- vertical -->
<line x1="0.7cm"
y1="1cm"
x2="0.7cm"
y2="2.0cm"
style="stroke:
blue;"/>
<!-- diagonal -->
<line x1="30"
y1="30"
x2="150"
y2="85"
stroke="red"
stroke-width="4"/>
<!-- horizontal -->
<line x1="50pt"
y1="25pt"
x2="150pt"
y2="25pt"
stroke="yellow"
stroke-width="3"/>
.png)
有关详细信息,请参阅 MSDN 上的 line(英文)元素参考页。
“折线”在 SVG 中定义为连接的多条直线,通常构成“开放”形状、少一条或多条边的多边形或非凸形状。
<polyline points="15, 5, 100 8,3 150"
fill="orange"
stroke="black"
stroke-width="4"/>
.png)
有关详细信息,请参阅 MSDN 上的 polyline(英文)元素参考页。
多边形是一个闭合形状。
<polygon points="15, 5, 100 8,6 150"
fill="orange"
stroke="black"
stroke-width="4"/>
.png)
有关详细信息,请参阅 MSDN 上的 polygon 元素参考页。
Internet Explorer 9 按照 SVG 1.1(第二版)规范的剪辑、蒙版和合成模块(英文)的规定,支持 SVG 剪辑、剪辑路径、蒙版和不透明度。(本文档路径部分中讨论 SVG 路径。)
剪辑路径 剪切或“剪辑”可以绘制颜色、图案或图像的区域。图形元素处于剪辑路径之外的所有部分都不会绘制。剪辑路径是完全不透明的;图形元素处于剪辑路径之外的部分是完全不可见的。
在 SVG 中,overflow 和 clip 属性确定初始剪辑路径或确定用于显示内容的形状。默认情况下,初始剪辑路径定义为 SVG 视区或页面中将显示 SVG 内容的矩形区域。
clipPath 元素定义剪辑路径。然后,可使用 clip-path 属性引用该剪辑路径。clip-rule 属性应用于 clipPath 元素中的图形元素,clipPathUnits 特性为 clipPath 的内容定义坐标系。剪辑路径可应用于文本、颜色、图案和图像。
通过 SVGClipPathElement DOM 接口,可以以编程方式访问剪辑功能。
下面是 SVG 剪辑路径的一个简单示例。
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="100">
<clipPath id="clip1">
<circle id="clipShape" cx="60" cy="60" r="50" />
</clipPath>
<rect x="20" y="20" width="100" height="100" fill="blue"
clip-path="url(#clip1)" />
</svg>
此示例使用 clipPath 元素在圆形中定义一个剪辑路径。然后,使用 clip-path 属性将该剪辑路径应用于一个矩形。这会在 Internet Explorer 9 中产生以下效果。
.png)
蒙版 类似于剪辑路径,不过它是半透明的。蒙版通常用于将前景对象合成到当前背景中。
mask 元素用于定义蒙版。然后可使用 mask 属性引用该蒙版。
下面是 SVG 蒙版的一个简单示例。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example mask01 - three different colored circles used to mask the color of a rectangle
</desc>
<defs>
<g id="circles">
<g stroke="white" stroke-width="2" >
<circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
<circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
<circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
</g>
</g>
<mask id="myMask" >
<use xlink:href="#circles" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="purple"
mask="url(#myMask)" />
</svg>
此示例使用 mask 属性在颜色不同的三个相邻圆形中定义一个蒙版。然后使用 mask 属性将该蒙版应用于一个紫色矩形。这会在 Internet Explorer 9 中产生以下效果。
.png)
Internet Explorer 9 按照 SVG 1.1(第二版)草案规范的坐标系、转换和单位模块(英文)的规定,引入了对 SVG 坐标系、转换和单位的支持。Internet Explorer 9 支持的功能包括:
Internet Explorer 9 还支持与 SVG 坐标系和转换关联的 DOM 接口。
Internet Explorer 9 按照 SVG 1.1(第二版)规范的文档结构、元数据和可扩展性模块的规定,引入了对基本 SVG 文档结构、元数据和可扩展性功能的支持。Internet Explorer 9 支持的元素包括:
Internet Explorer 9 还支持这些元素的关联 DOM 接口。
使用 SVG,可以通过颜色、渐变或图案绘制或勾画形状和文本。Internet Explorer 9 按照 SVG 1.1(第二版)规范的渐变和图案模块的规定,支持 SVG 渐变和图案。
渐变支持是通过渐变元素(linearGradient 和 radialGradient)和特性(gradientUnits 和 gradientTransform)提供的。渐变颜色由 stop 元素定义。渐变元素可用于 SVG 形状的 fill 和 stroke 属性。例如,考虑以下标记:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="10%" stop-color="yellow" />
<stop offset="90%" stop-color="blue" />
</linearGradient>
</defs>
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="20" y="20" width="300" height="100"/>
</svg>
此标记定义了一个具有线性渐变的矩形。两个 stop 元素指定颜色转变在矢量方向上的颜色停止点,在 10% 位置处为黄色停止点,在 90% 位置处为蓝色停止点。Internet Explorer 9 中的显示效果如下:
.png)
图案支持是通过 pattern 元素及其特性提供的。像渐变一样,图案元素也可用于 SVG 形状的 fill 和 stroke 属性。例如,考虑以下标记。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
x="0" y="0" width="150" height="100">
<circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
/>
<rect x="100" y="0" width="50" height="50" fill="blue"
stroke="yellow" />
</pattern>
</defs>
<ellipse fill="url(#mycircleandsquare)" stroke="black"
stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
</svg>
在此示例中,pattern 元素定义了一个由蓝色小正方形和很小的黄色圆形交替组成的图案。然后用该图案填充指定的椭圆形。下面的图像是 Internet Explorer 9 中的显示效果。
.png)
SVG 内容可以是交互式的,即它可以更改,以响应用户输入。Internet Explorer 9 按照 SVG 1.1 规范(第二版)的交互性模块(英文)的规定,支持 SVG 交互功能,包括:
Internet Explorer 9 还支持交互性模块的 SVGCursorElement DOM 接口。
此外,Internet Explorer 9 还按照 SVG Tiny 1.2(英文)规范的交互性模块中的规定,支持 focusable 属性。
以下标记是提供的一个非常简单的 SVG 交互性示例。
<svg xmlns=http://www.w3.org/2000/svg
xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
height="600">
<script type="text/ecmascript">
<![CDATA[
// object representing circle
var redcircle;
// variable representing circle's radius
var r;
window.onload = function() {
redcircle = document.getElementById('redcircle');
r = parseInt(redcircle.getAttribute("r"));
}
var grow = function() {
r = 2*r;
redcircle.setAttribute("r",r);
}
var shrink = function() {
r = r/2;
redcircle.setAttribute("r",r);
}
]]>
</script>
<circle id="redcircle" cx="100" cy="100" r="50" fill="red"
onmousedown="grow()" onmouseup="shrink()"/>
</svg>
加载此代码段后,它会显示一个红色的小圆形。
.png)
单击该圆形会将它放大至两倍大小。
.png)
使用 mouseover 和 mouseout 事件也可实现这种效果,将鼠标移到/移出该圆,它会相应地变大/缩小。
...
<circle id="redcircle" cx="100" cy="100" r="50" fill="red"
onmouseover="grow()" onmouseout="shrink()"/>
...
SVG 支持将 SVG 内容链接到其他页面以及 SVG 文档的预定义视图。例如,如果希望直接链接到某个图的特写,视图会很有用。
Internet Explorer 9 按照 SVG 1.1 规范(第二版)链接模块(英文)的规定,支持 SVG 链接和视图。这包括对 a 和 view 元素的支持。
此外,也支持链接模块的关联 DOM 接口 SVGAElement 和 SVGViewElement。
像在 HTML 中一样,在 SVG 中,a 元素也用于创建超链接。例如,以下标记在一个矩形上提供超链接。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.bing.com" target="_blank">
<rect x="20" y="20" width="250" height="250"/>
</a>
</svg>
视图可用于指示浏览器以某种方式显示 SVG 图像。例如,以下标记定义一个视图链接。
...
<a xlink:href="#rect-view">
<text x="320" y="70" style="fill:red">Go to Rectangle</text>
</a>
<view id="rect-view" viewBox="280 245 135 85" />
<rect id="rect-object" style="fill:red" x="280" y="245"
width="135" height="85"/>
...
在此示例中,rect-view 视图定义为具有给定坐标的 viewBox。单击该连接(文本“Go to Rectangle”)时,rect-view 将显示该视图,其中显示红色矩形。
以下标记定义另一个视图链接。
...
<a xlink:href="#circle-view">
<text x="250" y="70" style="fill:blue">Go to Circle</text>
</a>
<view id="circle-view" viewBox="5 36 128 115"
preserveAspectRatio="none"/>
<circle id="circle-object" style="fill:blue" cx="70" cy="85"
r="45"/>
...
在此示例中,circle-view 视图的特性 preserveAspectRatio 设置为none. 这就是说,即使该形状是一个圆形,在调用该视图时,它也不会均匀扩展以填充指定的 viewBox 矩形。它会不均匀地伸展,使其边框完全与 viewBox 矩形匹配。首次加载该页面时,此标记在 Internet Explorer 9 中的效果如下所示。
.png)
单击“Go to Circle”时,circle-view 将调用视图,圆形将伸展以填充 viewBox 矩形。这样,它显示为一个椭圆形。
.png)
绘制和颜色是 SVG 的基本组成部分。绘制的概念包含填充(纯色、渐变和图案)、笔划(沿路径绘制的线条)以及标记符号(应用于线段端点;例如箭头),还可以包含不透明度。填充和笔划可应用于路径、文本和形状。
Internet Explorer 9 按照 SVG 1.1(第二版)规范的绘制:填充、笔划和标记符号模块(英文)和颜色模块(英文)的规定,引入了对 SVG 绘制和颜色的支持。包括对以下几项的支持:
此外还支持绘制模块的关联 DOM 接口 SVGPaint 和 SVGMarkerElement。
本文档的路径部分提供了几个 SVG 中的填充和笔划示例。
SVG 路径是形状的轮廓,可以用于填充、绘制笔划(沿着路径绘制线条),也可以用作剪辑路径(其他形状的裁剪图)。
Internet Explorer 9 按照 SVG 1.1(第二版)规范的路径模块(英文)的规定,引入了对 SVG 路径的支持。这包括对 path 元素以及 d 属性(用于分析路径数据)的支持。
此外还支持路径模块的关联 DOM 接口。
通过 path 元素,可以实现很多不同的开发人员方案。下面只是几个简单的示例。标记之后是 Internet Explorer 9 中相应结果的屏幕截图。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 20 20 L 60 20 L 40 60 z"
fill="green"
fill-opacity="0.5"
stroke="red"
stroke-width="3" />
</svg>
.png)
<path d="M20,30 Q40,50 60,30 T100,30"
fill="none"
stroke="red"
stroke-opacity="0.2"
stroke-width="3" />
.png)
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
fill="green"
stroke="blue"
stroke-width="4" />
.png)
SVG 文档可以包含文本。在 SVG 中,文本和其他图形元素的呈现方式是一样的,这就是说,坐标系转换、绘制、剪辑和蒙版都可应用于文本。
Internet Explorer 9 按照 SVG 1.1(第二版)规范的文本模块(英文)的规定,支持文本呈现。
text 元素指定要绘制的字符。因为 SVG 不会自动换行,所以您必须事先确定换行符。为了调整文本行内的文本属性(如字体、粗细、颜色、字距等等),SVG 提供了 tspan 元素。
Internet Explorer 9 还支持文本模块的关联 DOM 接口。
本节首先介绍“固定网站”,这种新方式可加强网站与用户之间的连接。然后,介绍一种在 Internet Explorer 9 中指定版本的新方式,用于帮助处理在迁移到新版 Internet Explorer 时出现的兼容性问题。接下来,将介绍有关 Internet Explorer 开发人员工具的改进信息,首次直接集成这些工具的是 Internet Explorer 8。
当您利用固定网站时,用户变得更愿意沉浸于您的网站。固定网站是一组新的工具,提供网站强化型用户界面,具有放大的收藏图标,还有“后退”与“前进”按钮以及其他可以与网站的品牌和总体外观统一的界面元素。与 Windows 7 集成能让人们使用最新的 Windows API 访问开发人员网站,以便创建网站跳转列表、缩略图工具栏和通知。(固定网站仅在 Windows 7 任务栏中受到支持。)
.png)
用户可以通过执行下列操作之一将网站固定到任务栏中:
某个网站在固定后,会按照自定义增强功能呈现,例如,“后退”和“前进”按钮与网站的颜色方案匹配。另外,网站还可以固定到“开始”菜单中。
跳转列表任务是针对固定网站定制的、特定于应用程序的操作。它们使用和 Windows 7 中的应用程序同样的功能作为基础。通过使用跳转列表任务,网站可以将最常用的命令呈现给用户。您可以根据网站的功能和用户预期执行的重要操作来定义跳转列表任务。这些任务提供一组静态链接,可供用户随时访问,即使在不运行 Internet Explorer 的情况下也可以。有关跳转列表任务的详细信息,请参阅 MSDN 上的如何创建动态跳转列表(英文)。
缩略图工具栏实质上是您的网站的“远程控件”。当您将鼠标悬停在固定网站的任务栏按钮上时,该工具栏便会显示在缩略图预览下面。此功能特别适用于那些实施视频或音频播放的网站,但缩略图工具栏也有许多潜在用途。缩略图工具栏按钮可以包括用于控制播放、添加或共享收藏夹、搜索、更改在线状态、即时购物或评定网页等级的控件。有关创建缩略图工具栏的详细信息,请参阅 MSDN 上的如何创建缩略图工具栏(英文)。
就像 Windows 7 中的应用程序一样,固定网站可以通过在固定网站任务栏按钮的上面显示覆盖图标,让用户看到通知和状态。覆盖图标可在固定网站的窗口被阻止而无法查看时(例如,当浏览器窗口最小化或被另一个窗口阻止时)帮助吸引对网站的注意。可以使用覆盖图标来提供重要的状态信息或通知,如网络状态、在线状态或新邮件。有关通知的详细信息,请参阅 MSDN 上的如何提供通知(英文)。
Internet Explorer 9 将不会通知用户网站是否能够进行固定。是否宣传这些功能要由开发人员决定。您可以利用许多方式来让用户知道您的网站有固定网站功能,这些方式包括浮动广告、下拉列表、横幅标题和层次效果;拖放以固定图标和图像;以及提供首轮体验以便在用户首次固定网站后宣传固定网站功能。有关可发现性的详细信息,请参阅 MSDN 上的如何提高可发现性(英文)。
有关固定网站的说明信息和代码示例,请参阅固定网站上的 MSDN 开发人员中心(英文)。
有关固定网站的演示,请参阅 Internet Explorer 9 Test Drive 网站。
Internet Explorer 8 引入了文档兼容性模式,这是对 Microsoft Internet Explorer 6 中引入的兼容性模式的扩展。通过文档模式,可以选择 Internet Explorer 用来显示网页的特定呈现模式。有关详细信息,请参阅 MSDN 上的定义文档兼容性。
Internet Explorer 9 增加了一种新文档模式,即 Internet Explorer 9 标准模式,使用该模式可实现最快的性能,并可进行扩展,以处理新 Web 应用程序的需求并实现最新的标准支持。
默认情况下,除非页面或 Web 服务器另有指定,否则 Internet Explorer 9 在 IE9 标准模式下运行。
若要确保 Internet Explorer 9 以最新文档模式呈现页面,最好的方法是使用标准 !DOCTYPE 指令且无 X-UA-Compatible meta 标签或 HTTP 标头。调用 IE9 标准模式的 !DOCTYPE 如下所示。
<!DOCTYPE html>
当然,您可以使用 !DOCTYPE 和 X-UA-Compatible meta 标签或 HTTP 标头来根据需要更改默认设置。
若要确定当前文档模式,请按 F12 打开 Internet Explorer F12 开发人员工具,然后查看菜单栏右侧。若要覆盖文档模式,请在“文档模式”菜单上单击“Internet Explorer 9 标准”。
用户代理 (UA) 字符串向主机服务器指出浏览器,并提供某些系统详细信息。(有关 UA 字符串的详细信息,请参阅 MSDN 上的了解用户代理字符串(英文)。)在默认情况下,Internet Explorer 9 发送简短 UA 字符串,这与以前的 Internet Explorer 版本不同。这一更改提高了整体性能、互操作性和兼容性。Internet Explorer 9 不再发送用户计算机上的其他软件(如 .NET 等)所创建的 UA 字符串附加信息。
Internet Explorer 9 发送新的 Internet Explorer 9 UA 字符串。开发人员应注意 Internet Explorer 8 UA 字符串的四项更改:
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
和 Internet Explorer 8 一样,Internet Explorer 9 中的兼容性视图对应于 IE7 标准模式。(有关兼容性视图的详细信息,请参阅 MSDN 上的了解兼容性视图列表(英文)。)在兼容性视图中,Internet Explorer 9 发送以下 UA 字符串:
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)
有关 Internet Explorer 9 的新 UA 字符串的详细信息,请参阅 Internet Explorer 团队博客文章“IE9 用户代理字符串简介”(英文)。
若要访问 Internet Explorer 9 的 F12 开发人员工具,请按 F12;或者,在“工具”菜单中单击“F12 开发人员工具”。如果您使用过 Internet Explorer 8 的开发人员工具,会立即注意到功能增强和性能提高。
Internet Explorer 9 中的 F12 开发人员工具引入了一个“控制台”选项卡,用来公开脚本事件。检查脚本时,会出现几个切换按钮:“错误”、“警告”和“消息”。每个按钮都显示每一类消息的数量。
Internet Explorer 9 的开发人员工具中增加了一个网络检查工具。通过单击“网络”选项卡,可以访问该工具。然后,您可以:
使用新的用户代理 (UA) 切换程序工具,可以修改向 Web 服务器指示浏览器类型和版本的 UA 字符串。(有关 Internet Explorer 9 中新 UA 字符串的详细信息,请参阅本文档中的用户代理 (UA) 字符串。)所选择的 UA 字符串将作为每个请求中的头通过网络发送。若要更改浏览器的 UA 字符串,请在开发人员工具的“工具”菜单中指向“更改用户代理字符串”,然后选择要发送其 UA 字符串的浏览器。
与以前版本的 Internet Explorer 相比,使用 Internet Explorer 9 中的 F12 开发人员工具,可以从更多方面来衡量网站性能。不过,您无法衡量用户实际的性能体验。为解决此问题,一些网站开发了自己的库以尝试测量网页的实时性能,但这种方法会产生开销,实际降低了用户浏览页面的速度。我们相信,W3C WebTiming 规范(截止到撰写本文时,该规范正处于“工作草案”阶段)为可靠解决这一问题提供了很好的概念基础。在 Internet Explorer 9 中,使用 DOM 中的 window.msPerformance 接口可以访问 WebTiming 功能。开发人员还可以在 F12 开发人员工具中启用脚本调试,之后可以访问 window.msPerformance 对象。
若要查看如何使用 window.msPerformance 对象的演示,请参阅 Internet Explorer Test Drive 网站。
2010 年 3 月 16 日:为 Internet Explorer Platform Preview 创建。
2010 年 4 月 15 日:更新了有关以下几项的信息:
2010 年 5 月 5 日:用有关以下几项的信息更新了 Internet Explorer Platform Preview Build 2:
2010 年 6 月 23 日:用有关以下几项的信息更新了 Internet Explorer Platform Preview Build 3:
2010 年 8 月 4 日:用有关以下几项的信息更新了 Internet Explorer Platform Preview Build 4:
2010 年 9 月 15 日:用新链接和关于以下几项的信息更新 Internet Explorer 9 Beta:
2010 年 10 月 28 日:用有关以下几项的信息更新了 Internet Explorer Platform Preview Build 6:
2011 年 2 月 10 日:针对 Internet Explorer 9 候选发布版本进行了以下信息的更新:
2011 年 2 月 18 日:更新以增加了有关以下内容的信息:
2011 年 3 月 14 日:Internet Explorer 9 的更新 (RTW):