原文:
http://www.456bereastreet.com/archive/200501/the_perils_of_using_xhtml_properly/
作者:
Roger Johansson
翻譯:
Neo
(
http://www.omemo.net/neo
)
修正:
JunChen
JunChen
注:omemo.net網站似乎已經掛掉,鏈接都失效了。文章寫得非常不錯,一直是Best of 456 Berea Street。在這里發布的時候我進行了少量代碼上和翻譯上的修改,以忠實原著。
我使用XHTML有些年了,但直至去年夏天我才著眼于如何正確使用,那就是說,以application/xhtml+xml
的MIME類型來伺服(server)它。雖然我遇到了這些問題,但我知道問題遠非如此。就如你即將發現的一樣,當你開始使用真正的XHTML,你會遭遇很多似乎細小但讓人困惑的問題。
請注意這不是一篇討論支持或反對使用XHTML的文章。我只是寫下我所知道的潛在的易犯錯誤,并且讓你自己來決定自己的選擇:HTML 4.01,為所有瀏覽器伺服為text/html
的XHTML 1.0或者為能夠處理其的瀏覽器伺服為application/xhtml+xml
而其他瀏覽器則伺服為text/html
的XHTML 1.0。否則有些東西會完全不一樣。
只有在問題發生的時候,我才有機會去了解和認識這些東西。有些情況下我必須花很多時間來查找問題和求助于其他人,來尋求一個解決方案。但我在其中學到不少東西,我會把我已經使用XHTML后應該知道的都告訴你。
注意我這里提及的問題只會發生在能正確處理application/xhtml+xml
MIME類型的用戶代理中,而因此XHTML被作為XML。這也可能是這里不提及XHTML的早期使用的原因——很少有人使用這樣的瀏覽器,所以幾乎不會有人因只伺服為text/html
的XHTML所煩憂。
今天,實際上把XHTML伺服為application/xhtml+xml
正慢慢變得平常。我所知道的理由有兩個:
-
使用Firefox,Mozilla,Opera,Safari和其他兼容XHTML瀏覽器的人數增加了很多,所以你不再僅僅為自己和伙伴這樣做。嗯。或許你就這樣做,當將影響更多人。
-
在web開發者之間,對XHTML的真正面目是什么的覺醒越來越多了。使用XHTML已經有多次多時的熱烈的討論,尤其是伺服為
text/html
的時候。如果你參與了任何一次討論,你知道我在說什么。
假如你,像我,決定實現某些類型的content negotiation和在傳送XHTML的時候使用正確的媒體類型,你需要知道什么能(和將)在你發布的文檔中發生,并且知道怎樣避免問題的發生。對于對content negotiation同進行content negotiation的腳本例子有興趣的讀者,我推薦你閱讀
Content Negotiation
和
Serving up XHTML with the correct MIME type
。還有很多這種類型的文章,但這是我讀到的最精彩的兩篇。
每一個基本的教程都有一些HTML和XHTML的明顯區別:元素和屬性名字使用小寫,屬性值總要用引號。不要使用簡化屬性,確保所有的元素都有結束標簽和沒有不正確的嵌套等等。但是,當XHTML伺服為application/xhtml+xml
時還需要知道更多東西。
良好的結構是必須的
文檔必須是良好的結構(well-formed)的XML(跟合法的(valid)XHTML不必然相同)。就是必須,不是可能。
如果文檔結構不好,符合標準的瀏覽器(當前我知道Mozilla,Firefox,Netscape,Camino,Opera,Safari和OmniWeb——相當多的瀏覽器除了IE)將會顯示錯誤信息并且以某種方式中止處理文檔。
此外,這還意味著不再使用未編碼的"&"號。
XML聲明可能是必須的
如果要使用UTF-8或者UTF-16以外的變法,必須要XML聲明,除非HTTP頭已經提供編碼。
在HTTP頭中是否要指定字符編碼有些模糊,Architecture of the World Wide Web, Volume One: Media Types for XML這樣寫的:總體上,不應該在協議頭為XML數據指定字符編碼,因為數據本身已描述。
另一方面,XHTML 1.0, Second Edition: Character Encoding寫到:
為了讓文檔使用指定的字符編碼,最好的辦法是保證web服務器發送正確的頭。
就是說,在XML聲明中指定字符編碼是好的習慣:
<?xml version="1.0" encoding="iso-8859-1"?>
只有五個實體是安全的
只有五個預定義的實體(<
, >
, &
, "
, 和'
)的支持是有保證的。其他的可能完全被忽略或者直接輸出。比如,如果XHTML文檔包含如
或者”
的實體,Safari會直接地輸出。Opera反而選擇忽略未知的實體,同時Mozila家族會認得這些實體并且就像HTML中“如果文檔引用公共的映射瀏覽器偽DTD目錄中的標識符并且沒有單獨聲明的文檔”
來處理。
使用UTF-8字符編碼是最受推薦的,讓你(幾乎)可以使用你需要鍵入文檔的任意字符,不需要實體或者字符編號。如果你不能或不愿使用UTF-8,數字式的字符編號是可以支持和安全使用的。
SGML式注釋的內容可能會被忽略
SGML注釋(HTML風格注釋, <!-- 注釋 -->
)可能會(并且會)被瀏覽器當作注釋,就算是在script
或者style
元素內部使用。
在HTML中,普遍地把script
和style
的內容裝入注釋中,為的是在不認識script
或style
元素的瀏覽器中隱藏他們,并且在頁面上把其內容生成平白文本。
在XHTML中,這樣做會引起瀏覽器忽略掉注釋里的任何內容。
在老的瀏覽器中隱藏script
和style
的習慣可以追溯到1990年代中期。我的經驗是,有如此表現的瀏覽器是十分罕見的,所以你可以安全地忽略它們,并且停止在腳本和樣式中裝入SGML式注釋,就算你使用的是HTML。
腳本和樣式元素的內容也被當作XML
樣式和腳本元素是PCDATA(parsed character data,解析字符數據)塊,不是CDATA(character data,字符數據)塊。因此,在其內看起來像XML的任何東西都會被當作XML來解析,并且會引發錯誤除非是良構的。
為了在script
或style
塊中使用<、&或者--,你需要用
CDATA
:
<
script?
type
="text/javascript"
>
<!
[CDATA[


]]
>
</
script
>
在CDATA里,你可以任何順序的字符,它們不會被當作XML來解析(除了結束CDATA部分]]>)。
需要以text/html
發送的文檔中,CDATA部分的起始和結束標簽需要注釋掉,以便在不能處理CDATA部分的瀏覽器中隱藏:
<
script?
type
="text/javascript"
>
//
?<![CDATA[
//
?]]>
</
script
>
<
style?
type
="text/css"
>
/**/
/*
?<![CDATA[?
*/
/**/
/*
?]]>?
*/
</
style
>
如果要確保很老的瀏覽器隱藏CDATA部分,需要使用更為復雜的方法,像在Ian Hickson的Sending XHTML as text/html Considered Harmful中描述的那樣:
<
script?
type
="text/javascript"
>
<!--
//
--><![CDATA[//><!--
//
--><!]]>
</
script
>
<
style?
type
="text/css"
>
<!--
/**/
/*
--><![CDATA[/*><!--
*/
/**/
/*
]]>
*/
-->
</
style
>
一個更好的辦法可能是在發送text/html
的文檔前使用content negotiation腳本來刪除任何CDATA部分。
當然,最聰明和安全的途徑是把所有的CSS和JavaScript都移動到外部文件中,但不總是現實的做法。
沒有會自動補全的元素
在HTML中,假如表格的tbody
元素漏寫的話瀏覽器會自動補全,而XHTML不會。如果你沒有清楚地添加tbody,它就不會出現。在編寫CSS選擇器和JavaScript的時候請銘記在心。
用document.write編寫的腳本不再工作
在XHTML中使用JavaScript,document.write
不會工作。Ian Hickson在
Why document.write() doesn’t work in XML
解釋了原因。你需要使用document.createElementNS()
代替。關于更多可以在
Experts Exchange中的論壇主題
中找到。
這也是Google AdSense不在XHTML中工作的原因之一。那些希望以application/xhtml+xml伺服XHTML并且使用Google廣告的人,這兒有一個解決辦法:Simon Jessey的
Making AdSense work with XHTML
。盡管有點麻煩,但還是工作了(我在這里也使用了),同時被Google所認可。
引入樣式元素
在XHTML中,為了兼容定義CSS規則的XML方法,你應該使用XML樣式表聲明(訪問
XHTML
1.0, Second Edition: Referencing Style Elements when serving as XML
的XML樣式表聲明和
Associating Style Sheets with XML documents
的xml-stylesheet處理說明)。要載入外部CSS文件,我們需要使用style
元素,同時應該使用XML樣式表聲明來引入樣式元素。為此,使用id屬性給style
元素一個分解的標識符,然后在XML樣式表聲明中引入該標識符:
<?
xml-stylesheet?href="stylesheet1.css"?type="text/css"
?>
<?
xml-stylesheet?href="#stylesheet2"??type="text/css"
?>
<!
DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<
html?
xmlns
="http://www.w3.org/1999/xhtml"
?xml:lang
="en"
?lang
="en"
>
<
head
>
<
title
>
XML?stylesheet?declaration
</
title
>
<
style?
type
="text/css"
?id
="stylesheet2"
>
@import?"stylesheet2.css";
</
style
>
</
head
>
我不知道在實際中究竟有多必要,并且不使用XML樣式表聲明的話會有什么問題?;蛟S有人會指點我的。
CSS的應用規則有些不一樣
CSS應用到body
的性質(property)并不應用到XHTML的整個文檔。最值得注意的是應用背景顏色或者圖片。在HTML中,應用到body
元素的背景將會覆蓋整個頁面。在XHTML中,你必須同時樣式化html。在Juicy Studio的
CSS body Element Test
中有這個行為的演示。
在XHTML中作為CSS規則的元素和屬性名字是大小寫敏感的(而且必須是小寫的)。避免問題最簡單的辦法是,不管在HTML,XHTML還是CSS中所有東西都保持小寫。
有挑戰,但不是不可能
當我開始為兼容的瀏覽器伺服XHTML為application/xhtml+xml
時,在作出決定前假如我能讀到想這篇一樣的文章,或許我的頭痛可以減輕不少。我甚至考慮使用HTML 4.01 Strict
。雖然如此,我還是從經驗中學到不少,而學習總是一個好東西。
正確地使用真正的XHTML,十分希望這篇文章能為你提供一些更有用的信息,并且可以為是否需要走這條路提供更多有根據的決定。
HTML
和XHTML可能比我在這里提到的還有更多地不同,所以在這里把你在使用application/xhtml+xml
的XHTML時遇到的問題提出來,如果你知道任何的錯誤或者忽略,務必告訴我。