Skip to main content

Internet Explorer 9 開發者指南

2011 年 3 月 14 日

《Internet Explorer 9 開發者指南》會針對 Internet Explorer 9 中的功能與功能改良提供概觀。網頁開發者與設計人員可以使用本指南來著手準備,以善加利用這些增強功能。此外,開發者也可以透過 Internet Explorer Test Drive (英文) 來實地體驗平台上的操作。

簡介

歡迎使用 Windows Internet Explorer 9。身為開發者,您希望能夠了解與自身與使用者所使用的瀏覽器有關的最新資訊。Internet Explorer 9 為全球最受歡迎網頁瀏覽器的最新版本。Internet Explorer 9 的設計理念在於透過提供未來網路所需的平台、工具與功能,協助網頁開發者社群建立豐富、可交互操作且符合規範的 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 在下列平台領域中有著哪些進展:

  • 全方位的瀏覽器效能
  • 網頁標準支援可協助啟用相同的標記,以便在不同的瀏覽器中以同樣的方式運作
  • 全新的圖形功能可充分駕馭 Windows PC 的強大效能

全方位的瀏覽器效能

瀏覽器效能涉及瀏覽器中許多不同的子系統。不同的網站以及相同網站中的不同活動,往往需要瀏覽器提供不同的負載與需求。舉例來說,像 Windows Live Mail Microsoft Office Web Apps 等 Web 應用程式運用瀏覽器子系統的方式,就會完全不同於 Bing 新聞 Digg (英文) 等新聞彙總網站的運用方式。

引進最新的 JavaScript 引擎「Chakra」

指令碼引擎效能僅僅是構成瀏覽器整體效能的其中一環。Internet Explorer 8 中的指令碼效能與 Internet Explorer 7 相較之下有著顯著的提升,而 Internet Explorer 9 中最新的 JavaScript 引擎「Chakra」將會讓效能再次大幅躍進。Chakra 引擎可以透過平行方式來解譯、編譯與執行程式碼,並利用多個 CPU 核心所帶來的優勢 (如果可供使用)。如需詳細資訊,請參閱 IE 小組部落格上的 Internet Explorer 9 中最新的 JavaScript 引擎 (英文)。

當然,Internet Explorer 小組也會將現行網站所使用之一切瀏覽器子系統的效能特性納入考量。他們的目標在於為現行所有網站提供更佳的效能,而不是僅僅達到基準而已。

網頁標準可支援相同的標記

Internet Explorer 將為網頁開發者提供豐富且可交互操作的功能。Internet Explorer 小組深知 Web 開發者不想要一次又一次地重新撰寫且重新測試其網站,因此,由瀏覽器廠商套用標準正是達成該目標的絕佳途徑。

在 Internet Explorer 8 中,Internet Explorer 小組不僅提供了 CSS 2.1 的高度可交互操作實作,更持續地提出測試套件,在這當中,提交給全球資訊網協會 (W3C) 的測試就超過了 7200 件。這些皆是不可或缺的重要任務。沒有驗證測試的話,各項標準若要一致地實作,挑戰性就會倍增,進而造成網站開發者難以仰賴這些標準。

Internet Explorer 9 在標準支援與交互操作性等方面投資了大幅心力。舉例來說,全新的 HTML5 支援、針對多項 CSS3 功能所提供的更佳支援,以及 Internet Explorer 首次引進的 SVG 內建支援,都已成為 Internet Explorer 9 中的一部分。

全新的圖形功能可充分駕馭 Windows PC 的強大效能

Windows 生態系統提供了令人驚艷的硬體革新。有了 Internet Explorer 9,現在網頁開發者便可以透過圖形與文字的硬體驅動運算來善加利用這項創新功能。

Internet Explorer 9 會使用 Windows 應用程式開發介面 (API) 的 DirectX 系列來為網頁開發者啟用多項進階功能。我們已透過使用 Direct2D 與 DirectWrite,將所有圖形與文字運算從 CPU 移動至圖形卡。圖形硬體加速也意味著豐富且密集採用圖形的網站能夠在使用較少 CPU 資源的 Windows 系統上以更快的速度呈現。此外,開發者在使用與以往相同的標準撰寫網站時,也可以自動利用這些變革。

全新功能清單

為了方便起見,本清單包含了 Internet Explorer 9 中新增的所有開發者功能。如需 Internet Explorer 9 搶鮮版組建所進行之變更的詳細資訊,請參閱修訂歷程記錄

  • 增強的 CSS3 支援
    • 透過 border-radius 屬性提供圓角
    • CSS3 背景與框線功能
    • opacity 屬性
    • RGBA、HSL 與 HSLA 色彩模型
    • CSS3 字型屬性與全新的網頁字型格式
    • CSS3 媒體查詢
    • CSS3 命名空間
    • CSS3 值與單位
    • CSS3 選擇器
  • 改良的資料 URI 支援
  • 文件物件模型 (DOM) 的改良
    • 增強的 DOM 功能
    • 將 XML 剖析與序列化至 DOM,並從 DOM 剖析與序列化 XML
    • 全新的 DOM 層級 2 (L2) 與層級 3 (L3) 支援以及更新的行為
      • DOM 核心 (L2、L3) 與檢視 (L2)
      • DOM 元素周遊
      • DOM 事件 (L2、L3)
      • DOM L2 HTML
      • DOM L2 樣式
      • DOM L2 周遊與範圍
    • 全新的空白字元處理行為
  • ECMAScript 增強功能
  • 加入了 HTML5 支援
    • 地理位置
    • videoaudio 元素
    • canvas 元素
    • Selection 介面
    • 改良的 HTML 元素剖析
    • 文字選擇項目 API
  • 可支援影像上的 ICC v2 與 v4 色彩設定檔
  • 可針對 msMatchesSelector 方法提供全新的選擇器 API 層級 2 支援
  • SVG 功能
    • 基本形狀:矩形、圓形、橢圓形、線條、聚合線條與多邊形
    • 剪輯、遮罩與組合
    • 協調系統、轉換與單位
    • 文件結構、中繼資料與擴充功能
    • 漸層與圖樣
    • 互動性
    • 連結與檢視
    • 繪製與色彩
    • 路徑,包括 path 元素與 d 屬性的完整功能
    • 文字
  • 其他的平台版本資訊功能
    • 固定的網站
    • 全新的文件模式
    • 全新的使用者代理 (UA) 字串
  • 開發者工具的新增項目
    • 效能提升
    • [主控台] 索引標籤
    • [網路] 索引標籤
    • UA 切換器工具
    • 測量實際效能

透過標準支援來提供改良的交互操作能力

重要:Internet Explorer 9 所支援的大多數新標準都只會在瀏覽器處於 Internet Explorer 9 標準模式 (「IE9 模式」) 的情況下提供。最好的方式是使用標準 !DOCTYPE 指令,而不要使用 X-UA 相容的 meta 標籤或 HTTP 標題。叫用 IE9 模式的 !DOCTYPE 如下:

<!DOCTYPE html>

您當然也可以使用 !DOCTYPE 和 X-UA 相容的 meta 標籤或 HTTP 標題,在適合的情況下變更預設值。

若要查看目前的文件模式為何,請按 F12 以開啟 Internet Explorer 開發者工具,並檢視功能表列的右側。若要覆寫文件模式,請在 [文件模式] 功能表上按一下 [Internet Explorer 9 標準]。

如需了解有關 Internet Explorer 9 中文件模式行為的更新,請參閱本指南中的平台版本資訊一節。

階層式樣式表,層級 3 (CSS3)

與先前任何 Microsoft 瀏覽器相較之下,Internet Explorer 9 針對階層式樣式表 (CSS) 提供了更多的支援。Internet Explorer 9 不僅延續了 Internet Explorer 8 中完成的任務 (當時,Internet Explorer 可與 CSS2.1 規格完整相容),更新增了 CSS3 中眾多元件的相關支援。

