企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比
企業IT管理員IE11升級指南?系列:
【1】—— Internet Explorer 11增強保護模式 (EPM) 介紹
【2】—— Internet Explorer 11 對Adobe Flash的支持
【3】—— IE11 新的GPO設置
【4】—— IE企業模式介紹
【5】—— 不跟蹤(DNT)例外
【6】—— Internet Explorer 11面向IT專業人員的常見問題
【7】—— Win7和Win8.1上的IE11功能對比
【8】—— Win7 IE8和Win7 IE11對比
?
Win7 IE8和Win7 IE11對比
?
Contents
簡介
Internet Explorer 9
全面的瀏覽器性能
引入“Chakra”,全新的 JavaScript 引擎
對相同標記的 Web 標準支持
利用基于 Windows 的 PC 的強大功能實現的新圖形功能
新功能列表
通過標準支持實現互操作性改進
級聯樣式表級別 3 (CSS3)
其他 CSS 功能
數據 URI
文檔對象模型 (DOM) 改進
引入增強的 DOM
在 XML 與 DOM 之間進行分析和序列化
文檔對象模型 (DOM) 級別 2 和 3
DOM 空白處理
ECMAScript 5
HTML5
HTML5 地理位置
HTML5 video 和 audio 元素
HTML5 canvas 元素
HTML 分析改進
HTML5 選擇 API
HTML5 語義元素
ICC 顏色配置文件
選擇器 API 級別 2
可縮放的向量圖形 (SVG)
基本形狀
剪輯、蒙版和合成
坐標系、轉換和單位
文檔結構
漸變和圖案
交互性
鏈接和視圖
繪制和顏色
路徑
文本
面向 Web 開發人員的新工具
固定網站
平臺版本管理
F12 開發人員工具
Internet Explorer 10
兼容性
CSS
高級布局
視覺效果
其他新增功能
文檔對象模型 (DOM)
F12 開發人員工具
HTML5
IndexedDB
JavaScript
SVG
性能
Internet Explorer 11
顯示和方向
全屏 API
編輯
輔助功能改進
剪貼板圖像支持
命令標識符
控件改進
輸入法編輯器 API
F12 工具中的新增功能
從頭開始重建
使用 UI 響應工具加快網頁速度
CSS、HTML 以及 JavaScript 自動完成
屏幕和 GPS 模擬
有意義的內存分析
右鍵單擊以檢查
圖形
畫布增強功能
高 DPI 支持
WebGL
JavaScript
塊范圍的變量
容器對象
國際化 API
__proto__ 屬性
布局
邊框圖像
設備固定的定位
東亞和雙向文本改進
彈性框更新
水平垂直文本支持
網絡和導航
向后導航緩存
網絡優先級設置
預呈現和預提取
隱私和安全
請勿跟蹤 (DNT) 例外
第三方 Cookie 阻止
Web 加密 API
觸控
Datalist 改進
指針事件
視頻
動態 TextTrack 對象
簡單傳遞配置文件 (SDP) 字幕樣式
流 XHR 緩存控制
Windows 集成
固定網站
?
?
簡介
Internet Explorer 11相對于InternetExplorer 8 包含了三個主要版本的功能更新,本文按照不同的版本跟新內容介紹Windows7系統上InternetExplorer 11相對于Internet Explorer 8的主要功能區別。
Internet Explorer 9
Internet Explorer 9 旨在幫助開發人員更好地了解 Internet Explorer 9 在平臺以下方面的進展:
- 全面的瀏覽器性能
- Web 標準支持,用于幫助使相同標記在不同瀏覽器中以相同方式工作
- 利用 Windows PC 強大功能的新圖形功能
全面的瀏覽器性能
瀏覽器性能涉及瀏覽器中許多不同的子系統。不同的網站(以及同一網站中的不同活動)會對瀏覽器產生不同的負載和需求。例如,與新聞聚合網站(如必應資訊或Digg)相比,Web 應用程序(如Windows Live Mail或Microsoft Office Web Apps)以完全不同的方式使用瀏覽器子系統。
引入“Chakra”,全新的 JavaScript引擎
腳本引擎性能只是總體瀏覽器性能狀況的一部分。與 Internet Explorer 7 相比,Internet Explorer 8 中的腳本性能取得了指數級的改進幅度,Internet Explorer 9 中的新 JavaScript 引擎“Chakra”同樣也是如此。Chakra 引擎可并行解釋、編譯和執行代碼,并且能夠利用多個(如果有)CPU 內核的優勢。有關詳細信息,請參閱IE團隊博客上的“ InternetExplorer 9 中的新 JavaScript 引擎”(英文)。
當然,Internet Explorer 團隊正在關注實際網站使用本瀏覽器所有子系統時的性能特征。目標是為實際網站提供更好的全面性能,而不僅僅是基準性能。
對相同標記的Web 標準支持
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 的 PC 的強大功能實現的新圖形功能
Windows 生態系統實現了令人驚嘆的硬件創新。通過 Internet Explorer 9,現在,Web 開發人員可以利用硬件創新進行硬件驅動的圖形和文本呈現。
Internet Explorer 9 使用 DirectX 系列的 Windows 應用程序編程接口 (API),為 Web 開發人員實現了幾方面的改進。通過 Direct2D 和 DirectWrite,所有的圖形和文本呈現功能都由圖形卡而不是 CPU 實現。利用圖形硬件加速,意味著圖片豐富、需要處理大量圖形的網站可以更快地在 Windows 上呈現,同時減少占用 CPU 資源。此外,使用習慣的標準創作網站時,您可以自動利用這些改進。
新功能列表
為方便起見,此列表包含 Internet Explorer 9 中的所有新增開發人員功能。有關 Internet Explorer 9 的預發布內部版本的更改信息,請參閱修訂歷史記錄。
- 增強的 CSS3 支持
- 通過border-radius屬性實現圓角
- CSS3 背景和邊框功能
- opacity屬性
- RGBA、HSL 和 HSLA 顏色模型
- CSS3 字體屬性和新 Web 字體格式
- CSS3 媒體查詢
- CSS3 命名空間
- CSS3 值和單位
- CSS3 選擇器
- 改進的數據 URI 支持
- 文檔對象模型 (DOM) 改進
- 增強的 DOM 功能
- 在 XML 與 DOM 之間進行分析和序列化
- 新的 DOM 級別 2 (L2) 和級別 3 (L3) 支持以及更新的行為
- DOM 核心(L2、L3)和視圖 (L2)
- DOM 元素遍歷
- DOM 事件(L2、L3)
- DOM L2 HTML
- DOM L2 樣式
- DOM L2 遍歷和范圍
- 新的空白處理行為
- ECMAScript 功能增強
- 新增的 HTML5 支持
- 地理位置
- video和audio元素
- 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-Compatible meta標簽或HTTP 標頭。調用 IE9 模式的!DOCTYPE如下所示:
<!DOCTYPEhtml>
當然,您可以使用!DOCTYPE和X-UA-Compatible meta 標簽或 HTTP 標頭來根據需要更改默認設置。
若要確定當前文檔模式,請按 F12 打開 Internet Explorer 開發人員工具,然后查看菜單欄右側。若要覆蓋文檔模式,請在“文檔模式”菜單上單擊“Internet Explorer 9 標準”。
有關Internet Explorer 9 中文檔模式行為的更新,請參閱本指南的平臺版本管理一節。
級聯樣式表級別3 (CSS3)
Internet Explorer 9 對級聯樣式表 (CSS) 提供比以前所有的 Microsoft 瀏覽器都要多的支持。除了保留在 Internet Explorer 8(在該版本中,Internet Explorer 完全符合 CSS2.1 規范)中完成的工作外,Internet Explorer 9 增加了對許多 CSS3 組件的支持。
注意??請務必記住,許多 CSS3 模塊仍處于工作草案或最后討論階段。在這些模塊達到候選建議階段之前,可能會進行重大更改。有關詳細信息,請參閱最新 CSS3 草案模塊(英文)。
CSS3 2D 轉換
Internet Explorer 9 添加了對CSS32D 轉換的支持。通過 CSS 2D 轉換,能夠將由 CSS 呈現的元素轉換為二維空間。
Internet Explorer 9 支持以下2D 轉換屬性:
- -ms-transform?屬性對元素應用一個或多個二維轉換函數。
- -ms-transform-origin屬性為元素建立轉換的起點。此屬性在您需要更改默認起點(中心)時有用。
注意???由于 CSS 2D 轉換模塊尚未從 W3C 接收到“備選推薦項”狀態,使用transform和transform-origin屬性時都必須帶有-ms-前綴,以便可被 Internet Explorer 9 識別。有關特定于供應商的前綴的詳細信息,請參閱“IE 團隊博客”上的“ IE9、供應商前綴和開發人員”(英文)。
Internet Explorer 9 支持以下與-ms-transform 屬性一起使用時所需的轉換函數:
- matrix(a,b,c,d,e,f)?函數以六個值(a到f)的矩陣的形式指定 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)函數指定按有關元素起點的參數中指定的角度進行 2D 旋轉,如transform-origin屬性所定義。
- skewX(ax)函數指定按給定角度沿x軸進行扭曲轉換。
- skewY(ay)函數指定按給定角度沿y軸進行扭曲轉換。
- skew(ax,[ay])函數指定沿x軸和y軸進行扭曲轉換。第一個角度參數指定x軸上的轉換。第二個角度參數指定y軸上的轉換。如果沒有給出第二參數,則使用零作為角度y的值(即,在y軸上沒有扭曲)。
-ms-transform-origin屬性接受一個或兩個值。每個值都可以是關鍵字、長度或百分比。如果不設置-ms-transform-origin屬性,則轉換在中心開始(相當于 50% 50% 的-ms-transform-origin值)。
- 第一個值表明水平位置(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 屬性的支持:
- background-clip
- background-origin
- background-size
- box-shadow
Internet Explorer 9 還向以下現有 CSS 背景和邊框屬性增加了功能:
- background-color:支持CSS3 顏色。
- background-image:支持多個值和 SVG 圖像。
- background-repeat:支持多個值,以及空間和圓角值。
- background-attachment:支持多個值,以及local值。
- background-position:支持多個值。
- background:針對 CSS3 進行了更新。
- border-color:支持 CSS3 顏色。
border-radius屬性
使用border-radius屬性可以使邊框角彎曲,方法實質上是將硬角“替換”為四分之一橢圓并指定每個橢圓的半徑。這類屬性包括:
- border-radius(給定的值指定框的所有四個角的半徑。)
- border-bottom-left-radius
- border-bottom-right-radius
- border-top-left-radius
- border-top-right-radius
例如,看看下面的標記:
border-radius:100px66.66px 200px 50px;
border:10px blue double;
padding: 24px;
width:400px;height:125px;
應用于文本塊時,效果如下。
CSS3 顏色模塊
Internet Explorer 9 增加了對CSS3 顏色模塊的支持。此模塊提供對RGBA、HSL 和 HSLA顏色模型的支持;提供 opacity 屬性;提供對currentColor關鍵字的支持。Internet Explorer 9 還擴展了對transparent關鍵字的支持。
RGBA顏色模型
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 值并不支持。
HSL顏色模型
Internet Explorer 9 支持 CSS3 顏色模型的色調-飽和度-亮度 (HSL) 顏色值。在 HSL 顏色模型中,“色調”定義為指示顏色在顏色盤上的角度(例如,紅色為 0 或 360,綠色為 120,藍色為 240)。“飽和度”和“亮度”以百分比的形式表示。例如,下面的 CSS 聲明定義紅色背景。
background-color:hsl(0,100%,50%);
HSLA顏色模型
Internet Explorer 9 還使用alpha 通道擴展了 HSL 顏色模型。與 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.2 的增量從 0 遞增到 1。
<divclass="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 版本都具備更好的排版控制功能。與此同時,缺乏可互操作的 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-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;
?}
Web字體格式
Microsoft 開發的 Internet Explorer 9 可以提供盡量多的 Web 字體供您選擇。為此,我們完成了以下工作:
- 通過繼續支持嵌入式OpenType (EOT)確保向后兼容
- 增加了對 Web 開放字體格式 (WOFF) 的支持,該格式通過使用 ZIP 壓縮格式分別壓縮每個表,重新打包基于 sfnt 的字體文件(TrueType、OpenType 和開放字體格式字體)
- 增加了對可安裝(未設置嵌入權限位)原始 TrueType 字體的支持
若要查看 Internet Explorer 9 中的 Web 字體的示例,請參閱InternetExplorer Test Drive上的“ Web字體”(英文)或“更多 Web 字體”(英文)演示。
有關Internet Explorer 9 中的 CSS3 字體的詳細信息,請參閱MSDN。
CSS3 媒體查詢模塊
CSS3 媒體查詢模塊指定一些方法,供 Web 開發人員將樣式表的范圍限定為一組精確的設備功能。例如,對于在移動設備(具有非常小的屏幕、有限調色板、低分辨率等)、上網本(具有小屏幕、完整調色板、高分辨率等)和標準計算機(具有大屏幕、完整調色板、高分辨率等)上進行瀏覽的用戶,您可能需要以不同方式為這些用戶設計頁面。CSS3 媒體查詢支持的媒體屬性的完整列表包括寬度、高度、設備寬度、設備高度、方向、縱橫比、設備縱橫比、顏色、顏色索引、單色和分辨率。
下面的聲明是典型的媒體查詢(使用 @media 規則)。
@media screenand (max-width:400px) {div {border:none;}}
在本例中,screen指示目標媒體類型,max-width是目標媒體屬性。該聲明指示,僅當在寬度最多為 400 像素的屏幕上顯示頁面時,才應用指定規則(在div元素上無邊框)。您可以組合使用媒體屬性,以創建更為具體的查詢,如下所示。
@media screen and (max-width:400px) and (max-height:600px) {…}
當媒體為寬度不超過 400 像素且高度不超過 600 像素的屏幕時,此聲明應用指定規則。
請在InternetExplorer 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 元素的命名空間。
@namespaceat 規則
@namespaceat 規則聲明一個 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(英文)規則參考頁。
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 支持對CSS3 選擇器提案建議中指定的CSS 選擇器語法進行補充。此處列出的是 Internet Explorer 9 中新增的選擇器。(有關 Internet Explorer 中的選擇器支持的完整詳細信息,請參閱 MSDN 上的CSS兼容性和Internet Explorer(英文)。)
有關詳細信息,請參閱 MSDN 上的CSS 選擇器(英文)參考部分。
若要查看提供的 CSS3 選擇器示例,請轉到InternetExplorer 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 元素狀態偽類用于選擇處于特定狀態(已啟用、已禁用或已選擇(選中))的 UI 元素(窗體控件,如單選按鈕或復選框)。
下面的代碼選擇已啟用的E窗體控件元素。
E:enabled
下面的代碼選擇已禁用的E窗體控件元素。
E:disabled?
下面的代碼選擇已選擇的E窗體控件元素。
E:checked?
:indeterminate偽類選擇無法確定其切換狀態(既不是已選中(已選擇),也不是未選中(未選擇))的單選按鈕和復選框。下面的代碼選擇無法確定其狀態的E窗體控件元素。
E:indeterminate
注意???當前 CSS3 規范中不再定義:indeterminate偽類,但是許多常用瀏覽器仍支持該偽類。
求反偽類
求反偽類采用簡單選擇器作為參數,選擇未被該參數選擇的元素。下面的代碼選擇與簡單選擇器s不匹配的E元素:
E:not(s)
UI元素段偽元素
UI 元素段偽元素::selection用于選擇用戶突出顯示的任何頁面部分,包括可編輯文本字段中的文本。此偽元素可以應用于color和background-color屬性。下面的代碼選擇E元素中的任何用戶選定文本。
E::selection?
注意???當前 CSS3 規范中不再定義::selection偽元素,但是許多常用瀏覽器仍支持該偽元素。
其他 CSS 功能
Internet Explorer 9 實現了對CSS 對象模型 (OM) 視圖模塊工作草案的一些支持。
CSSOM 視圖模塊
CSSOM 視圖模塊定義了一些API,Web開發人員使用這些 API 可以進行檢查,也可以以編程方式更改文檔及其內容的視覺屬性,包括布局框定位、視區寬度和元素滾動。Internet Explorer 8 對此模塊的一部分提供支持。Internet Explorer 9 擴展了對更多 CSSOM 視圖 API 的支持:
- ClientRect ( TextRectangle) 接口
- width屬性
- height屬性
- Range接口的增加
- getBoundingClientRect方法
- getClientRects方法
- Screen接口
- pixelDepth屬性
- Screenview接口
- innerWidth屬性
- innerHeight屬性
- pageXOffset屬性
- pageYOffset屬性
- screenX屬性
- screenY屬性
- outerWidth屬性
- outerHeight屬性
數據 URI
數據 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。
文檔對象模型(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 標準模式運行頁面時,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 中,包括:
- 選擇性 DOM 對象擴展性(通過Object.preventExtensions)
- DOM API 可變性(通過更改 DOM API 的屬性描述符或完全刪除屬性)
- DOM 對象的 JSON 支持
- 通過繼承實現本機 JavaScript 對象功能(hasOwnProperty、toString等)
- 通過繼承實現本機 JavaScript 函數功能(call、apply、bind)
這些功能統一了 JavaScript 引擎的本機對象與 DOM 之間的編程體驗。此外還新增加了以下 DOM 功能:
- W3C DOM 異常:DOM 異常是由于 DOM API 故障而引發的新類型錯誤對象。這些異常的錯誤代碼會映射到異常本身上定義的常量。
- W3C DOM“常量”屬性(例如,Node.ELEMENT_NODE):常量屬性是簡單字段,用于為許多其他 DOM API 的數字返回值提供名稱。例如,可以將nodeType DOM API 返回的數字與常量進行比較,用于創建可讀性更高的代碼:if (myElement.nodeType == Node.ELEMENT_NODE)
在XML 與 DOM 之間進行分析和序列化
盡管Internet Explorer 已支持在 XML 與本機 DOM 之間進行分析和序列化,腳本仍然無法方便地從 HTML 文檔內部訪問此功能。因此,Internet Explorer 9 增加了對DOMParser和XMLSerializer接口的支持。這些接口受到其他常用瀏覽器的廣泛支持。
下面的腳本示例演示如何使用DOMParser接口將字符串分析為 XML 文檔:
varparser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>","text/xml");
下面的腳本示例演示使用XMLSerializer接口,將 DOM 節點(包括 HTML 文檔中的節點)序列化為 XML 字符串:
varserializer = 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 增加了對許多新DOML2 核心API 的支持,包括:
- documentType
- ProcessingInstruction
- createDocument
還增加了對 DOM 命名空間的可互操作支持,如對*NS方法和命名空間相關屬性(createElementNS、namespaceURI、localName、prefix等等)的支持。Internet Explorer 9 還支持許多最常用的DOML3 核心方法和屬性:
- adoptNode
- compareDocumentPosition
- CDATASection
- importNode
- inputEncoding
- isDefaultNamespace
- isEqualNode
- isSameNode
- isSupported
- lookupNamespaceURI
- lookupPrefix
- replaceWholeText
- textContent
- xmlEncoding
- xmlStandalone
- xmlVersion
- wholeText
Internet Explorer 9 完全支持DOML2 視圖屬性。
有關詳細信息,請參閱 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 L2和L3事件
- 事件注冊和調度 API(addEventListener、removeEventListener、createEvent和dispatchEvent)
- 事件捕獲、冒泡和目標階段
- 新事件對象(KeyboardEvent、MouseEvent、MutationEvent等);CustomEvent(用于特定于應用程序的事件);以及來自其他標準的事件類型的事件對象接口(如DragEvent)
- 新的基于標準的事件類型(復合事件、文本事件、輪子事件、DOM 變異事件,等等),來自 HTML5
注意???包含 DOM 變異事件是考慮到完整性,但在 W3C 標準中將其棄用。
DOM L2 HTML
Internet Explorer 9 增加了對DOML2 HTML API(在以前版本的 Internet Explorer 中不可用)的支持,包括 HTML5 API(如getElementsByClassName和characterSet)。Internet Explorer 9 改進了表中的對象模型,特別是在用于添加或刪除元素的 DOM 操作方面。
getElementsByClassName
getElementsByClassName方法返回具有與輸入字符串匹配的類特性的所有元素節點。其功能與getElementsByTagName方法的功能類似。
characterSet
characterSet特性返回當前文檔的字符編碼的首選 MIME 名稱。
DOM L2 樣式
DOM L2 樣式規范定義了一些 API,用于通過刪除或修改規則,以編程方式訪問和更改各個元素和整個樣式表的樣式。以前版本的 Internet Explorer 能夠使用專有方法完成這些任務;Internet Explorer?9 增加了對 DOM L2 樣式規范中定義的標準化 API 的支持。此外,還增加了對標準化 API(在 Internet Explorer 中沒有等效項,如getComputedStyle方法)的支持。請參閱InternetExplorer 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 支持 W3C 規范中定義的兩種 DOM 遍歷方法(NodeIterator和TreeWalker)以及兩種節點篩選方法(whatToShow和NodeFilter)。
有關詳細信息,請參閱 MSDN 上的DOM遍歷(英文)。
DOM 空白處理
對于在 DOM 中公開空白,Internet Explorer 中的處理方式與其他瀏覽器中的處理方式不同;這一領域中缺乏互操作性使 Web 開發人員倍感不便。在以前版本中,Internet Explorer 會折疊所遇到的空白,不會將其放置到 DOM 中的文本節點中。在 Internet Explorer 9 中,會按預期方式保留空白并將其放置到 DOM 中的文本節點中。此行為與其他主要瀏覽器一致。
ECMAScript 5
除了改進 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 功能,包括:
- 新數組方法:every、filter、forEach、indexOf、isArray、lastIndexOf、map、reduce、reduceRight、some
- 增強的對象模型和對象函數:Object.create、Object.defineProperties、Object.defineProperty、Object.freeze、Object.getOwnPropertyDescriptor、Object.getOwnPropertyNames、Object.getPrototypeOf、Object.isExtensible、Object.isFrozen、Object.isSealed、Object.keys、Object.preventExtensions、Object.seal
- 其他計算方法和函數:Date.now、針對 ISO 日期格式的 Date.parse 支持、Date.toISOString、函數綁定、字符串裁剪
Internet Explorer 9 還更正了以前的 Internet Explorer 中的 JavaScript 實現中存在的幾個問題。有關詳細信息,請參閱Internet Explorer 團隊博客(英文)。若要查看提供的 ECMAScript 5 支持,請轉到InternetExplorer Test Drive(英文)網站。
HTML5
Internet Explorer 8 引入了對HTML5工作草案規范(英文)的某些功能的支持,包括:
- DOM 存儲,它定義為 HTML5 Web 存儲規范(英文)的一部分。
- Ajax 導航,通過window.location.hash屬性和onhashchange事件(都在 HTML5 規范的歷史記錄遍歷部分中定義)實現。
- 跨文檔消息傳送,通過postMessage方法和onmessage事件(都作為 HTML5 Web 消息傳送模塊的一部分指定)實現。
Internet Explorer 9 以 Internet Explorer 8 已完成的HTML5 合規性方面的工作為基礎,實現了以下新功能:
- HTML5 地理位置 API
- 新的video和audio HTML 元素
- 新的canvas HTML 元素
- Selection接口
- 更多可互操作的 HTML 分析
- 幾個新 DOM API(本文檔的DOM L2 HTML一節中進行了討論)
- 縮放向量圖形 (SVG)
注意? 請務必記住,截止到撰寫本文時為止,HTML5 規范仍然處于工作草案階段。在該規范達到候選建議階段之前,可能會進行重大更改。有關詳細信息,請參閱最新 HTML5 工作草案(英文)。
HTML5 地理位置
Internet Explorer 9 增加了對地理位置的支持。地理位置 API 能讓 Web 應用程序訪問運行 Internet Explorer 的 PC 的當前地理位置。然后,網頁可以根據位置來定制用戶體驗,例如,顯示在地圖上的位置或者顯示最新當地信息(如天氣或新聞報道)。位置數據是根據緯度和經度坐標返回的。Internet Explorer?9 中的地理位置 API 符合地理位置 API 規范(英文)中設定的標準。
要觀看地理位置的實際演示,請參閱InternetExplorer?9 Test Drive 網站。
有關地理位置的詳細信息,請參閱MSDN。
HTML5 video 和audio 元素
至于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 videotag 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元素示例,請轉到InternetExplorer Test Drive(英文)網站。
Internet Explorer 9 支持以下內容格式:
| 元素名稱 | 支持的格式 |
| 視頻 | MP4 容器、H.264 視頻、所有配置文件 — AAC 或 MP3 格式的音頻 WebM 視頻(如果您安裝了 VP8 編碼解碼器) |
| audio | AAC 或 MP3 |
有關詳細信息,請參閱 MSDN 上的HTML5視頻和音頻(英文)。
HTML5 canvas 元素
Internet Explorer 9 中新增的另一個令人期待的 HTML5 功能是canvas元素,該元素可與 Canvas 2D API 結合使用。按照HTML5規范中的定義,使用canvas元素可以在依賴于分辨率的位圖畫布上呈現圖形。若要在畫布上繪制,可使用“上下文”,如 W3C Canvas2D 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對象公開的成員):
- canvas屬性(反向引用canvas對象)
- 狀態方法(save、restore)
- 轉換方法(scale、rotate、translate、transform、setTransform)
- 合成屬性(globalAlpha、globalCompositeOperation)
- 顏色和樣式屬性(strokeStyle、fillStyle)
- CanvasGradient對象和方法(addColorStop、createLinearGradient、createRadialGradient)
- CanvasPattern對象和方法 ( createPattern)
- 直線特性(lineWidth、lineCap、lineJoin、miterLimit)
- 陰影特性(shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur)
- 矩形方法(clearRect、fillRect、strokeRect)
- 復雜形狀方法(beginPath、moveTo、closePath、lineTo、quadraticCurveTo、bezierCurveTo、arcTo、arc、rect、fill、stroke、clip、isPointInPath)
- TextMetrics接口(CanvasTextMetrics對象)、其屬性 ( width) 以及文本方法和特性(font、textAlign、textBaseline、fillText、strokeText、measureText)
- 圖像方法 ( drawImage)
- ImageData接口(CanvasImageData對象)、其屬性(data、height和width)以及像素操作方法(createImageData、getImageData、putImageData)
- CanvasPixelArray對象及其屬性length
有關對 Internet Explorer 9 中的 HTML5 Canvas 的更加深入介紹,請參閱MSDN。此外,還可以訪問InternetExplorer Test Drive(英文)網站,查看canvas元素的更多演示。有關 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 將 MIME 類型為application/xhtml+xml的文檔分析為 XHTML。
一般元素
以前,Internet Explorer 會將自己無法識別的元素分析為“未知”元素。這些元素將扁平化,因而無法應用常規 CSS 樣式規則,并且不符合 HTML5 草案規范。Internet Explorer 9 改變了這一行為,現在,會將無法識別的元素分析為“泛型”元素,因而這些元素可以像常規元素一樣工作。這樣,開發人員無需再提供解決方法(如調用document.createElement強制 Internet Explorer 識別元素)。
下面是泛型元素的簡單示例(本例中是名為mydiv的未定義元素)。
<styletype="text/css">
?mydiv {
???? color:blue;
???? font-weight:bold;
?}
?</style>
...
<p>I am using a <mydiv>generic element</mydiv> in thissentence.</p>
Internet Explorer 8 會忽略mydiv標簽及其關聯 CSS 規則。此語句的呈現效果如下。
Internet Explorer 9 會正常分析mydiv標簽,呈現效果如下。
重疊標簽
如果 HTML 包含重疊標簽,則在分析時,Internet Explorer 8 及更早版本不會解析這些標簽。這一行為不符合 HTML5 草案規范的規定。如果為了編寫腳本而使一些元素重疊(如此處舉例說明的元素),則可能導致令人困惑的腳本錯誤。Internet Explorer 9 遵循 HTML5 草案規范,在分析時會解析重疊標簽。
下面是一個簡單的腳本示例,將重疊的i標簽與b標簽之間的文本轉變為紅色。
<scripttype="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 οnlοad="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 以正常方式將script或style塊中的文本作為文本節點保存到 DOM 中。這樣,源代碼在 DOM 中作為文本節點,便于您通過腳本進行操作。
HTML5 選擇API
Internet Explorer 9 增加了對三個 HTML5 文本選擇 API 的支持。Selection對象表示Range對象的列表,這些對象是通過 Internet Explorer 9 中新增的DOML2 范圍(英文)支持實現的。有關詳細信息,請參閱本文檔前面的文檔對象模型 (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 要實現的最熱門的功能之一,同時也是一種功能強大的方式,用于向網站添加可輕松縮放的高保真視覺效果(從小而簡單到大而復雜),而無需插件或單獨的查看器。
在Internet Explorer 9 中,Microsoft 很自豪地引入了對基本 SVG 功能集的支持。Internet Explorer 9 中的 SVG 支持基于SVG1.1(第二版)規范建議(針對桌面瀏覽器)。已經實現了以下功能:
- 大部分 SVG 文檔結構、交互性(腳本事件)和樣式(內聯和通過 CSS)
- 許多表示元素及其相應的特性和 DOM 接口,包括:
- 基本形狀
- 填充、筆劃、標記和顏色
- 漸變和圖案
- 路徑
- 文本
Internet Explorer 9 支持用于顯示 SVG 標記的以下方法:
- HTML5 嵌入中的 SVG 段,無需使用外部對象(即只需在 HTML 中包含 <svg> 標簽)
- 作為完整文檔類型的 SVG(具有 .svg 文件擴展名)
- XML 或 XHTML 中的 SVG(類似于 HTML5 方法,僅限 XML 或 XHTML 文件)
- 作為 CSS 圖像的 SVG
- 使用object元素的 SVG,如下所示(請注意type、height和width特性):
<object data="rect2.svg"width="100%" height="400px"
??? type="image/svg+xml"></object>
?
- 使用img、embed、iframe或frame元素的 SVG,如下所示:
<embedid="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 支持的基本形狀集由以下形狀元素組成:
- rect
- circle
- ellipse
- line
- polyline
- polygon
Internet Explorer 9 還支持這些元素的關聯 DOM 接口。
下面是上述每個形狀元素的示例。標記之后是 Internet Explorer 9 中相應結果的屏幕截圖。
矩形:rect 元素
<?xmlversion="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 元素
<ellipsestroke="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, 1008,3 150"
??? fill="orange"
??? stroke="black"
??? stroke-width="4"/>
有關詳細信息,請參閱 MSDN 上的polyline(英文)元素參考頁。
多邊形:polygon 元素
多邊形是一個閉合形狀。
<polygon points="15, 5, 1008,6 150"
??? fill="orange"
??? stroke="black"
??? stroke-width="4"/>
有關詳細信息,請參閱 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">
?<svgxmlns="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 tomask the color of a rectangle
? </desc>
? <defs>
???? <g id="circles">
??????????? <gstroke="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>???????
??????? <maskid="myMask" >
??????????? <usexlink: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特性。
- viewBox和preserveAspectRatio屬性(包括與overflow屬性的交互)。
- 對轉換和轉換列表類型的支持。
Internet Explorer 9 還支持與SVG 坐標系和轉換關聯的 DOM 接口。
文檔結構
Internet Explorer 9 按照 SVG 1.1(第二版)規范的文檔結構、元數據和可擴展性模塊的規定,引入了對基本 SVG 文檔結構、元數據和可擴展性功能的支持。Internet Explorer 9 支持的元素包括:
- svg
- desc
- title
- metadata
- g
- use
- defs
- symbol
- image
- switch
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>
????? <linearGradientid="MyGradient">
??????? <stopoffset="10%" stop-color="yellow" />
??????? <stopoffset="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 1.1 規范(第二版)的交互性模塊(英文)的規定,支持 SVG 交互功能,包括:
- 鼠標事件:
- mousedown
- mouseup
- click
- mouseover
- mousemove
- mouseout
- 光標/指針事件:
- focusin
- focusout
- activate
Internet Explorer 9 還支持交互性模塊的SVGCursorElement DOM 接口。
此外,Internet Explorer 9 還按照SVGTiny 1.2(英文)規范的交互性模塊中的規定,支持focusable屬性。
以下標記是提供的一個非常簡單的 SVG 交互性示例。
<svgxmlns=http://www.w3.org/2000/svg
??? xmlns:xlink="http://www.w3.org/1999/xlink"width="600"
??? height="600">
? <script type="text/ecmascript">
??? <![CDATA[
?????????? // objectrepresenting circle
?????????? var redcircle;
?????????? // variablerepresenting 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>
加載此代碼段后,它會顯示一個紅色的小圓形。
單擊該圓形會將它放大至兩倍大小。
使用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">
?<axlink:href="http://www.bing.com" target="_blank">
??? <rect x="20" y="20"width="250" height="250"/>
?</a>
?</svg>
視圖
視圖可用于指示瀏覽器以某種方式顯示 SVG 圖像。例如,以下標記定義一個視圖鏈接。
...
?<axlink: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將顯示該視圖,其中顯示紅色矩形。
以下標記定義另一個視圖鏈接。
...
?<axlink:href="#circle-view">
??? <text x="250" y="70"style="fill:blue">Go to Circle</text>
?</a>
?<viewid="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 中的效果如下所示。
單擊“Goto Circle”時,circle-view將調用視圖,圓形將伸展以填充viewBox矩形。這樣,它顯示為一個橢圓形。
繪制和顏色
繪制和顏色是 SVG 的基本組成部分。繪制的概念包含填充(純色、漸變和圖案)、筆劃(沿路徑繪制的線條)以及標記符號(應用于線段端點;例如箭頭),還可以包含不透明度。填充和筆劃可應用于路徑、文本和形狀。
Internet Explorer 9 按照 SVG 1.1(第二版)規范的繪制:填充、筆劃和標記符號模塊(英文)和顏色模塊(英文)的規定,引入了對 SVG 繪制和顏色的支持。包括對以下幾項的支持:
- fill 屬性:
- fill
- fill-rule
- fill-opacity
- stroke 屬性:
- stroke
- stroke-width
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-dasharray
- stroke-dashoffset
- stroke-opacity
- visibility 屬性:
- display
- visibility
- marker元素
- 繪制繼承(包含的元素自動繼承 Paint。)
- color屬性
此外還支持繪制模塊的關聯 DOM 接口SVGPaint和SVGMarkerElement。
本文檔的路徑部分提供了幾個 SVG 中的填充和筆劃示例。
路徑
SVG 路徑是形狀的輪廓,可以用于填充、繪制筆劃(沿著路徑繪制線條),也可以用作剪輯路徑(其他形狀的裁剪圖)。
Internet Explorer 9 按照 SVG 1.1(第二版)規范的路徑模塊(英文)的規定,引入了對 SVG 路徑的支持。這包括對path元素以及d屬性(用于分析路徑數據)的支持。
此外還支持路徑模塊的關聯 DOM 接口。
通過path元素,可以實現很多不同的開發人員方案。下面只是幾個簡單的示例。標記之后是 Internet Explorer 9 中相應結果的屏幕截圖。
由直線段和填充構成的閉合形狀
<?xmlversion="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 4060 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 接口。
面向Web 開發人員的新工具
本節首先介紹“固定網站”,這種新方式可加強網站與用戶之間的連接。然后,介紹一種在 Internet Explorer 9 中指定版本的新方式,用于幫助處理在遷移到新版 Internet Explorer 時出現的兼容性問題。接下來,將介紹有關 Internet Explorer 開發人員工具的改進信息,首次直接集成這些工具的是 Internet Explorer 8。
固定網站
當您利用固定網站時,用戶變得更愿意沉浸于您的網站。固定網站是一組新的工具,提供網站強化型用戶界面,具有放大的收藏圖標,還有“后退”與“前進”按鈕以及其他可以與網站的品牌和總體外觀統一的界面元素。與 Windows 7 集成能讓人們使用最新的 Windows API 訪問開發人員網站,以便創建網站跳轉列表、縮略圖工具欄和通知。(固定網站僅在 Windows?7 任務欄中受到支持。)
將網站固定到任務欄中
用戶可以通過執行下列操作之一將網站固定到任務欄中:
- 單擊一個選項卡并將其拖動到任務欄中,從而“撕”掉選項卡。
- 將收藏圖標從地址欄中拖動到任務欄中
- 將一個具有“msPinSite”類的自定義圖像(“拖動以固定”圖像)拖動到任務欄
某個網站在固定后,會按照自定義增強功能呈現,例如,“后退”和“前進”按鈕與網站的顏色方案匹配。另外,網站還可以固定到“開始”菜單中。
跳轉列表
跳轉列表任務是針對固定網站定制的、特定于應用程序的操作。它們使用和 Windows?7 中的應用程序同樣的功能作為基礎。通過使用跳轉列表任務,網站可以將最常用的命令呈現給用戶。您可以根據網站的功能和用戶預期執行的重要操作來定義跳轉列表任務。這些任務提供一組靜態鏈接,可供用戶隨時訪問,即使在不運行 Internet Explorer 的情況下也可以。有關跳轉列表任務的詳細信息,請參閱 MSDN 上的如何創建動態跳轉列表(英文)。
縮略圖工具欄
縮略圖工具欄實質上是您的網站的“遠程控件”。當您將鼠標懸停在固定網站的任務欄按鈕上時,該工具欄便會顯示在縮略圖預覽下面。此功能特別適用于那些實施視頻或音頻播放的網站,但縮略圖工具欄也有許多潛在用途。縮略圖工具欄按鈕可以包括用于控制播放、添加或共享收藏夾、搜索、更改在線狀態、即時購物或評定網頁等級的控件。有關創建縮略圖工具欄的詳細信息,請參閱 MSDN 上的如何創建縮略圖工具欄(英文)。
通知
就像Windows 7 中的應用程序一樣,固定網站可以通過在固定網站任務欄按鈕的上面顯示覆蓋圖標,讓用戶看到通知和狀態。覆蓋圖標可在固定網站的窗口被阻止而無法查看時(例如,當瀏覽器窗口最小化或被另一個窗口阻止時)幫助吸引對網站的注意。可以使用覆蓋圖標來提供重要的狀態信息或通知,如網絡狀態、在線狀態或新郵件。有關通知的詳細信息,請參閱 MSDN 上的如何提供通知(英文)。
發現固定網站
Internet Explorer 9 將不會通知用戶網站是否能夠進行固定。是否宣傳這些功能要由開發人員決定。您可以利用許多方式來讓用戶知道您的網站有固定網站功能,這些方式包括浮動廣告、下拉列表、橫幅標題和層次效果;拖放以固定圖標和圖像;以及提供首輪體驗以便在用戶首次固定網站后宣傳固定網站功能。有關可發現性的詳細信息,請參閱 MSDN 上的如何提高可發現性(英文)。
有關固定網站的說明信息和代碼示例,請參閱固定網站上的 MSDN 開發人員中心(英文)。
有關固定網站的演示,請參閱InternetExplorer 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如下所示。
<!DOCTYPEhtml>
當然,您可以使用!DOCTYPE和X-UA-Compatible meta 標簽或 HTTP 標頭來根據需要更改默認設置。
若要確定當前文檔模式,請按 F12 打開 Internet Explorer F12 開發人員工具,然后查看菜單欄右側。若要覆蓋文檔模式,請在“文檔模式”菜單上單擊“Internet Explorer 9 標準”。
用戶代理(UA) 字符串
用戶代理 (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; MSIE7.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) 切換程序工具,可以修改向 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對象。
?
?
Internet Explorer 10
?
兼容性
Internet Explorer?10 開發者指南的本部分討論用來定義Windows Internet Explorer 如何呈現網頁的文檔兼容性。如需了解有關文檔兼容性的更多信息,請在MSDN 上參閱定義文檔兼容性。
本節內容
| 主題 | 描述 |
| 兼容性模式 | 文檔兼容性模式決定了 Windows Internet Explorer 呈現網頁的方式。本主題主要講述 Internet Explorer?10 中的文檔兼容性模式。 |
| Windows?7 中的 Internet Explorer 10 | Internet Explorer?10 開發人員指南的本主題介紹了 Windows?7 上運行的 Internet Explorer?10 與 Windows?8 上運行的 Internet Explorer?10 之間的區別。 |
| 可互操作的 Quirks 模式 | Internet Explorer?10 提供了一個可互操作的 Quirks 模式,該模式支持標準模式的許多功能。這使 Windows Internet Explorer 能夠在保留眾多用戶所期望的兼容性支持的同時,匹配其他常用瀏覽器的行為。 |
| 用戶代理字符串 | user-agent 字符串(簡稱“UA 字符串”)可標識你的瀏覽器,并向托管你所訪問網站的服務器提供有關特定系統的詳細信息。本主題說明 Internet Explorer?10 中對 user-agent 字符串的更改。 |
?
CSS
Internet Explorer?10增加了對幾種新的級聯樣式表(CSS) 功能的支持,包括新的高級布局、視覺效果以及平移和縮放功能。這一趨勢開始于 WindowsInternet Explorer?8(全面兼容級聯樣式表Level?2 修訂版?1 (CSS2.1) 標準),并在Windows Internet Explorer?9 上得以延續(支持CSS 圓角、多種背景圖像、新的顏色模式和透明度、級聯樣式表Level 3 (CSS3) 字體和 Web 開放字體格式(WOFF)、2-D變換、媒體查詢、CSS3命名空間以及其他功能)。InternetExplorer?10 通過引入對本節中所描述的CSS 功能的支持,延續此趨勢。
- 高級布局
- 視覺效果
- 其他新增功能
- 相關主題
要點??這些功能在Internet Explorer?10 中和在使用JavaScript 的 Windows 應用商店應用中的工作方式相同。
注意??有關所有最新版本的Windows Internet Explorer 中對 CSS 支持的完整列表,請參閱InternetExplorer 中的CSS 兼容性。
高級布局
Internet Explorer?10引入了多種搭配使用JavaScript 和 CSS 設計網頁或Windows 應用商店應用的新方法。這些方法包括:
| 主題 | 描述 |
| CSS 排除 | 對文本自動換行,以便其完全環繞元素,而不是限制元素浮動到文本的左側或右側。 |
| CSS 區域 | 提取既包括文字又包括圖像的 HTML 內容的單個流,并將該流傳輸到在標準 HTML 文檔中定義的多個空容器中。 |
| CSS3 多列布局 | 將內容分流到多個列中,允許在這些列之間留出間距并選用規則。 |
| CSS3 彈性框(“Flexbox”)布局 | 在定義框的大小時會考慮留出一些可用空間,讓你可以調節相對大小和位置。 |
| CSS3 網格布局 | 對網頁或 Web 應用的主要區域劃分空間,并定義 HTML 控件的各部分之間在大小、位置和圖層方面的關系。 |
?
視覺效果
Internet Explorer?10 和使用 JavaScript 的Windows 應用商店應用支持CSS3 的最新視覺效果模塊。這些模塊包括:
| 主題 | 描述 |
| CSS3?3D 變換 | 對 2D 和 3D 空間中的元素進行平移、旋轉和縮放。 |
| CSS3 動畫 | 通過使 CSS 屬性自動隨時間逐漸變化,實現對元素的動畫處理。 |
| CSS3 字體 | 訪問 OpenType 字體中的高級版式功能。 |
| CSS3 漸變 | 向所有接受圖像的屬性添加顏色漸變。 |
| CSS3 過渡 | 通過將 CSS 屬性從開始值逐漸更改為結束值來創建簡單的動畫。 |
| CSS3 文本 | 對文本應用投影,或自動對文本塊進行斷字。 |
?
其他新增功能
Internet Explorer?10 和使用 JavaScript 的Windows 應用商店應用還引入了以下新功能:
| 主題 | 描述 |
| 刪除樣式表限制 | Internet Explorer 的以前版本中包含對每個網頁上的樣式表數量和嵌套級別數量的限制,而在 Internet Explorer?10 中,這些限制都被刪除了。 |
| 指定可選擇的文本 | -ms-user-select 屬性是一個新的 CSS 屬性,它使應用開發人員和 Web 開發人員能夠在其使用 JavaScript 的 Windows 應用商店應用中或網頁中控制用戶可選擇文本的位置。 |
文檔對象模型(DOM)
Internet Explorer?10包含多種新的DOM 功能(包括高級命中測試API、媒體查詢偵聽器、指針事件和手勢事件)。
本節內容
| 主題 | 描述 |
| 高級命中測試 | Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用引入了msElementsFromPoint 和msElementsFromRect 方法,這些方法分別返回與給定的x 和y 坐標處的點或一個矩形區域相交的所有元素的節點列表。 |
| CSSOM 中的浮點值 | 對于元素級別的 CSSOM 屬性的位置和尺寸值,Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用中的 CSS 對象模型 (CSSOM) 支持浮點像素單元和浮點精度。 |
| 媒體查詢偵聽器 | 即媒體查詢偵聽器,該功能允許你使用腳本以應對在運行頁面的媒體或環境中的更改。 |
| createContextualFragment 方法 | 使用createContextualFragment() 方法,可以在將文檔對象模型 (DOM) 范圍的起始節點作為分析上下文的情況下,將 HTML 字符串分析為DocumentFragment。 |
| XMLHttpRequest 增強功能 | Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用引入了對于XMLHttpRequest 對象的若干增強功能,能夠為不斷出現的標準提供更好的支持并且更容易支持常見的開發者方案。 |
F12 開發人員工具
F12 開發人員工具是在Windows Internet Explorer?8 中引入的,并用Windows Internet Explorer?9 中的新功能進行了更新。InternetExplorer?10 中的 F12 開發人員工具為多個腳本源添加了Web Worker 調試和支持。
注意??F12 開發人員工具在使用JavaScript 的 Windows 應用商店應用中不可用。有關詳細信息,請參閱調試和測試Windows 應用商店應用。
本節內容
| 主題 | 描述 |
| 控制臺方法 | 使用四種新的控制臺方法,應用可以向控制臺發送對象的屬性、清除控制臺中的消息以及在 Microsoft Visual Studio 調試程序中開始和停止分析。 |
| 調試 Web Worker | 為了幫助改進用戶界面的性能,Web Worker 使你可以避開主執行線程,而在多個單獨線程上運行要占用大量處理器資源的代碼。現在,F12 開發者工具還可以幫助你調試這些線程,從而查看單獨的 Worker 腳本、設置斷點并觀察變量。 |
HTML5
對HTML5 工作草案規范中所定義的多項功能的支持始于Windows Internet Explorer?8 并延續至 WindowsInternet Explorer?9。Internet Explorer?10支持更多HTML5。?InternetExplorer?10 和使用 JavaScript 的 Windows 應用商店應用支持以下功能:
本節內容
| 主題 | 描述 |
| 應用程序緩存 API ("AppCache") | AppCache 使網頁能夠在本地緩存(或保存)資源,包括圖像、腳本庫和樣式表等。 |
| 異步執行腳本 | script 元素的async 屬性可以使關聯腳本相對于頁面的其余部分進行異步加載和執行。 |
| 通道消息 | 通道消息可以使不同瀏覽上下文中的代碼通過端口直接通信。在創建端口后,終結點會通過將postMessage 方法和onmessage 事件結合使用來進行通信。 |
| 拖放 | Internet Explorer?10 添加了對于draggable 屬性的支持,該屬性允許將應用了該屬性的任何 HTML 元素拖動到頁面上。Internet Explorer?10 還在files 對象中添加了dataTransfer 屬性,該屬性支持將一個或多個文件從桌面拖放到網頁中。 |
| 文件 API | 文件 API 是萬維網聯合會 (W3C) 的一個 Web 規范草案,用來表示 Web 應用程序中的文件對象并以編程方式選擇它們及訪問其數據。 |
| 表單 | Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用新增了對 HTML5 表單的支持,包括type 屬性(位于input 元素上)的新狀態、input 元素的新屬性以及progress 元素。 |
| 歷史記錄 | Internet Explorer?10 引入了對 HTML5 草案規范的歷史記錄界面的支持,該歷史記錄界面包括用來管理站點的歷史記錄堆棧和 URL 的方法。 |
| 分析 | Internet Explorer?10 和使用 JavaScript 的Windows 應用商店應用完全支持 HTML5 分析算法,就像在早期版本中一樣,繼續努力使 HTML 在不同瀏覽器中“以相同方式工作”。 |
| 沙盒 | sandbox 屬性支持針對包含不受信任的內容的iframe 元素進行安全限制。這些限制可防止不受信任的內容執行可能導致潛在惡意行為的操作,從而提高安全性。 |
| 拼寫檢查 | spellcheck 屬性是萬維網聯合會 (W3C) 的 HTML5 規范的一部分,它添加了對輸入、textarea 元素和可編輯文本字段的拼寫檢查。 |
| x-ms-acceleratorKey | x-ms-acceleratorKey 屬性提供了一種聲明將加速鍵分配給某個元素的方法。 |
| 視頻 | Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用還引入了對 HTML5 視頻的支持。 |
| Web Worker | Web Worker API 定義了一種在后臺運行腳本的方法。 |
| WebSocket API | WebSockets 技術為通過 Internet 進行的雙向通信提供了一個新的 W3C?JavaScript?API 和協議。這個新協議更便于直接處理固定數據格式,它會繞過速度較慢的基于文檔的 HTTP 協議。 |
IndexedDB
在本文中
- API 參考
- 示例和教程
- 有關 Internet Explorer 的 Test Drive 演示
- IEBlog 文章
- 規范
- 相關主題
Internet Explorer?10 和使用 JavaScript 的Windows 應用商店應用引入了對索引數據庫API(“IndexedDB”)的支持。IndexedDB支持存儲結構化數據。不像cookies和DOM存儲,IndexedDB提供了支持分組、循環訪問、搜索和篩選JavaScript 對象的功能。
IndexedDB API 由萬維網聯合會 (W3C) 的索引數據庫API 規范來定義,該規范當前處于工作草案階段。
本節內容
| 主題 | 描述 |
| IndexedDB 對象 | IndexedDB API 由多個對象組成,每個對象都是針對特定的任務設計的。 |
| 異步與同步 | 索引數據庫 API 規范定義兩個 API:一個同步 API 和一個異步 API。Internet Explorer?10 支持異步 API。 |
?
JavaScript
借助對于“類型化數組”和ECMAScript 5 (ES5)“嚴格模式”的最新支持,InternetExplorer?10 延續了 Windows Internet Explorer?9 的JavaScript 增強功能。
要點?? 這些功能在Internet Explorer?10 中和在使用JavaScript 的 Windows 應用商店應用中的工作方式相同。
本節內容
| 主題 | 描述 |
| ES5 嚴格模式 | 嚴格模式旨在改善錯誤檢查功能并且標識可能不會延續到未來 JavaScript 版本的腳本。 |
| 類型化數組 | 你可以使用類型化數組處理來自特定源(如網絡協議、二進制文件格式和原始圖形緩沖區)的二進制數據。類型化數組還可被用于借助已知的字節布局來管理內存中的二進制數據。 |
SVG
在Internet Explorer?10 和使用 JavaScript 的Windows 應用商店應用中,添加了對可縮放矢量圖形(SVG) 的支持,該功能在Windows Internet Explorer?9 中已經引入。具體來說就是,它們添加了對SVG 濾鏡效果的支持。SVG濾鏡效果是在可縮放矢量圖形(SVG) 1.1(第2 版)規范的第 15 節中指定的,該規范當前是萬維網聯合會(W3C) 推薦的一個標準。
要點??這些功能在Internet Explorer?10 中和在使用JavaScript 的 Windows 應用商店應用中的工作方式相同。
本節內容
| 主題 | 描述 |
| 濾鏡效果 | 使用 SVG 濾鏡可以直接在瀏覽器中操作圖形—這與在 Adobe Photoshop— 中執行的操作類似。 |
?
性能
Internet Explorer?10 和使用 JavaScript 的Windows 應用商店應用支持在萬維網聯合會(W3C) Web 性能工作組規范中定義的Web 性能。
有四種新的Web 平臺功能可用:
- 導航計時
- 頁面可見性 API
- requestAnimationFrame 方法
- setImmediate 方法
這四個平臺API 使開發者能夠讓瀏覽器更高效地使用計算機硬件,從而改善網站的性能和電源管理。設計這些新的API 的目的是通過W3CWeb 性能工作組與其他瀏覽器制造商協作。
要點??這些功能在Internet Explorer?10 中和在使用JavaScript 的 Windows 應用商店應用中的工作方式相同。
本節內容
| 主題 | 描述 |
| 高效生成腳本 ("setImmediate") | 通過解決核心性能問題,同時又不會對功耗帶來負面影響,這種新的setImmediate 方法能夠解決使用setTimeout 的問題。 |
| 導航計時 | 導航計時可以輕松測量網站的實際速度和性能,并查找需要調整的問題區域。 |
| 頁面可見性 | Internet Explorer?10 引入了對頁面可見性 API 的支持,其為開發者提供了使用編程技術確定文檔當前的可見性并在可見性發生變化時獲得通知的方法。 |
| 基于腳本的動畫的計時控制 ("requestAnimationFrame") | requestAnimationFrame 方法(在萬維網聯合會 (W3C) 的針對基于腳本的動畫的計時控制規范中定義)可以解決丟失幀的問題,因為它使應用能夠在瀏覽器需要更新頁面顯示時(而且僅在這種情況下)獲得通知。 |
?
?
Internet Explorer 11
顯示和方向
Internet Explorer?11 利用設備方向和移動事件、全屏模式編程控制,以及將屏幕鎖定在特定方向的能力,讓你能夠更好地控制網站和應用的顯示。
全屏 API
IE11 引入了對新興的W3C ?全屏規范的支持,在ms 前綴后面實現,使你可以讓視頻、圖像和其他內容吸引住觀眾的全部注意力。
有關詳細信息,請參閱全屏API。
編輯
Internet Explorer?11 圍繞插入光標導航和其他超文本編輯方案提供可預測性和可控制性更強的體驗。我們已重構了在 IE11 中進行編輯所用的代碼庫來添加以下新功能,還修復了許多錯誤,包括與textarea光標行為有關的問題。
輔助功能改進
IE11 還添加了對文本輸入控件中“清除”按鈕(在Internet Explorer 中,該按鈕呈現為文本框末尾處的黑色“X”)的輔助功能支持,該支持現在包括在Windows 輔助功能樹中,作為文本輸入控件的第一個子項。輔助技術用戶只需單擊“清除”按鈕(黑色“X”)即可清除文本內容,而不必在控件中選擇所有文本后再刪除它們。
其他的輔助功能改進包括用于發生自動更正時的MSAAnotifications、關于contenteditable方案和textattribute 標識的缺陷修復。
剪貼板圖像支持
從IE11 開始,從剪貼板粘貼的圖像默認采用base64編碼。用戶現在可以輕松安全地將本地文件系統中的圖像復制并粘貼到網站的contenteditable 區域中。在IE11 之前的版本中,在活動網站上粘貼本地圖像(跨安全區域)會導致圖像圖標被破壞,以此作為阻止本地文件訪問的一項安全措施。當復制到剪貼板時,出于安全目的,不可訪問的圖像會將其src 設置為""。
IE11 還提供了clipboardData.files 屬性和新的msConvertURL方法,以避免默認的base64 編碼并使用blobs和對象URL 來顯示圖像;或者完全退出任何圖像src屬性會話。
此代碼顯示了如何將粘貼的剪貼板圖像轉換為為blob。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var blobList = []; ?? document.getElementById("pasteZone").addEventListener('paste', handlePaste, false); ?? function handlePaste(evt) { ??var fileList = window.clipboardData.files; // Note that window.DataTransfer.files is not applicable. ?? ??if (!fileList) { ????console.log("fileList is null."); ????return; ??} ?? ??for (var i = 0; i < fileList.length; i++) { ????var file = fileList[i]; ????var url = URL.createObjectURL(file); ?? ????if (evt.convertURL) { // Use standard if available. ??????evt.convertURL(file, "specified", url); ????} else { ??????evt.msConvertURL(file, "specified", url); ????} ?? ????console.log("Local file: " + file.name + " (" + file.size + ")"); ????blobList.push(file); ??} // for } // handlePaste |
?
?
?
命令標識符
IE11 引入了幾種新的execCommand 方法,用于對豐富的編輯方案中的編輯撤消堆棧和段落分隔進行微調控制。
以下方法啟用基于腳本的編輯以參與撤消歷史記錄,使你能夠更好地控制你的應用的編輯體驗:
| 命令標識符 | 描述 |
| ms-beginUndoUnit | 開始撤消單元。ms-beginUndoUnit 和ms-endUndoUnit 之間的任何 DOM 更改(包括從腳本進行的更改)都將收集到撤消單元中,如果是單個命令,則進行撤消和恢復。 |
| ms-clearUndoStack | 清除撤消歷史記錄。 |
| ms-endUndoUnit | 結束撤消單元。 |
?
已添加下列方法,用于控制段落分隔:
| 命令標識符 | 描述 |
| DefaultParagraphSeparator | 設置創建采用純文本的新段落時(例如按Enter 時)要使用的默認元素(p 或div)。 |
?
控件改進
除了新的datalist 控件的進行了觸摸優化的 UI,IE11 還提供了許多錯誤修復。此外,select 控件option 元素現在提供 CSS 樣式支持,使你能夠微調下拉項目(例如顏色和字體樣式)的外觀。這支持字體選擇器控件等編輯方案,在這些方案中,用戶可以在選擇要使用的字體前預覽下拉列表中不同的字體樣式。
輸入法編輯器 API
IE11 引入了一組 API,這些 API 使 Web 應用程序可以提供更好的輸入法編輯器 (IME) 輸入體驗。例如,IME API 提供了用于自動完成或搜索建議的編寫信息,使你能夠避免 IME 候選窗口與搜索建議列表之間的用戶界面沖突。
有關詳細信息,請參閱輸入法編輯器 API。
F12 工具中的新增功能
使用新的F12 開發人員工具調試代碼、解決顯示問題、提升性能、增強你的網頁的穩定性。
從頭開始重建
Internet Explorer?11 中的 F12 工具已從頭開始重建,可為你提供以下內容:
- 新且更干凈的用戶界面。
- 新的響應、內存以及模擬工具。
- 常見工具中新的、改進的功能。
- 更快、更簡單的工作流。
使用 UI 響應工具加快網頁速度
當頁面運行時,新的UI 響應工具為其提供配置文件,從而標識頁面速度減慢的位置以及花費時間過長的進程。開發人員可以觀察 CPU 使用率、幀速率與頁面行為之間的關系。
要點??*當 Windows?7 并非處于最新狀態時,在 Windows?7 上的 IE11 中可能會禁用 F12 開發人員工具中的 UI 響應工具。如果 UI 響應工具無法在 Windows?7 上安裝的 IE11 中正常工作,請確保已經安裝 Windows 更新中的所有可用更新。
CSS、HTML 以及 JavaScript 自動完成
鍵入 JavaScript、HTML 或 CSS 代碼時, 控制臺和DOM 資源管理器工具會提供自動完成建議。自動完成有助于實現以下操作:
- 使 API 更容易被發現;例如控制臺 API 方法。
- 減少鍵入錯誤。
- 加速工作流。
屏幕和 GPS 模擬
使用模擬工具,你可以在小至 240 像素寬的移動屏幕上,大至 4k 家庭影院屏幕的所有屏幕上預覽站點外觀。GPS 模擬測試移動網頁如何在世界任何位置進行響應。
有意義的內存分析
隨著時間的推移跟蹤內存使用情況是一個重要工具,用于調試頁面速度緩慢和崩潰情況。新的內存工具提供了以下內容:
- 整體內存使用情況的時間線視圖。
- 內存使用情況快照,顯示某個給定時間點網頁的內存使用情況。
- 快照比較,查明兩個快照之間更改內存使用情況的源。這有助于標識網頁運行時和用戶與網頁交互時顯露的內存問題。
- 高亮顯示的孤立元素,顯示可以回收元素的位置。
右鍵單擊以檢查
使用 IE11 在DOM 資源管理器工具中選擇頁面元素非常輕松。右鍵單擊頁面上的元素,然后單擊上下文菜單中的“檢查元素”,以在 DOM 資源管理器工具中突出顯示元素。
圖形
借助 Internet Explorer?11,你可以獲得可靠的圖形堆棧功能,其中包含基本 WebGL 支持、高 DPI 升級、顯著的性能提升和額外的 Canvas 功能。
畫布增強功能
IE11 使用 W3C Canvas 2D 上下文級別 2 規范中的新功能進一步充實了對Canvas 的支持,其中包括圖像平衡處理、奇偶填充規則和虛線。
有關詳細信息,請參閱"畫布增強功能"。
高 DPI 支持
IE11 引入了多監視器支持、一個統一的視覺縮放模型、對默認比例系數的多種選擇以及對devicePixelRatio 屬性的支持,以確保你的站點的文本、觸摸定位、布局可以跨 Windows?8.1 設備實現一致性。
請參閱"高 DPI 支持"了解詳細信息。
WebGL
IE11 引入了對 WebGL 的基本支持,這是一組通過canvas 元素公開的 API,用于呈現交互式三維和二維圖形。
有關詳細信息,請參閱"WebGL"。
JavaScript
Internet Explorer?11 擴展了 Internet Explorer?10 的 JavaScript 增強功能,新支持塊范圍的變量、容器對象、國際化 API 和 __proto__ 屬性。
注意??以下功能在 IE11 中和在使用 JavaScript 的 Windows 應用商店應用中的工作方式相同。
塊范圍的變量
你可以使用新的let 和const 關鍵字聲明變量,用于將范圍限制在聲明它們的塊中。有關詳細信息,請參閱let Statement 和const Statement。
容器對象
你可以使用Set Object 對象創建一個獨特對象集合,還可以使用Map Object 或WeakMap Object 創建一個鍵/值對集合。
國際化 API
特定于區域設置的日期和時間格式設置、數字格式設置和比較通過符合ECMAScript 國際化 API 規范的國際化 API 提供。有關詳細信息,請參閱Intl.DateTimeFormat Object 、Intl.NumberFormat Object 和Intl.Collator Object。
__proto__ 屬性
你可以使用__proto__ 屬性設置用戶定義的對象、固有對象和函數的原型。若要了解詳細信息,請參閱__proto__ Property (Object)。
布局
Internet Explorer?11 引入了更新的彈性框實現、對 CSS 邊框圖像的支持、垂直書寫模式中的水平文本、獨立于縮放的固定定位,以及對東亞和雙向文本布局的許多改進。
邊框圖像
在 IE11 中,你可以使用CSS 背景和邊框模塊級別 3 W3C 規范中的border-image 屬性定義自定義邊框圖像。使用border-image 屬性,你可以指定自己的邊框圖像代替傳統的邊框樣式。
要了解詳細信息,請參閱邊框圖像。
設備固定的定位
IE11 為獨立于縮放的固定定位添加了 CSS 支持。當使用 JavaScript 的網站或 Windows 應用商店應用要求始終向用戶顯示某個元素、在用戶平移或縮放時從不離開屏幕、且從不受到觸摸鍵盤的阻礙時,你可以使用 CSS position 屬性的新-ms-device-fixed 值。
東亞和雙向文本改進
在 IE11 中,我們改進了東亞和雙向文本方案,修復了拼音、換行和括號配對(如圓括號和花括號)領域中的許多錯誤。
彈性框更新
2012 年 9 月,CSS 彈性框(“Flexbox”)布局模塊作為 W3C 候選推薦發布,其中合并了對該規范某些方面的更改。IE11 利用這些更改更新了彈性框支持,包括重命名的屬性、重命名的屬性值等。隨著不斷向前發展,你應該使用新的無前綴名稱(和值),并相應地更新現有站點。
有關詳細信息,請參閱彈性框(“Flexbox”)布局更新。
水平垂直文本支持
在 IE11 中,你可以使用 W3C CSS 書寫模式模塊級別 3 規范中的-ms-text-combine-horizontal 屬性在垂直書寫模式中呈現水平文本。此屬性在-ms- 前綴的后面實現,允許你將多個字符合并為一個單字形空間,以用于布局和裝飾目的。
網絡和導航
Internet Explorer?11 中新的導航功能(例如網絡優先級設置、預呈現和預提取以及向后導航緩存)可幫助你更快地加載頁面。
向后導航緩存
默認情況下,當你離開頁面時,系統會從內存中卸載這些頁面。從 IE11 開始,當用戶離開符合特定條件的網頁時,系統會緩存這些網頁。如果用戶稍后返回到該頁面,則從緩存中恢復該頁面,而不是從服務器重新加載。
有關詳細信息,請參閱"向后導航緩存"。
網絡優先級設置
通過設置網絡請求的優先級,使網頁更快地顯示,IE11 改進了導航性能。另外,Web 開發人員可以延遲加載單個資源,這樣其他更重要的資源可以優先加載。
若要了解詳細信息,請參閱"網絡優先級設置"。
預呈現和預提取
使用 IE11 中的預呈現和預提取可以改進網站的導航功能。預呈現指定在用戶讀取當前頁面的同時要在后臺加載的網頁,預提取標識要在后臺加載的資源。因為這兩項功能都在需要內容之前下載了相應內容,所以當用戶需要資源時,資源會立即可用。
若要了解詳細信息,請參閱"預呈現和預提取"。
隱私和安全
Internet Explorer?11 進一步提高了消費者安全性,同時為開發人員引入了新的平臺功能,其中包括對 W3C Web 加密 API 的支持和新的用戶批準的“請勿跟蹤”例外選項。
請勿跟蹤 (DNT) 例外
為了增強用戶隱私,Windows Internet Explorer 使用“請勿跟蹤”(DNT) 標頭請求網站避免跟蹤用戶。從 IE11 開始,通過請求權限來在用戶瀏覽站點時跟蹤用戶,網站可以請求例外。如果(用戶)批準請求,則 Internet Explorer 將記錄“請勿跟蹤”規則的例外,并向允許跟蹤的網站發送標頭。
通過遵守這些標頭和請求默認隱私設置例外,網站所有者可以向用戶發出跟蹤通知并創建機會就隱私信息的使用建立信任關系。
有關詳細信息,請參閱"不跟蹤 (DNT) 例外"。
第三方 Cookie 阻止
使用 IE11,客戶可以選擇阻止所有第三方 Cookie,以便更好地控制他們的聯機隱私。由你訪問的網站發布的(第一方)Cookie 通常對站點的功能性和可用性至關重要,但廣告商和其他內容提供商可能在大量第一方站點上使用第三方 Cookie,以逐步構建有關你的興趣和購買習慣的個人資料。
在采用 Windows UI 的 Internet Explorer 和桌面版 Internet Explorer 上阻止所有第三方 Cookie 的步驟:
啟用此設置可實現以下目的:
- 阻止第三方站點中的所有 Cookie(包括會話 Cookie)。
- 不會以任何方式影響第一方 Cookie。
- 在使用相同 Microsoft 帳戶登錄的所有 Windows?8.1 設備上應用(如果已啟用漫游)。
要點??此設置不適用于 Windows?7 上的 IE11,但是你可以使用“高級隱私設置”菜單(從“Internet 選項”中,選擇“隱私”選項卡,然后按“高級”按鈕)覆蓋自動 Cookie 處理,以便阻止第三方 Cookie。請注意,覆蓋自動 Cookie 處理還需要你為第一方 Cookie 顯式選擇“接受”、“阻止”或“提示”,以便覆蓋你擁有的任何預先存在的第一方 Cookie 設置(例如根據你選擇的“低”/“中”/“高”Internet 區域設置進行更精細調整的設置,這些設置位于“Internet 選項”、“隱私”選項卡中)。
Web 加密 API
W3C Web 加密 API 支持許多針對 Web 應用的重要安全方案。范圍包括可靠的用戶/服務身份驗證、文檔和代碼簽名,以及通信的保密性和完整性,所有這些都不需要安全連接(通過 SSL 或類似協議)。
有關詳細信息,請參閱"Web 加密 API"。
觸控
Internet Explorer?11提供了更多默認和自定義觸摸支持。
對于開發人員,IE11 引入了msZoomTo 方法來設置滾動效果的動畫,并提供了對站點或 Windows 應用商店應用上的平移和縮放體驗的更多微調控制。
IE11 還包括了對指針事件的一些更新,用于使 Windows Internet Explorer 實現符合萬維網聯合會 (W3C) 指針事件規范(目前該規范已達到候選推薦階段)。
Datalist 改進
IE11 提供了對 Internet Explorer?10 中引入的 HTML5 datalist 元素的進行了觸摸優化的用戶體驗。將其與datalist 配合使用后,input 控件現在可以提供觸摸友好的 UI,在觸到目標時可以為每個選項提供足夠的空間,與 Internet Explorer?10 中引入的進行了觸摸優化的選擇控制體驗一致。
指針事件
為了符合 W3C “指針事件”規范的候選推薦,與 Internet Explorer?10 相比,IE11 實現已略有更改。
有關完整詳細信息,請參閱"指針事件更新"。
視頻
Internet Explorer?11 將 HTML5 視頻提高到了一個新的水平,能夠在自適應流、內容保護和字幕描述領域支持新的和正在出現的基于標準的功能。
動態 TextTrack 對象
使用 IE11,可以為 HTML5 視頻動態添加或更改隱藏字幕TextTrack 對象和TextTrackCue 對象,而無需創建單獨的計時文本標記語言 (TTML) 或 Web 視頻文本軌道 (WebVTT) 文件。
有關詳細信息,請參閱動態 TextTracks。
簡單傳遞配置文件 (SDP) 字幕樣式
IE11 提供了隱藏字幕文本,可供通過簡單交付配置文件支持 (SDP) 設置樣式并放置在視頻屏幕中,如 W3C 隱藏字幕的 TTML 簡單交付配置文件規范中所述。使用 SDP,你可以控制前景和背景顏色、字體樣式,以及文本對齊方式和位置等。
有關詳細信息,請參閱簡單交付配置文件 (SDP) 字幕樣式設置。
流 XHR 緩存控制
在 IE11 中,你可以進一步控制在將使用 XMLHttpRequest (XHR) 下載的視頻數據通過msCaching 屬性傳遞到視頻控件之前,是否將該數據寫入到磁盤。
通過不緩存使用 XHR 下載的流式數據,開發者可以延長平板電腦和便攜式計算機上的電池使用時間,并避免磁盤延遲瓶頸。
Windows 集成
固定網站
IE11 增強了固定站點功能以支持動態磁貼、定義通知、使站點在固定或另存為收藏夾時更有視覺吸引力。動態磁貼和通知功能可讓客戶與你的站點建立更密切的聯系并創建自定義體驗。
有關詳細信息,請參閱"固定網站增強功能"。
總結
以上是生活随笔為你收集整理的企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [已解决]为什么使用远程桌面无法打开雷电
- 下一篇: 生猪价格matlab,基于时间序列的BP