在XHTML文檔中合適的使用CSS和JavaScript

在XHTML文檔中合適的使用CSS和JavaScript XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) 定義XHTML是為了把HTML 4擴充成像XML 1.0一樣的應用程式。

在許多網站中XHTML正在迅速的替代HTML 4；然而，主流瀏覽器對完全支援XHTML方面表現得不足，和網頁設計師對HTML 4與XHTML的基本差異缺乏理解，產生了當今網路上的一個不斷擴大的問題。

XHTML是XML,不是HTML

其中關於XHTML的主要的誤解是，它僅僅是另外一個版本的HTML。這個誤解產生於這樣的事實：Microsoft Internet Explorer只在檔案以Mime類型為 text/html提交時，才支援XHTML，而標準中建議的類型其實是application/xhtml+xml。

當一個XHTML頁面的MIME類型被提交為text/html時，它被所有的瀏覽器當作HTML處理，就好像XHTML比起HTML來沒有任何不同。但是當一個XHTML頁面的MIME類型被提交為text/xml或application/xhtml+xml時，它將被當作XML文檔處理，而設計和顯示XML都是必須要遵守嚴格規則的。

真正的XHTML就是一個XML的應用，所以建立XHTML時也要遵守嚴格的規則。特別是：

1. 未經過處理的<和&不允許出現在CDATA地區（<!CDATA...>）之外。
2. 注釋(<!—— ... ——>)中不能包含雙橫線。
3. 包含在注釋(<!—— ... ——>)中的內容將被忽略。

在內嵌的style和script中出現的問題

在被當作XML而不是HTML處理時，內嵌的style和script標記會產生幾個不同的問題。

JavaScript中包含了一些在XHTML中不允許存在的字元

典型的JavaScript中包含了一些特殊字元，這些字元在XHTML中是不允許放在CDATA地區之外的。

<script type="text/javascript">  var i = 0;    while (++i < 10)  {    // ...  }</script>

注意這個例子不是以正確格式書寫的XHTML，因為使用了未經處理的“<”，它只能在被當作XHTML或XML標記的一部分時出現。

在內嵌的style和script中使用注釋

熟悉HTML的設計師通常把內嵌的style和script內容放到注釋中，這樣可以在不支援樣式和指令碼的瀏覽器中隱藏它們。

<style type="text/css"> <!--  body {background-color: blue; color: yellow;} --></style><script type="text/javascript"> <!--  var i = 0;  var sum = 0;   for (i = 0; i < 10; ++i)  {    sum += i;  }  alert('sum = ' + sum); // --></script>

這個例子舉例說明了特定的瀏覽器可以忽略注釋裡的內容。另外，這個例子還顯示了不同的瀏覽器在處理text/xml或者 application/xhtml+xml內容時產生的不同問題。

Mozilla 1.1+/Opera 7

不能使用CSS，也不能執行JavaScript。

Netscape 7.0x/Mozilla 1.0.x

不能使用CSS，但可以執行JavaScript。

Internet Explorer 5.5+

無法正常顯示文檔。

包含雙橫線的內嵌style和script

另一個把JavaScript包含在XHTML檔案的注釋中產生的問題，與在XHTML的注釋中使用雙橫線會產生的問題一樣。

<script type="text/javascript"><!--  var i;  var sum = 0;  for (i = 10; i > 0; --i)  {    sum += i;  }// --></script>

使用CDATA替代注釋

直接把JavaScript放入CDATA地區會在低版本不支援XML的瀏覽器中產生問題，不過，把JavaScript的注釋(//……)與CDATA一起使用，就能解決向下相容的問題了。

<script type="text/javascript"> //<![CDATA[  var i = 0;  while  (++i < 10)  {    // ...  } //]]></script>

例子

在注釋中使用內嵌style的CSS規則

例子1 - XHTML 1.0 Strict在text/html

這個 例子舉例說明當CSS規則包含內聯和包含在注釋中時的XHTML在text/html的行為。這個例子支援Netscape 7.x，Mozilla，Opera 7和Internet Explorer 5.5+那一個都能像期望一樣應用CSS規則。

例子2 - XHTML 1.0 Strict在text/xml

這個 例子舉例說明當CSS規則包含內聯和包含在注釋中時的XHTML在text/xml的行為。這個例子支援Netscape 7.x，Mozilla，Opera 7但 不支援Internet Explorer 5.5+。注意etscape 7.x，Mozilla和Opera同意包含在注釋的內聯CSS規則將被忽略。

例子3 - XHTML 1.0 Strict在application/xhtml+xml

這個 例子舉例說明當CSS規則包含內聯和包含在注釋中時的XHTML在application/xhtml+xml的行為。這個例子支援Netscape 7.x，Mozilla，Opera 7但 不支援Internet Explorer 5.5+。注意etscape 7.x，Mozilla和Opera同意包含在注釋的內聯CSS規則將被忽略。

使用外部檔案的CSS規則

例子4 - XHTML 1.0 Strict在text/html

這個 例子舉例說明當在使用外部檔案的CSS規則的時候XHTML在text/html的行為。這個例子支援Netscape 7.x，Mozilla，Opera 7和Internet Explorer 5.5+。

例子5 - XHTML 1.0 Strict在text/xml

這個 例子舉例說明當在使用外部檔案的CSS規則的時候XHTML在text/xml的行為。這個例子支援Netscape 7.x，Mozilla和Opera 7但不支援 不支援Internet Explorer 5.5+。

例子6 - XHTML 1.0 Strict在application/xhtml+xml

這個 例子舉例說明當在使用外部檔案的CSS規則的時候XHTML在application/xhtml+xml的行為。這個例子支援Netscape 7.x，Mozilla和Opera 7但不支援 不支援Internet Explorer 5.5+。

建議

不要在XHTML中內聯style或script

用外部檔案包含CSS規則和JavaScript來替換內聯樣式和指令碼是建立XHTML最佳方式，在向後相容方式時，如果內容的MIME類型從text/html向application/xhtml+xml改變時將不會被打斷。

這個建議可能看起來更強烈，可是，它是未來XHTML要打算的問題，當XHTML在text/html向application/xhtml+xml轉移在幾年後發生。

如果你僅僅測試你的XHTML在text/html的時候，那麼你可能產生問題，例如像：不能準確的描述出主題。移動CSS和JavaScript到單獨的檔案是可靠的方法，關於改變你XHTML的服務方式。

理解XHTML 1.0的HTML相容指導

這個XHTML 1.0 HTML Compatibility Guidelines協助建立XHTML文檔向後相容性在那些不能理解XML的老瀏覽器。

請注意那是純粹的XHTML文檔，你不需要使用xml-stylesheet處理指導，但應該使用link涉及的外部檔案包含CSS。