注意:請務必記住,許多 CSS3 模組仍處於「進行中草稿」(Working Draft) 或「最後呼叫」(Last Call) 階段。這些模組在進入「候選推薦」(Candidate Recommendation) 階段前,仍有可能會大幅變更。如需詳細資訊,請參閱 最新的 CSS3 草稿模組 (英文)。

CSS3 2D 轉換

Internet Explorer 9 加入了 CSS3 2D 轉換 (英文) 的支援。CSS 2D 轉換可在二維空間中轉換 CSS 運算的元素。

Internet Explorer 9 支援下列 2D 轉換屬性:

  • -ms-transform 屬性可將一個或多個二維轉換函數套用至元素。
  • -ms-transform-origin 屬性會建立元素的轉換來源。此屬性可用來變更預設來源 (中心)。

注意:由於 CSS 2D 轉換模組尚未收到來自 W3C 的「候選推薦」狀態,因此 transformtransform-origin 屬性均必須搭配 -ms- 首碼使用,以便讓 Internet Explorer 9 識別。如需廠商特有之首碼的詳細資訊,請參閱 IE 小組部落格上的 IE9、廠商首碼和開發者 (英文)。

Internet Explorer 9 支援搭配 -ms-transform 屬性使用的下列轉換函數:

  • matrix(a,b,c,d,e,f) 函數會以由 6 個值 (af) 組成的轉換矩陣形式,指定 2D 轉換。
  • translate(tx,[ty]) 函數會以向量 [tx,ty] 指定 2D 轉譯,其中 tx 是第一個轉譯值參數,而 ty 是選擇性的第二個轉譯值參數。如果不指定 ty,其值為零。(轉譯值參數可以是百分比或長度)。
  • translateX(tx) 函數會根據 x 方向的指定數量指定轉譯。
  • translateY(ty) 函數會根據 y 方向的指定數量指定轉譯。
  • scale(sx,[sy]) 函數會根據兩個參數描述的 [sx,sy] 可縮放向量,指定 2D 縮放操作。如果第二個參數未提供,系統會取與第一個參數相同的值。
  • scaleX(sx) 函數會使用 [sx,1] 可縮放向量指定縮放操作,其中 sx 是指定的參數。
  • scaleY(sy) 函數會使用 [1,sy] 可縮放向量指定縮放操作,其中 sy 是指定的參數。
  • rotate(angle) 函數會根據 transform-origin 屬性定義的元素來源相關參數所指定的角度,指定 2D 旋轉。
  • skewX(ax) 函數會根據指定的角度,沿著 x 軸指定扭曲轉換。
  • skewY(ay) 函數會根據指定的角度,沿著 y 軸指定扭曲轉換。
  • skew(ax,[ay]) 函數會沿著 xy 軸,指定扭曲轉換。第一個角度參數會指定 x 軸上的扭曲。第二個角度參數會指定 y 軸上的扭曲。如果第二個參數未提供,y 角度套用的值為零 (亦即 y 軸無扭曲)。

-ms-transform-origin 屬性可接受一個或兩個值。每一個值都可以是關鍵字、長度或百分比。如果 -ms-transform-origin 屬性未設定,轉換會從中心開始 (等於將 -ms-transform-origin 值設為 50% 50%)。

  • 第一個值代表水平位置 (沿著 x 軸的位置),可以是負值。而且,此值可以是長度值 ( 支援的任何長度單位之一)、百分比 (全框長度) 或下列三個關鍵字之一:left (等於 0% 或零長度)、center (等於 50% 或半框長度) 或 right (等於 100% 或全框長度)。
  • 第二個值代表垂直位置 (沿著 y 軸的位置),可以是負值。而且,此值可以是長度值 ( 支援的任何長度單位之一)、百分比 (全框高度) 或下列三個關鍵字之一:top (等於 0% 或零高度)、center (等於 50% 或半框高度) 或 bottom (等於 100% 或全框高度)。

如果只有一個指定值,第二個值就會預設為 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

CSS3 背景與框線模組

Internet Explorer 9 已針對 CSS3 背景與框線模組 (英文) 的眾多功能新增支援。 border-radius 屬性不僅是最令人矚目的新功能,也是各方要求聲浪中呼聲最高的 CSS 框線功能。此外,Internet Explorer 9 也引進了下列全新 CSS3 屬性:

Internet Explorer 9 同時也為下列現有 CSS 背景與框線屬性新增了以下功能:

border-radius 屬性

border-radius 屬性可讓您透過實際使用四分之一橢圓形來「取代」硬角,並指定每個橢圓形的半徑,讓框線的角落具有曲線。這些屬性的組成項目如下:

舉例來說,請看看下列標記:

border-radius: 100px 66.66px 200px 50px;
border:
10px blue double;
padding: 24px;
width: 400px;height: 125px;

套用至文字區塊時,呈現的結果會如下所示。

CSS3 色彩模組

Internet Explorer 9 已針對 CSS3 色彩模組新增支援。此模組包含了 RGBA、HSL 與 HSLA 色彩模型的支援以及 currentColor 關鍵字所提供的支援。Internet Explorer 9 也同時擴充了針對transparent 關鍵字所提供的支援。

RGBA 色彩模型

RGB 色彩模型已進行擴充,以包含 Alpha 色頻或透明度。RGBA 值的格式為 rgba (redgreenbluealpha)redgreenblue 元件與 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 值卻不支援。

HSL 色彩模型

Internet Explorer 9 可支援 CSS3 色彩模組的「色調-飽和度-亮度」(HSL) 色彩值。在 HSL 色彩模型中,「色調」是由所指定色彩在色彩轉輪上的角度所定義 (例如,紅色為 0 或 360、綠色為 120、藍色為 240)。「飽和度」與「亮度」則會以百分比表示。舉例來說,下列 CSS 宣告會定義紅色背景。

background-color: hsl(0,100%,50%);
HSLA 色彩模型

Internet Explorer 9 也擴充了 HSL 色彩模型,在當中加入了 Alpha 色頻。如同 RGBA 模型一樣,Alpha 色頻會以介於 0.0 與 1.0 之間的值表示。例如,下列 CSS 宣告會定義透明度為 50% 的紅色背景。

background-color: hsla(0,100%,50%,0.5);
opacity 屬性

Internet Explorer 9 新增了 CSS3 色彩模組的 opacity 屬性,該屬性可用來控制元素層級的透明度。如同 RGBA 值的 Alpha 元件一樣,opacity 值也是介於 0.0 (完全透明) 與 1.0 (完全不透明) 之間的數字。所有元素都會提供 opacity 屬性。

下列範例顯示了海軍藍色的 opacity 屬性,其不透明值會從 0 到 1、以 0.2 的間隔遞增顯示。

<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 產生下列輸出結果。

色彩關鍵字

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 屬性的任何屬性使用。

CSS3 字型模組

提供更為出色的排版控制,是每個新版 CSS 皆具備的共同功能。此時若缺少可交互操作的網頁字型格式,往往會令人感到沮喪。Internet Explorer 9 增強了針對 CSS 字型專屬的現有支援,以便提供 CSS3 字型模組 (英文) 相容性。此外,這當中也加入了網頁開放字型格式 (WOFF) 與原始 TrueType 字型的相關支援。

Font 屬性

font-weight 屬性已更新,這樣一來,Internet Explorer 9 就能依照 CSS3 字型模組中的指定來計算字型粗細。

font-size 屬性已更新,以便讓每個關鍵字的縮放係數都能如 CSS3 字型模組所定義。此外,關鍵字與 HTML 標題大小現在都已依照 CSS3 字型模組中的指定進行對應。

font-stretch 屬性為 Internet Explorer 9 中的新增項目,會從字型系列中選取一般、緊縮或加寬字體。此屬性也會以 @font-face 規則描述元的方式提供。

