前端翻譯：Activating Browser Modes with Doctype

時間 2019-11-12

標籤前端翻譯 activating browser modes doctype 简体版

原文原文鏈接

1、前言　　　　　　　　　　　　　　　　　　　　　　　　html

本來備份： http://www.cnblogs.com/fsjohnhuang/p/3830623.htmlchrome

因爲本人英語能力有限，譯本內容不免有誤，望各位指正！canvas

本譯文不含附錄部分，請知悉。瀏覽器

2、譯文內容　　　　　　　　　　　　　　　　　　　　　　app

爲了讓用戶正常訪問遵循Web標準的網站和90年代後期的非標準網站，當前的瀏覽器都內置了多種引擎模式。本文將解釋這些模式和它們觸發的原理。

本文概要（沒耐性的同窗看完這個就能夠閃了！）

本文結論：以<!DOCTYPE html>做爲大家的HTML文檔（http頭的mime爲text/http的文檔）的首行。

若是大家但願禁止用戶在使用IE八、九、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+影響模式的要求就更加複雜，其中包含網站是否爲內網網站，該網站有沒有添加到兼容性視圖列表當中。假若IE六、7中安裝了Google Chrome Frame插件，那麼就不只doctype嗅探會影響text/html內容的模式了。（Google Chrome Frame其實就在IE六、七、八、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規範，但也不必遵照。

IE八、九、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. 父框架的模式（應用內嵌瀏覽器的模式取決於應用自己）

幸運的是，IE八、9在符合下列條件時會行爲模式和其餘瀏覽器大概類似，而IE10就精準類似了。

1. 沒有將X-UA-Compatible加入到HTTP頭中；

2. 沒有將X-UA-Compatible加入到meta中；

3. 微軟沒有將該域名加入到它的黑名單中；

4. 內網管理員沒有將該網站（域名或IP）加入到黑名單中；

5. 用戶沒有點擊兼容性視圖按鈕（僅HTTP或HTTPS協議時纔會自動出現），且沒有將該網站（域名或IP）加入到本地的和黑名單中；

6. 網站不是內網區域網站；

7. 用戶沒有選擇使用IE7模式來顯示全部網站；

8. 網頁的父框架沒有使用兼容性模式。

在IE八、9中使用兼容性視圖，實際上就是使用模擬IE7模式。

不幸的是，若是在IE八、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. 關注點：在IE八、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. 須要客戶端安裝該插件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。