internet explorer相容性設計考量
DESCRIPTION
Internet Explorer相容性設計考量TRANSCRIPT
1
Internet Explorer相容性設計考量
2013/08/02
IE相容性問題
2
IE6(含)之前的版本，不符合W3C標準
IE7之後逐步往符合W3C標準修正
過往為符合IE6之前版本而開發的歷史包袱
成也ASP.NET，敗也ASP.NET
IE對新舊格式網頁的處置方式*
3
• 會使用舊版IE(4、5、6)的錯誤方式(不符合W3C標準) 來排版。
• 未指定!DOCTYPE directive或其指定非標準模式文件類型，會自動使用Quirks Mode。
Quirks Mode(接縫模式)
• IE會透過HTML中指定的!DOCTYPE去自動選擇適當的模式。
• IE7標準模式：和IE7下的標準模式相同，不支援IE8下的CSS功能，也因此不會遇到IE8
更改後的CSS問題。
• IE8標準模式：支援新CSS功能的標準模式，是IE8遇到對於支持HTML/XHTML標準的網頁時自動採用的模式。
• IE9、10標準模式：符合目前最新的標準，如HTML5(部份)、CSS3、SVG和其他標準模式提供最大的支援。
標準模式
4
既有網站的因應*
CSS
hack針對各瀏覽器對CSS解譯的「bug」來處理
無法通過W3C檢測
IE各版本間的調整皆不同
每種瀏覽器需各作一版本CSS來對應
<style type="text/css">#test {
width: 400px; height: 400px; background-color: blue; /*firefox*/background-color: red\9; /*all ie*/background-color: yellow\0; /*ie8*/+background-color:pink; /*ie7*/_background-color: orange; /*ie6*/
}
:root #test { background-color: purple\9; } /*ie9*/
@media all and (min-width:0px) /*opera*/{
#test { background-color: black\0;
} }
@media screen and (-webkit-min-device-pixel-ratio:0) /*chrome and safari*/{ #test {
background-color: gray; }
}
</style>
• CSS hack參考：http://www.communis.co.uk/dithered/css_filters/css_only/
既有網站的因應
5
IE8以上版本提供的「X-UA-Compatible」中繼標籤
• 將X-UA-Compatible中繼標籤放到各網頁的 HEAD 項目中• 格式：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
• 用來告知IE以何種方式呈現網頁
• 修改Web.Config<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
1. 修改HTML*
2. 修改Server端設定*
既有網站的因應
6
3. 修改IIS設定*
• APACHE設定可參考：http://msdn.microsoft.com/zh-tw/library/cc817573.aspx
7
既有網站的因應
HTML Meta Tag Web.Config IIS META Switch> >
4. IIS決定設定的優先順序
既有網站的因應
8
設定值 說明
IE=EmulateIE8判斷!DOCTYPE，若符合支援標準則使用IE=8模式，反之則使用Quirks Mode
IE=EmulateIE7判斷!DOCTYPE，若符合支援的標準則使用IE=7模式，反之則使用Quirks Mode
IE=EmulateIE9判斷!DOCTYPE，若符合支援的標準則使用IE=9模式，反之則使用Quirks Mode
IE=5 Quirks Mode
IE=7、IE=8、IE=9 指定使用IE版本的標準模式
IE=edge使用當前IE所支援的最新標準，如在IE10裡便會採用IE10標準模式
Chrome=1 啓用Chrome Frame(若有安裝)
X-UA-Compatible Content設定
可使用複合式設定，IE會挑選最適合目前版本的選項，如：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;IE=edge"/>
既有網站的因應
9
比較靈活的作法
語法 說明
<!-- [if IE]>內容<![endif] --> 內容僅ie 瀏覽器會顯現
<!-- [if IE 6]>內容<![endif] --> 內容僅ie6 會顯現
<!-- [if lt IE 7]>內容<![endif] --> 內容僅在比 ie7 更舊的版本會顯現
<!-- [if gte IE 8]>內容<![endif] --> 內容僅ie8 及較新版本會顯現
<!-- [if !IE]>-->內容<!--<![endif] --> 內容除 ie 以外都會顯現
<!-- [if !(IE 6)]>內容<![endif] --> 內容除 ie6 以外的 ie 都會顯現
<!-- [if (gte IE 6)&(lt IE 8)]>內容<![endif] --> 內容只從 ie6 以後及 ie8 之前版本會顯現。
<!-- [if (IE 7)|(IE 6)]>內容<![endif] --> 內容只有 ie7 及 ie6 會顯現
<!-- [if gte IE 7]><!-->內容<!--<![endif] --> 內容在 ie7 及其較新版本，及 ie 以外的瀏覽器都會顯現
1. 在HTML使用條件式註解(IE10已不再支援)*運算子 說明
lt lower than
lte lower than or equal to
gt greater than
gte greater than or equal to
! not
( ) sub expression
& and
| or
若瀏覽器是IE7則使用IE7自動模式<!-- [if IE 7]> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <![endif] -->
若瀏覽器版本比IE7還舊，則使用Quirks Mode
<!-- [if lt IE 7]> <meta http-equiv="X-UA-Compatible" content="IE=5"/><![endif] -->
既有網站的因應
10
HttpBrowserCapabilities myBrowser = Request.Browser; HtmlMeta myMeta = new HtmlMeta(); myMeta.HttpEquiv = "X-UA-Compatible"; string Content = string.Empty;
if (myBrowser.Browser.Equals("IE")) {
switch (myBrowser.Version) {
case "5": case "6": Content = "IE=5"; break;
case "7": Content = "IE=EmulateIE7"; break;
default: Content = "IE=edge"; break;
}
}
myMeta.Content = Content; Page.Header.Controls.Add(myMeta);
2. 在後端程式判斷Client端瀏覽器版本後， 再動態插入META標籤
既有網站的因應
11
正確的DOCTYPE設定非常重要！
告訴瀏覽器XHTML/HTML符合哪個W3C標準版本
IE標準模式判讀和排版的依據
缺少DOCTYPE或格式錯誤時，IE會使用Quirks Mode
根據DOCTYPE設定選擇IE相容版本
一個字都不能錯！
• 正確格式可至W3C網站參考：http://www.w3.org/QA/2002/04/valid-dtd-list.html
(Document Type)
既有網站的因應
12
ASP.NET在IE10有部份功能異常，可安裝hotfix解決* A hotfix is available for the ASP.NET browser definition files in the .NET Framework 2.0
SP2 and in the .NET Framework 3.5 SP1
A hotfix is available for the ASP.NET browser definition files in the .NET Framework 3.5.1
A hotfix is available for the ASP.NET browser definition files in the Microsoft .NET
Framework 4.0
請持續追蹤 MDSN發布的消息
既有網站的因應
13
各大入口網站都怎麼做？
DEMO TIME
開發新網站的考量
14
舊版瀏覽器還有支援必要嗎？
• 已經不支援主流標準(ex: HTML5)
• 原廠已不再更新及維護
• 安全性考量
• 大廠紛紛不再支援過舊的版本
符合W3C標準化
• HTML5
• HTML 4.X
• ……
MVC Pattern
• 彈性
• 高度自主性
• 不必受限於控制項的限制
使用主流CSS Framework
• Twitter Bootstrap
• Less Framework
• Kube
• ……
使用主流JavaScript Framework
•Angular JS
•Ext JS
•jQuery
•Knockout JS
•……
邁向標準化*
15
事情總是充滿迷思
16
事情總是充滿迷思
17
Internet Explorer已經悔改了!?
Web Standards Project測試網址：http://acid3.acidtests.org/
IE 10 Firefox 22 Chrome 28 Opera 25
事情總是充滿迷思
18
Parts of the following standards are tested by Acid3*
HTTP 1.1 Protocol
DOM Level 2 Views
HTML 4.01 Strict
DOM Level 2 Traversal (subtests 1–6)
DOM Level 2 Range (subtests 7–11)
Content-Type: image/png; text/plain (subtests 14–15)
<object> handling and HTTP status codes (subtest 16)
DOM Level 2 Core (subtests 17, 21)
ECMAScript GC (subtests 26–27)
DOM Level 2 Events (subtests 17, 30–32)
CSS Selectors (subtests 33–40)
DOM Level 2 Style (subtest 45)
DOM Level 2 HTML (subtest 60)
Unicode 5.0 UTF-16 (subtest 68)
Unicode 5.0 UTF-8 (subtest 70)
HTML 4.0 Transitional (subtest 71)
SVG 1.1 (subtests 74, 78)
SMIL 2.1 (subtests 75–76)
SVG 1.1 Fonts (subtests 77, 79)
ECMAScript Conformance (subtests 81-96)
Data URI scheme (subtest 97)
XHTML 1.0 Strict (subtest 98)
事情總是充滿迷思
19
One more test for HTML5
IE 10 Firefox 22 Chrome 28 Opera 25
HTML5測試網址：http://html5test.com
Q&A
20