@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 的目的在於最大化網頁字型選擇。為了達成這個目標,我們已完成下列任務:

  • 確保向下相容性,並持續針對 內嵌 OpenType (EOT) 提供支援
  • 加入網頁開放字型格式 (WOFF) 的相關支援,此格式會透過使用 ZIP 壓縮格式來個別壓縮每個表格,重新包裝以 sfnt 為基礎的字型檔 (TrueType、OpenType 與開放字型格式字型)
  • 加入可安裝 (未設定內嵌權限位元) 原始 TrueType 字型的相關支援

若要檢視 Internet Explorer 9 中網頁字型的範例,請參閱 Internet Explorer Test Drive 上的 網頁字型 更多網頁字型示範 (英文)。

如需 Internet Explorer 9 中 CSS3 字型的詳細資訊,請參閱 MSDN

CSS3 媒體查詢模組

CSS3 媒體查詢模組 (英文) 會指定可供網頁開發者將樣式表範圍設為一組精確裝置功能的方法。例如,您可能想要讓使用者透過行動裝置 (其特色包括螢幕非常小、僅具備有限的調色盤且解析度低等) 瀏覽、透過筆記型電腦 (其特色包括螢幕較小、具備完整的調色盤以及解析度高等) 瀏覽以及透過標準電腦 (其特色為螢幕較大、具有完整的調色盤以及解析度高等) 瀏覽的網頁使用不同設計。CSS3 媒體查詢所支援的完整媒體屬性清單包含了寬度、高度、裝置寬度、裝置高度、方向、外觀比例、裝置外觀比例、色彩、色彩索引、單色與解析度。

下列宣告為典型的媒體查詢 (使用 @media 規則)。

@media screen and (max-width:400px) {div {border:none;}}

在這個案例中,screen 表示目標媒體類型,而max-width 則是目標媒體屬性。此宣告指出指定的規則 (在div 元素沒有框線) 只套用在網頁顯示於寬度最大為 400 像素的螢幕上時。您可以一同使用媒體屬性來建立更多特定的查詢,如以下範例所示。

@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 (英文)。

CSS3 命名空間模組

Internet Explorer 9 支援許多 CSS3 命名空間模組 (英文)。CSS 命名空間可讓開發者宣告 CSS 檔的預設命名空間。這表示,根據預設,任何元素或屬性選擇器也會使用該命名空間。

CSS 命名空間也可以讓開發者建立命名空間首碼,往後就能在 CSS 檔案中使用該命名空間首碼。Internet Explorer 9 更進一步讓開發者能夠宣告以 SVG 元素為目標的命名空間。

@namespace 位於規則

@namespace 位於規則會宣告 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 元素會標示為紅色。接著,任何 p 元素只要位於 prfx 命名空間中,就會重新標示為藍色,而 p 元素若位於 msft 命名空間中則會重新標示為綠色。

下列範例設定了 SVG 的元素的樣式。

@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}

使用來自此範例的命名空間與宣告,所有透過 SVG 建立的圓形都將具備紅色填滿。

如需詳細資訊,請參閱 MSDN 上的 @namespace 規則參考頁面 (英文)。

CSS3 值與單位模組

Internet Explorer 9 已針對 CSS3 值與單位模組 (英文) 中所描述的許多新的值與單位新增支援。這些新的值與單位中多為支援此文件中所描述之其他 CSS3 功能的必要項目。

Internet Explorer 9 已針對下列新的值與單位提供支援:

  • deg:角度 (角度單位)
  • grad:百分度 (角度單位)
  • rad:弧度 (角度單位)
  • turn:彎度 (角度單位)
  • ms:毫秒 (時間單位)
  • s:秒 (時間單位)
  • rem:根元素的字型大小 (相對長度單位)
  • vw:檢視區寬度 (相對長度單位)
  • vh:檢視區高度 (相對長度單位)
  • vm:檢視區寬度或高度的較小者 (相對長度單位)
  • ch:寬度零 (呈現字型中零字符的寬度;相對長度單位)

此外,Internet Explorer 9 也更新了用來產生內容的 attr() 函數。現在,該函數可以套用至任何屬性,並接受多個引數。

下列 CSS3 函數為 Internet Explorer 9 中的新項目:

  • calc():使用數學運算子計算值,可用於所有允許長度值的情況下

如需 CSS 函數的詳細資訊,請參閱 MSDN 上的 CSS 值與單位參考 (英文)。

CSS3 選擇器

Internet Explorer 9 支援 CSS 選擇器語法 ( CSS3 選擇器提出的建議 (英文) 中所指定) 的新增項目。此處列出的選擇器為 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
target 虛擬類別

target 虛擬類別會選擇參照 URI 的目標元素。網頁中的位置會使用片段識別項進行識別,而該片段識別項是由緊接著錨定識別項的數字符號所組成,例如:http://www.example.com/mypage.html#section_3。

下列範例會選擇 important 類別的 div 元素,此元素為參照 URI 的目標元素。如果文件的 URI 沒有片段識別項,就不會有目標元素。

div.important:target
表示虛擬類別的 UI 元素

表示虛擬類別的 UI 元素會用來選擇處於特定狀態 (已啟用、已停用或已選取 (已核取)) 的 UI 元素 (形式控制項,例如選擇鈕或核取方塊)。

下列範例會選擇已啟用的 E 形式控制項元素。

E:enabled

下列範例會選擇已停用的 E 形式控制項元素。

E:disabled 

下列範例會選擇已選取的 E 形式控制項元素。

E:checked 

: indeterminate 虛擬類別會選擇無法判斷其切換狀態 (項目並非已核取 (已選取) 或未選取 (已清除)) 的選擇鈕與核取方塊。下列範例會選擇無法判斷其狀態的 E 形式控制項元素。

E:indeterminate

注意:indeterminate 虛擬類別已不再是由目前的 CSS3 規格所定義,但在許多熱門的瀏覽器中都可獲得支援。

否定虛擬類別

否定虛擬類別會使用簡單的選擇器做為引數,以選擇該引數「沒有」選擇的元素。下列範例會選擇與簡單選擇器 s 不相符的 E 元素:

E:not(s)
UI 元素片段虛擬元素

UI 元素片段虛擬元素 ::selection 會用來選擇網頁中使用者已反白的任何部分,包括位於可編輯文字欄位中的文字。此虛擬元素可套用至 color (英文) 與 background-color (英文) 屬性。下列範例會選擇使用者已在 E 元素中選擇的任何文字。

E::selection 

注意:selection 虛擬元素已不再是由目前的 CSS3 規格所定義,但在許多熱門的瀏覽器中都可獲得支援。

其他 CSS 功能

Internet Explorer 9 中已實作針對 CSS 物件模式 (OM) 檢視模組進行中草稿所提供的部分支援。

CSSOM 檢視模組

CSSOM 檢視模組 (英文) 會定義可讓網頁開發者檢查並以程式設計方式變更文件及其內容之視覺屬性 (包括格式設定方塊的定位、檢視區寬度與元素捲動) 的 API。Internet Explorer 8 已引進針對此模組所提供的部分支援。Internet Explorer 9 則進一步擴充了 CSSOM 檢視 API 的相關支援:

資料 URI

資料 URI (英文) 可用來在網頁內容中直接內嵌資料。最常見的範例為內嵌在網頁中的小型影像,例如:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

置放於 img 元素的 src 屬性中時,這段文字會將影像有效地內嵌在網頁標記中。Internet Explorer 8 將資料 URI 的應用導入至 Internet Explorer。

在 Internet Explorer 9 中,現在開發者可以將資料 URI 使用在 script 元素的 src 屬性中。此外,資料 URI 的大小限制也已從 Internet Explorer 8 中的 32 KB 提升至 Internet Explorer 9 中的 4 GB。

文件物件模型 (DOM) 的改良

