前端翻译：Activating Browser Modes with Doctype
生活随笔
收集整理的這篇文章主要介紹了
前端翻译：Activating Browser Modes with Doctype
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、前言
? 原本備份：?http://www.cnblogs.com/fsjohnhuang/p/3830623.html
? 由于本人英語能力有限，譯本內容難免有誤，望各位指正！
? 本譯文不含附錄部分，請知悉。
?
二、譯文內容
為了讓用戶正常訪問遵循Web標準的網站和90年代后期的非標準網站，當前的瀏覽器都內置了多種引擎模式。本文將解釋這些模式和它們觸發的原理。 本文概要（沒耐性的同學看完這個就可以閃了！） 本文結論：以<!DOCTYPE html>作為你們的HTML文檔（http頭的mime為text/http的文檔）的首行。 如果你們希望禁止用戶在使用IE8、9、10瀏覽你的網站時，不會因點擊地址欄旁的兼容性按鈕而導致網站以IE7的文檔模式被解析、渲染，那么就在HTTP頭那加上X-UA-Compatible: IE=Edage，或在<head></head>間加句<meta http-equiv="X-UA-Compatible" content="IE=Edge">吧。其實IE一般都會選擇合理的文檔模式，所以沒什么必要加上述IE獨有的魔咒。 本文的上下文 ? ? 本篇覆蓋Firefox、其他基于Gecko內核的瀏覽器、Safari、Chrome、其他基于Webkit內核的瀏覽器、Opera、Konqueror、IE 4 Mac，IE 4 Windows（包含4 WP）和其他IE內核的瀏覽器的模式轉換。并使用知名瀏覽器來代表各款內核描述模式轉換。 ? ? 本文重點講解模式選擇的機制而不是各種模式對應的 行為特征。目的是讓大家理解如何避免陳舊的模式，當然也不是旨在促進大家采用更良好的模式了。 各種模式text/html 內容的模式 一般來講doctype嗅探將影響text/html內容的模式。IE8+影響模式的要求就更加復雜，其中包含網站是否為內網網站，該網站有沒有添加到兼容性視圖列表當中。倘若IE6、7中安裝了Google Chrome Frame插件，那么就不僅doctype嗅探會影響text/html內容的模式了。（Google Chrome Frame其實就在IE6、7、8、9下使用Webkit作內核的插件） ? ? 怪異模式 ? ??? ? 怪異模式是瀏覽器為了正確呈現90年代后期制作的網頁，從而違反當前Web規范的模式。以前，各瀏覽器的怪異模式各不相同。IE6789的怪異模式其實就是IE5.5的文檔模式，而其他瀏覽器的怪異模式就稍微與近標準模式有偏差而已。但IE10開始，其怪異模式不再仿照IE5.5的文檔模式了，而是和其他瀏覽器的怪異模式相近了。
? ? 如果你正在開發一個新網站，千萬不要用怪異模式，用標準模式吧朋友。 ? ? ? 標準模式
? ??? ? 標準模式下，瀏覽器嘗試對網站提供HTML規范處理外，還提供瀏覽器獨有的各種特性。
? ??? ? 由于各瀏覽器對HTML規范實現的不同，所以各瀏覽器的標準模式不盡相同。 ? ??? ? 在HTML specification中標準模式被稱作“非怪異模式”。 ? ? ? 準標準模式
Firefox、Safari、Chrome、Opera（從7.5開始）、IE8910，有有“準標準模式”，其不按CSS2標準而實現了vertical sizing of table cells（求高手解答，這是啥啊？）。Mac IE5，Windows IE67,Opera7.5前的版本和Konquer均沒有準標準模式，因為它們在各自的標準模式中實現了vertical sizing of table cells。實際上，它們的標準模式更接近于近標準模式而不是現在瀏覽器的標準模式。 ? ??? ? 回顧歷史我們會發現，在不區分“標準模式”和“近標準模式”，默認使用“準標準模式”的行為特征，并使用“標準模式”的CSS特征會讓Web更美好。不過我們依然應優先使用“標準模式”。 ? ??? ? 在HTML specification中準標準模式被稱為“受限的怪異模式”。 application/xhtml+xml內容的模式（XML模式） ? ? ? ? Firefox,Safari,Chrome,Opera 和 IE9，HTTP頭的Content-Type為application/xhtml+xml會觸發XML模式。當處理XML模式時，上述瀏覽器會結合自身瀏覽器所提供的特征行為并符合標準規范來解析、處理XML文檔。 ·? ??? ?除了IE5外，IE678是不支持application/xhtml+xml的。 在基于Webkit內核的Nokia S60瀏覽器下，由于考慮到兼容性問題，即使HTTP頭的Content-Type為application/xhtml+xml是不會觸發XML模式的，而是采用移動終端范圍內的非規范內容處理XML（由于歷史遺留的移動瀏覽器沒有真實的XML解析器，因此XML會被標識為非規范話內容）。 ? ??? ? 我沒有在塞班自帶的瀏覽器上測試過，也沒有在Konqueror上作充分地測試，所以不敢保證其準確的行為模式。 IE特有的模式
以下的模式是IE獨有的，并不符合HTML5規范且其他瀏覽器均沒有實現的。通過在HTTP頭或meta元素設置X-UA-Compatible來觸發。 ? ??? ? IE5怪異模式 ? ??? ??? ? 除了和其他瀏覽器相近的怪異模式外，IE10還提供了一個“IE5怪異模式”，其實就是IE6789的怪異模式而已（IE5.5的文檔模式）。 ? ??? ? IE7標準模式 ? ??? ??? ? IE8910提供該模式用于模擬IE7的標準模式。 ? ??? ? IE8標準模式 ? ??? ??? ??IE910提供該模式用于模擬IE8的標準模式。 ? ??? ? IE8準標準模式 ? ??? ??? ??IE910提供該模式用于模擬IE8的準標準模式，但在開發者工具中，該模式和IE8標準模式是合并在一起的（譯者語：那怎么啟用準標準模式呢？？） ? ?? ???IE9標準模式 ? ??? ??? ??IE10提供該模式用于模擬IE9的標準模式。 ? ??? ? IE9準標準模式 ? ??? ??? ??IE10提供該模式用于模擬IE9的準標準模式，但在開發者工具中，該模式和IE9標準模式是合并在一起的（譯者語：那怎么啟用準標準模式呢？？）
? ??? ? IE9 XML模式 ? ??? ??? ??IE10提供該模式用于模擬IE9的XML模式，但在開發者工具中，該模式和IE9標準模式是合并在一起的。 ? ??? ? 其實并沒有任何價值去模擬這些臭名昭著的IE版本。例如，在IE10下使用IE9模式處理@font-face類 EOT 字體時和真實的IE9是不同的，前者由于IE10開始支持CSS 2D轉換，因此CSS屬性就不用帶-ms-前綴，而后者就需要-ms-前綴了。倘若你遵守本文提供的建議，那么你就不用理會這些模式了，因為這些不完美的模擬器并不會影響到你和你的產品。然而，更快捷的方式是在虛擬機上使用各款真實的舊版IE測試你的網站，而不是使用模擬器。 ? ??? ? WP8的IE10同樣擁有上述的所有模式，當然也是不完美的模擬器而已。 Google Chrome Frame下的IE特有的模式
? ??? ? 在IE6789下安裝了Google Chrome Framke插件，那么就會有一下的IE特有的模式（IE10開始沒有這些模式了）
? ??? ? Chrome 怪異模式 ? ??? ??? ? 就是Chrome下的怪異模式（不是IE5.5的文檔模式） ? ??? ? Chrome 標準模式 ? ??? ??? ? 就是Chrome下的標準模式 ? ??? ? Chrome 準標準模式 ? ??? ??? ? 就是Chrome下的準標準模式 ? ? 非Web的模式
? ??? ? 某些引擎擁有一些與Web無關的模式。列舉這些模式僅為本文內容的完整性而已，將不作深入。Opera有WML 2.0模式，在Mac OS X 10.5下的Webkit有個專為歷史遺留的Dashboard組件而設的模式。
? ? 模式的作用
? ??? ? 布局 ? ??? ??? ? 除了IE，text/html的模式主要影響CSS布局和樣式系統。例如，table中沒有樣式繼承是怪異模式的特性。在IE6789和Opera下，怪異模式就是IE5.5的文檔模式。本文無法一一列舉怪異模式下的所有布局特征。大家可以參考Mozllia's documentation和Quirks Mode specification。 ? ??? ??? ? 在準標準模式下，單元格內僅含圖片時，單元格的高度與標準模式的計算是不同的。 ? ??? ??? ? 在XML模式下，選擇器有不同的大小寫行為。例如，有些對于HTML的body元素的規則在那些沒有實現CSS新規范的舊瀏覽器中將失效。 ? ??? ? 解析 ? ??? ??? ? 在怪異模式下，會導致符合W3C標準的頁面的HTML和CSS解析出錯。這些錯誤伴隨著怪異模式的布局出現。注意，我們提及的怪異模式和標準模式的對決，主要針對CSS布局和CSS解析，而不是HTML解析。瀏覽器中有一個遵循HTML5規范的HTML解析器，更多請瀏覽 exactly one HTML parsing quirk。 ? ??? ??? ? 有些朋友誤認為標準模式就是doctype上的“strict parsing mode”，其實兩者沒啥關系。（2000年夏季時，網景6推出與"strict parsing mode"關聯的模式，就是"Strict DTD"，但因與現有網站均不兼容導致最終被廢除了） ? ??? ??? ? 另一個常見的誤解是關于XHTML的解析的。常常認為使用XHTML的doctype時，會觸發瀏覽器使用不同的DOM解析器。但由于HTTP頭的Content-Type依然是text/html，所以還是使用相同的HTML解析器。瀏覽器廠商意識到XHTML只是帶額外限制的HTML而已，所以僅僅當HTTP頭的Content-Type為application/xhtml+xml或application/xml時才觸發XML模式，并采用XML解析器替代HTML解析器。 ? ??? ? 腳本 ? ??? ??? ? 雖然怪異模式主要影響CSS，但也會影響到腳本。在Firefox14前的標準和準表尊模式下，HTML的id屬性都不會自動在全局范圍內創建dom對象的引用；僅當處于怪異模式下，document.all才部分生效。（譯者語：現在很多瀏覽器都實現了document.all了，因為好用嘛！）當你通過模擬器在個版本的IE上測試時，模式對腳本的影響會明顯。 ? ??? ??? ? 在XML模式下，部分DOM APIs的行為會與其他三種模式的很不同，這是由于XML和HTML定義的DOM API本來就不兼容而導致。悲催了吧！ ? ? Doctype嗅探（就是Doctype切換）
? ??? ? 瀏覽器通過doctype嗅探來決定text/html內容的使用哪種引擎模式。也就是說模式是取決于<!DOCTYPE html>這句的。 ? ??? ? doctype是SGML的語法（HTML5前的標記框架，僅用于聲明HTML的版本信息，而不能用于區分是SGML還是XML文檔）。 ? ??? ? 但無論是HTML4.01還是ISO 8879（SGML）都沒有標明可以通過doctype來切換瀏覽器的引擎模式。而設計通過doctype來切換瀏覽器的引擎模式，是由于大部分使用怪異模式的網站均沒有寫<!DOCTYPE html>或指向舊的DTD，所以就采用doctype來做切換開關了。而在HTML5規范設計的時候發現doctype的最實際用途就是用來切換模式而已，所以最后得到最簡的doctype "<!DOCTYPE html>" ? ??? ? 過去的doctype格式：<!DOCTYPE 根節點標簽名 PUBLIC "公共標識符" "系統標識符"> ? ??? ? 教你選擇doctype ? ??? ??? ? 下面是簡單的教程，讓你為你的新網站（text/html）選擇合適的doctype。 ? ??? ??? ? 1. 標準模式，可驗證最新特性 ? ??? ??? ??? ? <!DOCTYPE html> ? ??? ??? ??? ? 建議使用該doctype，它會驗證最新的特性（如，<video>、<canvas>等） ? ??? ??? ? 2. 標準模式，不驗證最新特性，是歷史遺留的嚴格模式 ? ??? ??? ??? ? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/strict.dtd"> ? ??? ??? ? 3. 準標準模式，不驗證最新特性，是歷史遺留的松散模式 ? ??? ??? ??? ? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd"> ? ??? ??? ? 4. 怪異模式，沒有doctype ? ??? ??? ??? ? 最好不要這樣做，否則你會后悔的。 ? ??? ??? ??? ? 加入因客戶需求導致你不得不考慮怪異模式，那請你使用IE的條件注釋而不是省去doctype吧。 ? ??? ??? ??? ? 我不建議使用XHTML的doctype，以為將XHTML作為text/html處理是有害的。如果你使用XHTML作為doctype，在IE6下會切換為怪異模式。 ? ??? ??對application/xhtml+xml ? ??? ??? ? 沒有必要使用doctype。沒有doctype時，網頁就不一定需要嚴格遵循XHTML1.0規范，但也沒必要遵守。 ? ??? ??? ?? ? ? IE8、9、10的復雜問題
? ??? ? 從IE8開始可通過meta元素來切換模式。 ? ??? ? IE8有4種模式：IE5.5怪異模式，IE7標準模式，IE8準標準模式和IE8標準模式；IE9有7種模式：IE5.5怪異模式，IE7標準模式，IE8準標準模式，IE8標準模式，IE9準標準模式，IE9標準模式和IE9XML模式；IE10有11中模式，IE5.5怪異模式，IE7標準模式，IE8準標準模式，IE8標準模式，IE9準標準模式，IE9標準模式，IE9XML模式，IE5.5怪異模式，IE7標準模式，IE8準標準模式，IE8標準模式，IE10準標準模式，IE10標準模式和IE10XML模式。 ? ??? ? 而使用哪種模式依賴于以下設置項： ? ??? ??? ? 1. doctype ? ??? ??? ? 2. meta元素 ? ??? ??? ? 3. HTTP頭設置 ? ??? ??? ? 4. 周期性從微軟下載的數據 ? ??? ??? ? 5. 用戶或內網管理員的內網區域設置 ? ??? ??? ? 6. 父框架的模式（應用內嵌瀏覽器的模式取決于應用本身） ? ??? ? 幸運的是，IE8、9在符合下列條件時會行為模式和其他瀏覽器大概相似，而IE10就精準相似了。 ? ??? ??? ? 1. 沒有將X-UA-Compatible加入到HTTP頭中； ? ??? ??? ? 2. 沒有將X-UA-Compatible加入到meta中； ? ??? ??? ? 3. 微軟沒有將該域名加入到它的黑名單中； ? ??? ??? ? 4. 內網管理員沒有將該網站（域名或IP）加入到黑名單中； ? ??? ??? ? 5. 用戶沒有點擊兼容性視圖按鈕（僅HTTP或HTTPS協議時才會自動出現），且沒有將該網站（域名或IP）加入到本地的和黑名單中； ? ??? ??? ? 6. 網站不是內網區域網站； ? ??? ??? ? 7. 用戶沒有選擇使用IE7模式來顯示所有網站； ? ??? ??? ? 8. 網頁的父框架沒有使用兼容性模式。 ? ??? ? 在IE8、9中使用兼容性視圖，實際上就是使用模擬IE7模式。 ? ??? ? 不幸的是，如果在IE8、9中沒有X-UA-Compatible的HTTP頭或meta元素時，即使你添加了合適的doctype，瀏覽器依然允許用戶自行回退到模擬IE7模式中。更糟的是，內網管理員也可以這樣做。 ? ??? ? 鑒于上述情況，doctype已經不足以確保你的文檔模式了，于是你需求求助于X-UA-Compatible，無論是在HTTP頭還是meta元素。 ? ??? ? 下面是簡單的教程，告訴在已經通過doctype觸發標準模式的情況下，如何選擇X-UA-Compatible的HTTP頭或meta元素了。 ? ??? ? 1. 關注點：你的網站不在微軟的黑名單中，而且你更關心避免依賴瀏覽器各版本特有的特征，而不是用戶使用模擬IE7模式解析網站。 ? ??? ??? ? 建議：無需添加X-UA-Compatible了。 ? ??? ? 2. 關注點：你的網站在微軟的黑名單中，而且你不希望用戶使用模擬IE7模式解析網站。 ? ??? ??? ? 建議：添加<meta http-equiv="X-UA-Compatible" content="IE=Edge">或HTTP頭上添加X-UA-Compatible: IE=Edge ? ??? ? 3. 關注點：在IE8、9下使用模擬IE7標準模式 ? ??? ??? ? 建議：添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">或HTTP頭上添加X-UA-Compatible: IE=EmulateIE7。然后不要依賴非IE7的行為特征 ? ??? ? 4. 關注點：在IE9下使用模擬IE8標準模式 ? ??? ??? ? 建議：添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">或HTTP頭上添加X-UA-Compatible: IE=EmulateIE8。然后不要依賴非IE8的行為特征 5. 關注點：在IE10下使用模擬IE9標準模式 ? ??? ??? ? 建議：添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">或HTTP頭上添加X-UA-Compatible: IE=EmulateIE9。然后不要依賴非IE9的行為特征 ? ??? ?? ? ? Google Chrome Frame的復雜問題
? ??? ? Google Chrome Frame是IE6789下讓IE使用Webkit內核的瀏覽器插件。安裝后，IE默認還是用回Trident內核，但可以通過X-UA-Compatible切換為Webkit內核。
? ??? ? X-UA-Compatible: chrome=1，會觸發切換到Webkit內核；X-UA-Compatible: chrome=IE6，表示IE6時觸發切換到Webkit內核；X-UA-Compatible: chrome=IE7，表示IE6和IE7時觸發切換到Webkit內核。 ? ??? ? Chrome Frame的X-UA-Compatible指令可以和IE本身的指令一起使用，如<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"> ? ??? ? 一旦切換成Webkit內核，那么就使用Google Chrome Frame下的IE特有的模式。 ? ??? 建議不要使用Chrome Frame： ? ??? ? 1. 由于該插件沒有得到IE在可訪問性上的支持，所以通過屏幕閱讀器和Windows語言識別器是無法訪問該插件的內容的； ? ??? ? 2. 需要客戶端安裝該插件。
總結
以上是生活随笔為你收集整理的前端翻译：Activating Browser Modes with Doctype的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从最大似然到EM算法浅解（转载）
- 下一篇： CutJS – 用于 HTML5 游戏开