[基礎知識] 向後相容的 Quirks Mode (接縫模式) 與 DOCTYPE (文件型態) 宣告意義與特性整理
|
[基礎知識] 向後相容的 Quirks Mode (接縫模式) 與 DOCTYPE (文件型態) 宣告意義與特性整理 |
September 05, 2011 02:30PM 發表文章數: 1,006 |
一、目的：
此文件編寫目的為給視傳相關科系大一新生之「網頁設計」課程作為相關教材（當然，對一般對網頁設計有興趣的朋友也是相當適合的）。此文的內容提供 DOCTYPE 宣告語法的介紹，編寫目的為讓讀者了解宣告與不宣告 DOCTYPE 的差異與避免讓網頁進入當初為了相容舊型瀏覽器而生的「接縫模式 / 轉折模式」Quirks Mode。
一般視傳相關科系的學生（或甚至老師）的學習要點多重於「視覺」與「設計」部份，而容易對一些「語法」或「規則」部份有所忽略。「DOCTYPE」即為一般常忽略的一個要點，也讓許多網頁會進入「Quirks Mode」。也因此，宣告與不宣告之間，在不同瀏覽器的呈現之下就往往產生很不一樣的結果。
目前文章編寫中，請見此主題之百科介紹：http://mepopedia.com/?page=866
二、DOCTYPE 的宣告
有關 DOCTYPE 宣告的部份，建議可以下列 HTML5 新制定的語法宣告。這個語法不僅可以讓網頁支援最新的 HTML5 語法，也可相容 IE6、IE7、Max IE5等舊型瀏覽器，是一個既簡潔又可相容新、舊瀏覽器的語法：
<!DOCTYPE html>
(HTML 5 新式宣告)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(HTML 4.01 舊式宣告)
不過比較仔細的同學可能會有這樣的疑惑：新式宣告裡面什麼也沒有，沒有寫 HTML 4.01 或 XHTML 1.0 等資訊，那瀏覽器怎麼知道是用什麼模式讀取網頁？又或者，舊型瀏覽器開發的時候又沒有 HTML5，它怎麼知道 HTML5 是用這樣的宣告？
就我的了解是這樣的。在文件型態（DOCTYPE）的宣告原則中，因為已假設會使用 DOCTYPE 的網頁設計者是「內行人」，也就是說知道要宣告 DOCTYPE 才會進入使用官方語法的「標準模式」才會使用，所以就算宣告得比較不完整或比較簡略，也都沒有問題，都會進入「標準模式 Standard Mode」。
所以，對舊型瀏覽器而言，它雖然不知道什麼是 HTML5，但還是會進入標準模式（儘管是使用 HTML4.01）。而對新式瀏覽器而言，當然就更沒有問題，直接進入支援 HTML5 的標準模式了。
最後，提了這麼多的「標準模式」倒底是什麼呢？基本上就是相較於 Netscape 和 Internet Explorer 還在大戰時的「一套標準各自解讀」時期，各家舊瀏覽器的「各自解讀」模式，到後來約 2000年推出完整支援 CSS (CSS Level1) 的 Mac IE5，才開始支援 HTML/CSS 標準語法的「標準模式」。但，進入了大家（勉為其難）開始支援標準模式的時期，那舊時代的網頁怎麼辦？所以就發明了一種模式叫作 Quirks Mode，專門用以處理舊式設計規則的網頁。因為舊式網頁當然沒有 DOCTYPE 的宣告，所以，「不要宣告 DOCTYPE」就會進入屬於舊瀏覽器模式的 Quirks Mode。
最後的最後要提醒在設計網頁時要記得加上 <!DOCTYPE html> 的宣告，這樣網頁才不會被歸類為「舊時代的產物」，也才能讓 CSS 的相關語法「正確／正常」地將功能呈現。
相關詳細的說明與相容性整理可見維基百科（英文）：
http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types
三、
1. HTML 的三種文件模式宣告：Quirks Mode、Standard Mode、Almost Standard Mode
Quirks Mode 的產生原因
2. 文件型態宣告 (DOCTYPE Declaration) 規則說明
3. 錯誤範例與正確實例
Quirks Mode 的翻譯：
Quirks Mode 會用 quirk 這個字應該是取自其動詞用法「使形成皺摺」以及建築用語「溝槽」，指兩面牆面或兩個凸面之間的接縫，更古早一點有這種說法「a quirk of fate 命運的轉折」。
或許可以翻作或者「接縫模式」或者「轉折模式」？
(by gustav)
此文件編寫目的為給視傳相關科系大一新生之「網頁設計」課程作為相關教材（當然，對一般對網頁設計有興趣的朋友也是相當適合的）。此文的內容提供 DOCTYPE 宣告語法的介紹，編寫目的為讓讀者了解宣告與不宣告 DOCTYPE 的差異與避免讓網頁進入當初為了相容舊型瀏覽器而生的「接縫模式 / 轉折模式」Quirks Mode。
一般視傳相關科系的學生（或甚至老師）的學習要點多重於「視覺」與「設計」部份，而容易對一些「語法」或「規則」部份有所忽略。「DOCTYPE」即為一般常忽略的一個要點，也讓許多網頁會進入「Quirks Mode」。也因此，宣告與不宣告之間，在不同瀏覽器的呈現之下就往往產生很不一樣的結果。
目前文章編寫中，請見此主題之百科介紹：http://mepopedia.com/?page=866
二、DOCTYPE 的宣告
有關 DOCTYPE 宣告的部份，建議可以下列 HTML5 新制定的語法宣告。這個語法不僅可以讓網頁支援最新的 HTML5 語法，也可相容 IE6、IE7、Max IE5等舊型瀏覽器，是一個既簡潔又可相容新、舊瀏覽器的語法：
不過比較仔細的同學可能會有這樣的疑惑：新式宣告裡面什麼也沒有，沒有寫 HTML 4.01 或 XHTML 1.0 等資訊，那瀏覽器怎麼知道是用什麼模式讀取網頁？又或者，舊型瀏覽器開發的時候又沒有 HTML5，它怎麼知道 HTML5 是用這樣的宣告？
就我的了解是這樣的。在文件型態（DOCTYPE）的宣告原則中，因為已假設會使用 DOCTYPE 的網頁設計者是「內行人」，也就是說知道要宣告 DOCTYPE 才會進入使用官方語法的「標準模式」才會使用，所以就算宣告得比較不完整或比較簡略，也都沒有問題，都會進入「標準模式 Standard Mode」。
所以，對舊型瀏覽器而言，它雖然不知道什麼是 HTML5，但還是會進入標準模式（儘管是使用 HTML4.01）。而對新式瀏覽器而言，當然就更沒有問題，直接進入支援 HTML5 的標準模式了。
最後，提了這麼多的「標準模式」倒底是什麼呢？基本上就是相較於 Netscape 和 Internet Explorer 還在大戰時的「一套標準各自解讀」時期，各家舊瀏覽器的「各自解讀」模式，到後來約 2000年推出完整支援 CSS (CSS Level1) 的 Mac IE5，才開始支援 HTML/CSS 標準語法的「標準模式」。但，進入了大家（勉為其難）開始支援標準模式的時期，那舊時代的網頁怎麼辦？所以就發明了一種模式叫作 Quirks Mode，專門用以處理舊式設計規則的網頁。因為舊式網頁當然沒有 DOCTYPE 的宣告，所以，「不要宣告 DOCTYPE」就會進入屬於舊瀏覽器模式的 Quirks Mode。
最後的最後要提醒在設計網頁時要記得加上 <!DOCTYPE html> 的宣告，這樣網頁才不會被歸類為「舊時代的產物」，也才能讓 CSS 的相關語法「正確／正常」地將功能呈現。
相關詳細的說明與相容性整理可見維基百科（英文）：
http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types
三、
1. HTML 的三種文件模式宣告：Quirks Mode、Standard Mode、Almost Standard Mode
Quirks Mode 的產生原因
2. 文件型態宣告 (DOCTYPE Declaration) 規則說明
3. 錯誤範例與正確實例
Quirks Mode 的翻譯：
Quirks Mode 會用 quirk 這個字應該是取自其動詞用法「使形成皺摺」以及建築用語「溝槽」，指兩面牆面或兩個凸面之間的接縫，更古早一點有這種說法「a quirk of fate 命運的轉折」。
或許可以翻作或者「接縫模式」或者「轉折模式」？
(by gustav)
Edited 4 time(s). Last edit at 09/29/2011 04:35PM by mepoadm.
(編輯記錄)
MEPO forum
is powered by Phorum.