Internet Explorer 9 運用了顯著改良的文件物件模型 (DOM)。除了更多的全球資訊網協會 (W3C) DOM 層級 2 (L2) 與 L3 支援之外,Internet Explorer 9 也提供了增強的 DOM 以及改良的空白字元處理。

引進增強的 DOM

Internet Explorer 9 中增強的 DOM 不僅加快了全新 JavaScript 引擎「Chakra」與 Trident 格式設定引擎之間的指令碼執行層速度,更將 DOM 的進入點移至 Chakra 引擎,進而提升了 Internet Explorer 9 標準模式 (IE9 模式) 的整體效能。如需 IE9 模式的詳細資訊,請參閱本文件中的透過標準支援來提供改良的交互操作能力。增強的 DOM 也同時提供了如 W3C DOM L2 與 L3 規格所指定的正確 DOM 繼承物件階層。

現在,只要在 Internet Explorer 9 標準模式中執行網頁,增強的 DOM 物件類型就會反映在 F12 開發者工具中 (如需有關 Internet Explorer 9 中全新 F12 開發者工具的詳細資訊,請參閱本文件中的 F12 開發者工具)。IE9 模式網頁不會顯示以 COM 為基礎的舊版類型 (由介面與顯示物件的種類所組成),而是會回報 Chakra 引擎實際使用中的增強 DOM 物件類型名稱,而該引擎已與 W3C DOM L2 和 L3 標準相對應 (例如,NodeListDocumentTypeHTMLBodyElement 等)。

Internet Explorer 9 中增強的 DOM 顯著地提升了 Internet Explorer 9 與其他瀏覽器之間的交互操作狀態。同時也在眾多案例中提供了更高的效能,這項成果主要歸功於 DOM 物件會表示為原生 JavaScript 物件。

增強的 DOM 將全新 JavaScript 引擎「Chakra」所提供的廣大全新功能進一步延伸至由 DOM 所提供的物件與 API,其中包括:

  • 可選取 DOM 物件擴充性 (透過 Object.preventExtensions)
  • DOM API 可變動性 (透過變動 DOM API 屬性描述元或刪除整個屬性)
  • DOM 物件的 JSON 支援
  • 透過繼承取得的原生 JavaScript 物件功能 (hasOwnPropertytoString 等)
  • 透過繼承取得的原生 JavaScript 函數功能 (callapplybind)

這些功能整合了 JavaScript 引擎原生物件與 DOM 之間的程式設計體驗。此外,現在更加入了下列全新的 DOM 功能:

  • W3C DOM 例外:DOM 例外為全新的錯誤物件類型,這些錯誤物件會在 DOM API 失敗時丟出。這些例外的錯誤代碼會與例外本身所定義的常數對應。
  • W3C DOM "const" 屬性 (例如,Node.ELEMENT_NODE):const 屬性為簡單的欄位,可以為許多來自其他 DOM API 的常見數字傳回值提供名稱。例如,由 nodeType DOM API 傳回的數字可以與常數進行對照,以便形成更方便閱讀的程式碼:if (myElement.nodeType == Node.ELEMENT_NODE)

將 XML 剖析與序列化至 DOM,並從 DOM 剖析與序列化 XML

雖然 Internet Explorer 已提供了將 XML 剖析與序列化至 DOM,以及從 DOM 剖析與序列化 XML 的相關支援,卻沒有任何簡單的方式可供指令碼自 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);

文件物件模型 (DOM) 層級 2 與 3

Internet Explorer 9 針對文件物件模型層級 2 (DOM L2) 與層級 3 (DOM L3) 新增了更多支援,並改良了 Internet Explorer 中目前已實作的現有 DOM L2 支援。除此之外,現在也已加入 WebIDL 進行中草稿規格 (英文) 的相關支援。

Internet Explorer 9 引進了針對下列 DOM 功能所提供的支援。

DOM 核心 (L2 與 L3) 與檢視 (L2)

Internet Explorer 9 加入了針對許多全新 DOM L2 核心 (英文) API 所提供的相關支援,包括:

此外,它也為 DOM 命名空間新增了交互操作支援,像是針對 *NS 方法與命名空間相關屬性 (createElementNS、namespaceURIlocalNameprefix 與其他項目) 所提供的支援。Internet Explorer 9 也可支援許多最為常用的 DOM L3 核心 (英文) 方法與屬性:

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

Internet Explorer 9 可完整支援 DOM L2 檢視 (英文) 屬性。

如需詳細資訊,請參閱 MSDN 上的 DOM 核心與檢視 (英文) 參考章節。

DOM 元素周遊

元素周遊 (英文) 規格會定義 ElementTraversal 介面。此介面可透過 DOM 樹狀結構中之元素的指令碼 (例如,HTML、XML 或 SVG 中的元素節點) 進行瀏覽。Internet Explorer 9 引進了針對 ElementTraversal 介面及其五個屬性所提供的支援。

DOM L2 和 L3 事件

DOM 事件規格說明了 DOM 事件系統,此事件系統會啟用事件處理常式的登錄、說明事件在文件樹狀結構中的流程,並且為事件定義內容相關資訊。如需有關事件模型的詳細資訊,請參閱 MSDN 上的 了解事件模型 (英文)。

在 Internet Explorer 9 中建置事件系統的其中一個目的,在於與 W3C 所指定的交互操作系統相呼應。這麼做可讓開發者跳脫 Internet Explorer 專屬的 attachEvent (英文) 模型,進而消除針對不同瀏覽器修改程式碼的需求。

注意:包含 DOM 變動事件是為了完整性,但是該事件在 W3C 標準中已過時。

DOM L2 HTML

Internet Explorer 9 加入了舊版 Internet Explorer 並未提供的 DOM L2 HTML (英文) API 支援,包括 getElementsByClassNamecharacterSet 等 HTML5 API。Internet Explorer 9 也已改良表格中的物件模型,尤其是與用來新增或移除元素相關的 DOM 操作。

getElementsByClassName

getElementsByClassName 方法會傳回其類別屬性與輸入字串相符的所有元素節點。其功能與 getElementsByTagName (英文) 方法的功能相似。

characterSet

characterSet 屬性會傳回目前文件之字元編碼所偏好的名稱 MIME 名稱。

DOM L2 樣式

DOM L2 樣式 (英文) 規格會定義 API,使其透過移除與修改規則來以程式設計方式存取並變更個別元素的樣式以及整個樣式表。舊版的 Internet Explorer 可以使用專屬的方法來完成這些任務;Internet Explorer 9 則加入了在 DOM L2 樣式規格中所定義的標準化 API 支援。此外,現在也針對在 Internet Explorer 中沒有對應項目的標準化 API (例如 getComputedStyle (英文) 方法) 加入了相關支援。請前往 Internet Explorer Test Drive (英文) 網站,即可檢視 getComputedStyle 方法的實際操作範例。

如需詳細資訊,請參閱 MSDN 上的 DOM 樣式 (英文)。

DOM L2 周遊與範圍

DOM L2 周遊與範圍 (英文) 規格的 DOM 範圍 (英文) 部分定義了用來在一組分界點間選擇文件內容的一般方式。分界點是由容器 (包含該點的父系元素) 與位移 (該點位於容器中的位置) 所指定。若結合 HTML5 Selection (英文) 介面,DOM 範圍功能就會啟用以程式設計方式擷取範圍、選擇子系以及刪除選擇項目等功能。

Internet Explorer 9 可支援所有 DOM L2 範圍 API 以及所有 HTML5 選擇項目 API,例如已廣泛使用的 setSelectionRange 方法。

如需詳細資訊,請參閱 MSDN 上的 DOM 範圍 (英文)。

DOM L2 周遊與範圍 (英文) 規格的 DOM 周遊 (英文) 部分為開發者定義了可在文件中根據其需求四處移動並篩選出節點的方式。Internet Explorer 9 可同時支援用來周遊 DOM 的兩種方式 (NodeIteratorTreeWalker),以及用來篩選 W3C 規格中所定義之節點的兩種方式 (whatToShowNodeFilter)。

如需詳細資訊,請參閱 MSDN 上的 DOM 周遊 (英文)。

DOM 空白字元處理

在 Internet Explorer 顯示 DOM 中空白字元的處理方式與其他瀏覽器不同;對於網頁開發者來說,此方面所缺乏的交互操作性向來都是一大阻礙。在舊版中,Internet Explorer 會擴展它遇到的空白字元,且不會將其置放於 DOM 中的文字節點內。在 Internet Explorer 9 中,空白字元會如預期般保留並置放於 DOM 中的文字節點內。此行為與其他主要瀏覽器一致。

ECMAScript 5

除了提升 JavaScript 效能之外,Internet Explorer 9 也開始增強 JavaScript 語言功能。在 2009 年 12 月,ECMA 已核准使用 ECMA-262 第五版 (英文) 做為第三版的後續版本 (第四版從未發行),而在同一年,Microsoft 也在 JavaScript 物件適用的原生 JSON 支援加入至 Internet Explorer 8 (英文) 及 DOM 物件適用的 Accessor 支援加入至 Internet Explorer 8 (英文) 時發表了 ECMAScript 5 (ES5) 支援的相關細節。ES5 進一步突破了 JSON 及 DOM Accessor 支援,標準化 JavaScript 語言的許多重要增強功能。

Internet Explorer 9 中實作了許多重要的 ECMAScript 5 功能,包括:

Internet Explorer 9 也已修正先前於 Internet Explorer 中實作 JavaScript 時發生的幾個問題。如需詳細資訊,請參閱 Internet Explorer 小組部落格 (英文)。若要檢視 ECMAScript 5 支援的實際操作,請前往 Internet Explorer Test Drive (英文) 網站。

HTML5

Internet Explorer 8 中已引進針對 HTML5 進行中草稿規格 (英文) 中之部分功能所提供的支援,包括:

Internet Explorer 9 以 Internet Explorer 8 中完成的 HTML5 相容性成果為基礎,並實作了下列新功能:

注意:請務必記住,如同本文件先前所述,HTML5 規格仍處於「進行中草稿」階段。該規格在進入「候選推薦」階段前,仍有可能會大幅變更。如需詳細資訊,請參閱 最新的 HTML5 進行中草稿 (英文)。

HTML5 地理位置

Internet Explorer 9 新增了地理位置的支援。地理位置 API 可讓 Web 應用程式存取執行 Internet Explorer 之電腦的目前地理位置。然後網頁可以根據位置來量身打造使用者的體驗,例如在地圖上顯示該位置或是顯示當地的最新資訊 (如氣象預報或新聞報導)。位置資料會根據經度和緯度座標傳回。Internet Explorer 9 中的地理位置 API 符合 地理位置 API 規格 (英文) 中所闡述的標準。

若要查看地理位置的實際操作,請參閱 Internet Explorer 9 Test Drive 網站 (英文)。

如需地理位置的詳細資訊,請參閱 MSDN (英文)。

HTML5 video 與 audio 元素

在 Internet Explorer 9 中,目前最廣受期待的兩大 HTML5 功能支援分別是全新的 video (英文) 與 audio (英文) 元素。videoaudio 元素皆已定義於 HTML5 規格的 內嵌內容 (英文) 章節中。

基本上,videoaudio 元素會可用來將視訊與音訊內容內嵌至 HTML 網頁中。網頁開發者也可以針對這兩個元素指定多個屬性。舉例來說,請看看下列標記。

<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 的空間 (widthheight 屬性) 中顯示影像檔 "frame.png" (poster 屬性),並同時載入視訊內容。視訊檔 "video.mp4" (src 屬性) 將會於載入網頁時自動開始播放 (autoplay 屬性),而用來控制視訊的控制項也會顯示 (controls 屬性)。視訊結束時,將會重複播放 (loop 屬性)。如果視訊格式不受支援,將會改為顯示 video 元素內的文字 (「This content appears...」)。video 元素也支援 preload 元素,後者會向瀏覽器進行提示,讓瀏覽器知道網頁開發者認為會產生最佳使用者體驗的效果。

若要檢視 video 元素的實際操作範例,請參閱 Internet Explorer Test Drive 網站的 視訊全貌示範 (英文)。

Internet Explorer 9 也支援具有多個來源,且每個來源都會由子系元素 source 指定的 video 元素。舉例來說,請看看下列標記。

<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 元素相似,但沒有 widthheightposter 等屬性。若要檢視 audio 元素的實際操作範例,請前往 Internet Explorer Test Drive (英文) 網站。

Internet Explorer 9 可支援下列內容格式:

元素名稱支援的格式
視訊

MP4 容器、H.264 視訊、所有設定檔 - AAC 或 MP3 格式的音訊

WebM 視訊 (如果您已安裝 VP8 轉碼器)

audioAAC 或 MP3

如需詳細資訊,請參閱 MSDN 上的 HTML5 視訊與音訊 (英文)。

HTML5 canvas 元素

Internet Explorer 9 中另一個令人期待的全新 HTML5 功能為 canvas 元素,此元素可以搭配畫布 2D API 一起使用。如同 HTML5 規格 (英文) 中所定義,canvas 元素會在與解析度相關的點陣圖畫布上啟用圖形呈現。若要在畫布上進行繪圖,就必須使用「內容」,例如在 W3C 畫布 2D API 規格 (英文) 中所指定的畫布 2D 內容。Internet Explorer 9 引進了 canvas 元素的相關支援,並使用 2D 畫布繪圖 API 做為其內容。(在 Internet Explorer 9 中,畫布 2D 內容是由 CanvasRenderingContext2D (英文) 物件或 ICanvasRenderingContext2D (英文) 介面來表現。)就像 Internet Explorer 9 中的所有圖形一樣,canvas 也使用 Windows 與 GPU 進行硬體加速。

它可以啟用包含三角形、路徑、線條、填滿、弧形、貝茲曲線以及二次方曲線的繪圖案例。此外,Internet Explorer 9 中的 canvas 元素也支援 寬度 高度屬性。(寬度與高度的預設值分別為 300 與 150 像素,而預設色彩則是透明的黑色)。

Canvas 是在網頁上設計圖形的方式。canvas 標籤為「立即模式」(繪圖指令會直接發送至圖形硬體),這個二維的繪圖表面可讓您在不需要另行下載外掛程式的情況下傳遞即時圖形、動畫或互動式遊戲。由於 CanvasRenderingContext2D (英文) 所定義的 API 所致,canvas 會啟用下列繪圖案例:

開發者可以使用 JavaScript 來繪製畫布繪圖的動畫,或製作可回應鍵盤輸入、滑鼠點選或其他任何瀏覽器事件的互動式體驗。例如,位於 Internet Explorer Test Drive 網站上的 這個範例 (英文) 只需透過少數幾行 JavaScript,即可隨機放置閃爍的線條並為其上色。

Internet Explorer 9 中的 canvas 元素可支援寬度與高度屬性。(寬度與高度的預設值分別為 300 與 150 像素,而預設色彩則是透明的黑色)。

Internet Explorer 9 支援下列畫布 2D 內容 API (成員由 CanvasRenderingContext2D (英文) 公開):

如需 Internet Explorer 9 中 HTML5 Canvas 的深入介紹,請參閱 MSDN (英文)。另外,如果想要檢視更多的 canvas 元素示範,請前往 Internet Explorer Test Drive (英文) 網站。如需有關 Internet Explorer 9 中 canvas (英文) 元素的技術資訊,請參閱 MSDN 上的 canvas (英文) 元素參考頁面。

HTML 剖析的功能改良

Internet Explorer 9 中的 HTML 剖析已有所改良,以便更加貼近 HTML5 草稿規格中描述的行為。

剖析 HTML 中的 SVG

Internet Explorer 9 支援直接內嵌在 HTML 中的 SVG。如需有關 SVG 的詳細資訊,請參閱本指南中的可縮放向量圖形 (SVG)

剖析 XHTML

Internet Explorer 9 會將具有 application/xhtml+xml mime 類型的文件剖析為 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>我在這句中使用<mydiv>一般元素</ mydiv>。</p>

Internet Explorer 8 會忽略 mydiv 標籤以及與其相關聯的 CSS 規則。此句子的呈現方式就會如下所示。

Internet Explorer 9 會依預期般剖析 mydiv 標籤,並呈現下列結果。

重疊的標籤

如果您的 HTML 包含了重疊的標籤,Internet Explorer 8 與先前版本將不會在剖析時解決此問題,而這個行為則與 HTML5 草稿規格所指定的內容牴觸。如果您基於指令碼撰寫的緣故,重疊使用了部分元素 (如下圖所示),這麼做可能會導致令人困惑的指令碼錯誤。Internet Explorer 9 會遵循 HTML5 草稿規格的指示,在剖析時解決重疊標籤的問題。

下面簡單範例顯示了將重疊的 ib 標籤間之文字變為紅色的指令碼。

<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 與先前版本中,此標記會導致下列非預期的呈現效果。

在 Internet Explorer 9 中,此標記會如預期般呈現。

將變更剖析至 script 與 style 區塊

Internet Explorer 8 與先前版本不會將 script (英文) 或 style (英文) 區塊中的文字保留給 DOM 中的文字節點。Internet Explorer 9 則會如預期般,將 scriptstyle 區塊中的文字保留給 DOM,以做為文字節點。這樣一來,就能將 DOM 中提供的原始程式碼做為文字節點,以便讓開發者透過指令碼進行操控。

HTML5 選擇項目 API

Internet Explorer 9 加入了針對三個 HTML5 文字選擇項目 API 所提供的支援。 Selection (英文) 物件代表 Range 物件的清單,後者可透過 Internet Explorer 9 中針對 DOM L2 範圍 (英文) 提供的全新支援啟用。如需詳細資訊,請參閱本文件稍早的文件物件模型 (DOM) 的改良

getSelection 方法

getSelection (英文) 方法會傳回視窗的 Selection 物件,代表目前已選取的文字。

selectionStart 屬性

selectionStart (英文) 屬性會取得與目前已選取文字之起點的位移,也可以設定選取項目的起點。

selectionEnd 屬性

selectionEnd (英文) 屬性會取得與目前已選取文字之終點的位移,也可以設定選取項目的終點。

HTML5 語義元素

Internet Explorer 9 改良了對幾個 HTML5 語義元素的支援。這裡的「語義」元素係指使用其標記名稱描述元素內容,但不具備任何特殊行為的元素。語義標記對協助工具特別有用。

Internet Explorer 9 對其語義元素支援進行了下列變更:

  • 如同 HTML5 規格所定義,這些元素現在會繼承自 HTMLElement (英文) 介面,而非 HTMLUnknownElement (英文) 介面。
  • 根據預設,這些元素現在會套用 HTML5 規格所定義的樣式。

目前可識別的語義元素如下:

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • mark

ICC 色彩設定檔

國際色彩聯盟 (ICC) 發佈了用來說明軟體與硬體之色彩屬性的色彩設定檔。

Internet Explorer 9 依照 ICC 規格 (英文) 的定義,引進了針對影像中之 ICC v2 與 v4 色彩設定檔所提供的支援。

選擇器 API 層級 2

選擇器 API 層級 2 規格 (英文) 會定義一組應用程式開發介面 (API),供開發者評估文件物件模型 (DOM) 中的選擇器。

Internet Explorer 8 實作了選擇器 API querySelector (英文) 與 querySelectorAll (英文)。Internet Explorer 9 則加入了 msMatchesSelector 方法的相關支援。

可縮放向量圖形 (SVG)

為可縮放向量圖形 (SVG) 提供支援已成為 Internet Explorer 實作要求中的其中一個常見要求。它同時也是不需透過外掛程式或個別檢視器,即可將高逼真度、可輕鬆縮放之視覺效果 (從小型、簡單到大型、複雜) 加入至網站的絕佳方式。

Microsoft 很榮幸能在 Internet Explorer 9 引進針對基本 SVG 功能組提供的相關支援。Internet Explorer 9 中的 SVG 支援奠基於 SVG 1.1 (第二版) 規格建議 (英文) (桌面瀏覽器專用) 上。以下是已經實作的功能:

  • 多數的 SVG 文件結構、互動性 (指令碼事件) 以及樣式 (插入行且透過 CSS)
  • 眾多簡報元素與其對應屬性以及 DOM 介面,包括:
    • 基本形狀
    • 填滿、筆劃、標記與色彩
    • 漸層與圖樣
    • 路徑
    • 文字

Internet Explorer 9 可支援下列方法,以顯示 SVG 標記:

  • 在 HTML5 中內嵌 SVG 片段,就不需要使用外部物件 (也就是,只要將<svg>標籤包含在您的 HTML 即可)
  • 將 SVG 視為完整的文件類型 (具有 .svg 副檔名)
  • 將 SVG 包含在 XML 或 XHTML 中 (與 HTML5 方法相似,但搭配 XML 或 XHTML 檔案)
  • 將 SVG 視為 CSS 影像
  • SVG 使用 object 元素,如下所示 (請注意 typeheightwidth 屬性):
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • SVG 使用 imgembediframeframe 元素,如下所示:
    <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 中對應結果的螢幕擷取畫面。

矩形:rect 元素
<?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>

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

如需詳細資訊,請參閱 MSDN 上的 rect (英文) 元素參考頁面。

圓形:circle 元素
<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

如需詳細資訊,請參閱 MSDN 上的 circle (英文) 元素參考頁面。

橢圓形:ellipse 元素
<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

如需詳細資訊,請參閱 MSDN 上的 ellipse (英文) 元素參考頁面。

線條:line 元素
<!-- 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"/>

如需詳細資訊,請參閱 MSDN 上的 line (英文) 元素參考頁面。

聚合線條:polyline 元素

在 SVG 中,「聚合線條」的定義為多個連接的線條,且通常會形成「開放」圖形或是缺少一邊或多邊的多邊形或是非凸面的圖形。

<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

如需詳細資訊,請參閱 MSDN 上的 polyline (英文) 元素參考頁面。

多邊形:polygon 元素

多邊形是封閉的圖形。

<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

如需詳細資訊,請參閱 MSDN 上的 polygon (英文) 元素參考頁面。

剪輯、遮罩與組合

Internet Explorer 9 可支援 SVG 1.1 (第二版) 規格的 剪輯、遮罩與組合模組 (英文) 所指定之 SVG 剪輯、剪輯路徑、遮罩與不透明度。(SVG 路徑會於本文件中的路徑一節中探討)。

剪輯

剪輯路徑會剪下或「剪輯」可繪製色彩、圖樣或影像的區域。位於剪輯路徑外之圖形元素的所有部分都無法進行繪製。剪輯路徑是完全不透明的;位於剪輯路徑外的圖形元素部分也會完全隱藏。

在 SVG 中,overflowclip 屬性會建立初始的剪輯路徑或是當中會顯示內容的形狀。根據預設,初始的剪輯路徑會定義為 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 產生的結果將如下所示。

遮罩

「遮罩」與剪輯路徑相似,但採用半透明的形式。遮罩通常會用來將前景物件組合至目前的背景中。

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 產生的結果將如下所示。

協調系統、轉換與單位

Internet Explorer 9 引進了 SVG 1.1 (第二版) 草稿規格的 協調系統、轉換與單位模組 (英文) 所指定之 SVG 協調系統、轉換與單位的相關支援。Internet Explorer 9 所支援的功能包括:

  • 單位與百分比。
  • 對任何元素與 transform 屬性進行自定轉換。
  • viewBoxpreserveAspectRatio 屬性 (包括與 overflow 屬性的互動)。
  • 針對轉換與轉換清單類型提供的支援。

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 的結果將如下所示:

圖樣

圖樣支援是透過 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 中呈現的結果。

互動性

SVG 內容可以是互動式內容,也就是說,該內容可以隨著使用者輸入變更。Internet Explorer 9 可支援 SVG 互動性功能,如同 SVG 1.1 (第二版) 規格的 互動性模組 (英文) 所指示,而支援的內容包括:

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>

載入此程式碼片段時,它將會顯示小型的紅色圓形。

按一下圓形,它就會放大至原先大小的兩倍。

透過 mouseovermouseout 事件也可以達到相同的效果,這兩個事件可以讓圓形隨著將游標移動至其上方與移開等動作來放大與縮小。

...
  <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 介面 (SVGAElementSVGViewElement) 也受到支援。

連結

如同在 HTML 中一樣,a 元素會用來在 SVG 中建立超連結。例如,下列標記會在矩形上方提供超連結。

<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">前往矩形</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,且具有指定的座標。按一下連結 (「前往矩形」這段文字) 時,rect-view 檢視將會出現,並顯示紅色的矩形。

下列標記會定義檢視的另一個連結。

...
<a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">前往圓形</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 載入網頁時,此標記的顯示方式會如下所示。

當您按一下「前往圓形」時,就會叫用 circle-view 檢視,而圓形也會延伸以填滿 viewBox 矩形。這樣一來,該形狀看起來就像橢圓形。

繪製與色彩

繪製與色彩為 SVG 不可或缺的元件。繪製的概念包含了填滿 (純色、漸層、圖樣)、筆觸 (沿著路徑繪製的線條) 與標記符號 (套用至線條片段的結尾,例如箭頭),而且也可以與不透明合併使用。填滿與筆觸可以套用至路徑、文字與形狀。

Internet Explorer 9 引進了 SVG 1.1 (第二版) 規格的 繪製:填滿、筆觸與標示符號模組 (英文) 與 色彩模組 (英文) 所指定之 SVG 繪製與色彩的相關支援,可支援下列項目:

與繪製模組相關聯的 DOM 介面 (SVGPaintSVGMarkerElement) 也會受到支援。

許多 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>

貝茲路徑 (二次元)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

具有弧形的線條
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />

文字

SVG 文件可以包含文字。文字的呈現方式會與 SVG 中的其他圖形元素相同,這也意味著,協調系統轉換、繪製、剪輯與遮罩都可以套用至文字。

Internet Explorer 9 可支援 SVG 1.1 (第二版) 規格的 文字模組 (英文) 所指定的文字呈現。

text (英文) 元素會指定要繪製的字元。由於 SVG 不會自動換行或分行,因此您必須先行換行。若要調整一行文字中的文字屬性 (例如字型、粗細、色彩、字型間距與其他許多項目),則可以使用 SVG 所提供的 tspan (英文) 元素。

Internet Explorer 9 也支援與文字模組相關聯的 DOM 介面。

網頁開發者專用的全新工具

本章節會先說明「固定的網站」,這項功能可用來強化您的網站與使用者之間的連結。接著,本章節將會說明在 Internet Explorer 9 中指定版本的新方式,以協助解決移轉至新版 Internet Explorer 時的相容性顧慮。在這之後,您將能夠了解在 Internet Explorer 8 中首次直接與瀏覽器結合的 Internet Explorer 開發者工具有著哪些改善。

固定的網站

當您利用 固定的網站 (英文) 時,使用者會更沈浸於您的網站中。固定的網站具有網站增強型使用者介面的特點,其中包含放大的捷徑圖示 (favicon),加上 [上一頁] 和 [下一頁] 按鈕,以及可以與全新和整體網站外觀整合的其他介面元素。與 Windows 7 的整合可讓使用者以新的方式體驗使用最新 Windows API 的開發者網站,以建立 網站跳躍清單 縮圖工具列 通知。(只有 Windows 7 工作列才支援固定的網站)。

將網站釘選到工作列

使用者可以執行下列其中一項動作,將網站釘選到工作列:

  • 按一下索引標籤並將其拖曳到工作列,以卸下該索引標籤
  • 從網址列將我的最愛圖示 (favicon) 拖曳到工作列
  • 將 msPinSite 類別 (drag-to-pin 圖像) 的自訂圖像拖曳到工作列

在釘選網站之後,網站就會呈現自訂增強功能,例如,[上一頁] 和 [下一頁] 按鈕會符合網站的色彩配置。網站也可以釘選到 [開始] 功能表。

跳躍清單

跳躍清單是專門針對固定的網站所量身打造的應用程式專屬動作。跳躍清單是以 Windows 7 應用程式的相同功能為根據。網站可以藉由使用跳躍清單工作,將其最常用的命令顯示給使用者。您可以根據網站的功能以及預期使用者執行的主要動作來定義跳躍清單工作,這些工作會提供使用者可以隨時存取的一組靜態連結,即使 Internet Explorer 未在執行中。如需跳躍清單工作的詳細資訊,請參閱 MSDN 上的 如何建立動態跳躍清單 (英文)。

縮圖工具列

縮圖工具列其實就是您網站的遠端控制。當您的游標暫留在固定的網站的工作列按鈕上時,工具列就會顯示在縮圖預覽下方。這個功能對執行視訊或音效播放的網站特別能派上用場,但縮圖工具列有許多潛在用途。縮圖工具列按鈕的控制功能包含控制播放、加入或分享我的最愛、搜尋、變更線上狀態、即時購物、網頁評分。如需建立縮圖工具列的詳細資訊,請參閱 MSDN 上的 如何建立縮圖工具列 (英文)。

通知

就像 Windows 7 中的應用程式一樣,固定的網站可以將通知與狀態傳達給使用者,方法是在固定網站的工作列按鈕上方顯示重疊圖示。當固定網站視窗的檢視被擋住時,重疊圖示有助於將焦點放在網站上,例如,當瀏覽器視窗最小化或是被另一個視窗擋住時。您可以使用重疊圖示來提供重要狀態資訊或通知,例如網路狀態、線上狀態或新的郵件。如需通知的詳細資訊,請參閱 MSDN 上的 如何提供通知 (英文)。

探索固定的網站

Internet Explorer 9 不會通知使用者網站是否能被固定。是由開發者來宣傳這些功能。有很多方式可以讓您的使用者注意到您網頁的固定的網站功能,包括飛入、下拉、橫幅與 div 等效果;drag-to-pin 圖示與圖像;以及在使用者第一次固定網站之後,您可以提供初次執行體驗來宣傳這些功能。如需探索的詳細資訊,請參閱 MSDN 上的 如何改進探索 (英文)。

想知道更多關於固定的網站的操作方法及程式碼範例,請參閱 MSDN 固定的網站開發者中心 (英文)。

如需固定的網站的示範,請參閱 Internet Explorer 9 Test Drive 網站 (英文)。

平台版本資訊

Internet Explorer 8 引進了文件相容性模式,該模式擴充了 Microsoft Internet Explorer 6 所引進的相容性模式。文件模式可讓您選擇 Internet Explorer 用來顯示您網頁的特定呈現模式,相關內容也已在 MSDN 上的 定義文件相容性 (英文) 中詳細說明。

全新的文件模式

Internet Explorer 9 加入了「Internet Explorer 9 標準模式」這個新的文件模式,此模式會提供最為快速的效能、縮放處理新型 Web 應用程式的需求,並實作最新的標準支援。

除非網頁或網頁伺服器另行指定,否則在預設情況下,Internet Explorer 9 會在 IE9 標準模式中執行。

確保 Internet Explorer 9 在最新的文件模式中呈現網頁的最佳方式就是使用標準 !DOCTYPE 指令,而且不要使用 X-UA 相容的 meta 標籤或 HTTP 標題。叫用 IE9 標準模式的 !DOCTYPE 如下。

<!DOCTYPE html>

您當然也可以使用 !DOCTYPE 和 X-UA 相容的 meta 標籤或 HTTP 標題,在適合的情況下變更預設值。

若要查看目前的文件模式為何,請按 F12 以開啟 Internet Explorer F12 開發者工具,並檢視功能表列的右側。若要覆寫文件模式,請在 [文件模式] 功能表上按一下 [Internet Explorer 9 標準]。

使用者代理 (UA) 字串

使用者代理 (UA) 字串會為主機伺服器識別瀏覽器,並提供特定的系統詳細資料 (如需 UA 字串的詳細資訊,請參閱 MSDN 上的 了解使用者代理字串 (英文))。Internet Explorer 9 與舊版 Internet Explorer 的不同之處在於,根據預設,它會傳送簡短的 UA 字串。這項變更增進了整體效能、交互操作性與相容性。Internet Explorer 9 將不再傳送由使用者電腦上已安裝的其他軟體 (例如 .NET 與其他軟體) 附加至 UA 字串的內容。

Internet Explorer 9 會傳送新的 Internet Explorer 9 UA 字串。因此,開發者必須注意針對 Internet Explorer 8 之 UA 字串所做出的四項變更:

  1. 應用程式版本會從 Mozilla/4.0 遞增為 Mozilla/5.0,以便與其他瀏覽器相符。這項變更也顯示了 Internet Explorer 9 為可交互操作的瀏覽器。
  2. 版本權杖會從 MSIE 8.0 遞增為 MSIE 9.0
  3. Trident 權杖會從 Trident/4.0 遞增為 Trident/5.0
  4. Internet Explorer 9 將會傳送下列簡短 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 的使用者代理字串簡介 (英文)。

F12 開發者工具

若要在 Internet Explorer 9 中存取 F12 開發者工具,請按 F12,或在 [工具] 功能表上按一下 [F12 開發者工具]。如果您使用過 Internet Explorer 8 中的開發者工具,應該會馬上注意到功能的增強與效能上的提升。

[主控台] 索引標籤

Internet Explorer 9 中的 F12 開發者工具引進了 [主控台] 索引標籤讓您公開指令碼事件。當您檢查指令碼時,就會出現多個切換按鈕:[錯誤]、[警告] 與 [訊息]。每個按鈕都會顯示各個類型的訊息數量。

[網路] 索引標籤

Internet Explorer 9 在開發者工具中加入了網路檢查工具。只要按一下 [網路] 索引標籤,即可存取此工具。接著,您就可以:

  • 擷取 HTTP 與 HTTPS 網路流量。
  • 顯示 (並儲存) 已擷取知要求與回應的內容。
  • 顯示與已擷取資料相關的額外資訊,例如:Cookie、大小、時間與快取資訊。

使用者代理切換器工具

透過全新的使用者代理 (UA) 切換工具,您可以修改為網路伺服器識別瀏覽器類型與版本的 UA 字串。(如需 Internet Explorer 9 中新 UA 字串的詳細資訊,請參閱本文件中的使用者代理 (UA) 字串)。選取的 UA 字串將會在整個網路中傳送,並做為每個要求的標題。若要變更瀏覽器的 UA 字串,請在開發者工具的 [工具] 功能表中指向 [變更使用者代理字串],接著選取您想要傳送其 UA 字串的瀏覽器。

測量實際效能

現在您可以使用 Internet Explorer 9 中的 F12 開發者工具來測量比舊版 Internet Explorer 更多的網站效能層面。不過,您無法測量使用者實際體驗的效能。為了解決此問題,有些網站會開發專屬的程式庫來嘗試測量網頁的即時效能,但是,這也可能會造成預先配置實際減緩使用者之頁面效能的情況。我們相信 W3C WebTiming 規格 (在本文件撰寫時仍處於「進行中草稿」階段) 是可以用來解決此問題的良好概念基礎。使用 DOM 中的 window.msPerformance 介面,即可在 Internet Explorer 9 中存取 WebTiming 功能。開發者也可以啟用 F12 開發者工具中的指令碼偵錯,然後存取 window.msPerformance 物件。

若要檢視實際使用 window.msPerformance 物件的示範,請參閱 Internet Explorer Test Drive (英文) 網站。

修訂歷程記錄

2010 年 3 月 16 日:針對 Internet Explorer 平台預覽建立文件。

2010 年 4 月 15 日:使用下列資訊進行更新:

  • CSS3 命名空間模組支援
  • 其他 CSS3 選擇器支援
  • 更多 DOM 支援詳細資料
  • 更多 SVG 支援詳細資料,包括內嵌限制
  • ICC 色彩設定檔支援

2010 年 5 月 5 日:加入下列資訊,針對 Internet Explorer 平台預覽組件 2 進行更新:

  • 更多 DOM 支援詳細資料
  • 全新的 DOM 功能:
    • 全新的 DOM 核心 API
    • DOM HTML
    • DOM 周遊
    • 全新的 DOM L3 事件:
      • DOMAttrModified 事件
      • DOMContentLoaded 事件
      • 組合事件
  • 全新的使用者代理 (UA) 字串
  • 資料 URI 變更
  • 開發者工具新增項目:[主控台] 索引標籤與 UA 切換器工具

2010 年 6 月 23 日:加入下列資訊,針對 Internet Explorer 平台預覽組件 3 進行更新:

  • 全新的 CSS3 功能:
    • 全新的背景與框線功能
    • HSL 與 HSLA 色彩模型
    • CSS3 字型支援
    • CSS3 值與單位支援
    • 全新的 display 屬性值
  • 全新的 DOM 元素周遊支援
  • 全新的 HTML5 功能:
    • videoaudiocanvas 元素
    • Selection 介面
  • 全新的選擇器 API 層級 2 支援:
    • matchesSelector 方法
  • 全新的 SVG 功能:
    • 剪輯、遮罩與組合
    • 漸層與圖樣
    • 互動性
    • 連結與檢視
    • 繪製與色彩
    • 文字

2010 年 8 月 4 日:加入下列資訊,針對 Internet Explorer 平台預覽組件 4 進行更新:

  • 最新的 JavaScript 引擎「Chakra」
  • 增強的 DOM 功能
  • 針對 WebIDL 規格提供的全新支援
  • window.msPerformance 物件
  • 使用連往範例的連結來充實 canvas 章節的內容

2010 年 9 月 15 日:加入下列新連結與資訊,針對 Internet Explorer 9 Beta 進行更新:

  • DOMParser 與 XMLSerializer
  • 固定的網站

2010 年 10 月 28 日:加入下列資訊,針對 Internet Explorer 平台預覽組件 6 進行更新:

  • CSS 2D 轉換
  • HTML5 語義元素
  • 固定支援 ICC 色彩設定檔版本號碼

2011 年 2 月 10 日:已使用以下的相關資訊針對 Internet Explorer 9 發行候選版本進行更新:

  • HTML5 地理位置
  • 固定的網站 (已更新)
  • 相容性模式 (已更新)
  • 其他雜項文件修正

2011 年 2 月 18 日:使用下列其他資訊進行更新:

  • 固定的網站
  • HTML5 Canvas

2011 年 3 月 14 日:針對 Internet Explorer 9 (RTW) 進行更新:

  • 更新版本文字
  • ECMAScript 5 (已加入連結)
Microsoft 正展開一份線上問卷調查,了解您對於網站的看法。如果您選擇參加,您離開網站時即會顯示線上問卷調查。

您是否想要參加?