原文 (重大更新中)

• 翻譯：Daniel Wang、趙柏強
• 原作：Mike Cowperthwaite, Marcio Galli, Jim Ley, Ian Oeschger, Simon Paquet, Gérard Talbot

Browser makers are no longer the problem. The problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers.

瀏覽器開發人再也不是問題所在了。現在問題是有許多設計師與開發人被鎖定在 90 年代，以瀏覽器怪僻為導向的編程方式。這常是因為他們不知道他們可以同時支援目前的標準並容許較舊 的瀏覽器。 Web Standards Project

一些用於嵌入 DHTML（動態 HTML）至頁面的元素及技巧已被 W3C 的 HTML 4.01 與文件物件模型（Document Object Model，DOM）規格書所排拒在外了。以 <LAYER> 標籤與 document.layers[] 物件組為例，它們實際上並非任何資訊網標準的一份子。近來相容於 W3C 標準的瀏覽器（如 Mozilla、Firefox、與 Netscape 6/7）並不支援這些非標準的元素與專有的 DOM 串組。

本文章提供您一份將網頁升級、以求符合全球資訊網標準的程序概覽。各段節會舉出一些與標準相違背之技法，並建議替代方案。所有本文章所提出的標準替代方案皆也測試與檢定過，在近代瀏覽器如 MSIE 6、Netscape 7.x、Firefox 1.x、Opera 7+、Safari 1.2+、Konqueror 3.x 等裡完全無問題。最後的一節「更動摘要」整理本文所有替換建議。

本文件內容:

1. 升級　Layer 元素 (Netscape 4)
2. 棄用（Deprecated）的元素
   1. Applet
   2. Font
   3. 其它棄用的
3. 其它排除的元素
4. 使用 W3C DOM
   1. 與 DOM 相關未支援的屬性
   2. 以 W3C DOM 存取元素
   3. 操作文件樣式及內容
5. 開發跨瀏覽器跨平台的網頁
6. 使用物件偵測
7. 更動摘要

升級　Layer 元素 (Netscape 4)

本節解釋如何用符合標準的 HTML 4.01 來取代 Netscape 4 的 <layer> 與 <ilayer> 元素。因為 <layer> 與 <ilayer> 元素不屬於任何的 W3C 網路標準， Netscape 6/7、Firefox 與 Mozilla 等合乎標準的瀏覽器皆不支援 <layer> 與 <ilayer> 元素。

document.layers[] 物件集及 Netscape 4 Layer DOM 其它的特定的功能也不受支援，這些在 DOM 一節會討論。

在 Netscape 4 裡，<layer> 元素主要有兩個功用：

• 在網頁中嵌入外部的 HTML 內容，與
• 設定 HTML 內容特定區塊的位置；這類 HTML 內容的區塊通常在書中、在參考文件中、或在網頁作者間被稱呼為 layer﹝圖層﹞ 或 DHTML layer。

取代作為嵌入外部 HTML 內容的 <layer> 與 <ilayer>

如果你有

<LAYER SRC="foo.html" height="300" width="400"> </LAYER>

那對於 HTML 4.01 Transitional（過渡）文件你可用以下取代：

<iframe src="foo.html" height="300" width="400">
  <a href="foo.html">Foo 內容</a>
</iframe>

註：如 Netscape 4 等不支援 IFRAME 的使用代理器與非常舊的視訊瀏覽器會顯示它的內容如：「這裡，內容鏈結」。如此，內容對於較舊瀏覽器的親和力（內容退化）可以確保與最優雅化。

或著，對於 HTML 4.01 Strict（嚴格）文件你可用以下取代：

<object data="foo.html" type="text/html" height="300" width="400">
  <a href="foo.html">Foo content</a>
</object>
</code>

註：同上，不支援這物件元素的使用代理器與瀏覽器會顯示該鏈結，因此確保內容可以取得。

一般使用 <iframe> 或 <object> 的親和力策略是在 <iframe> 或 <object> 內置入最常用與支援最多的元素。如此，無法繪製 <iframe> 或 <object> 的使用代理器可以繪製這內容來代替。大多數瀏覽器遇到不名元素時的一般規則是盡所能繪製它的內容。註一

更多有關內嵌 HTML 內容：
Notes on embedded documents from W3C HTML 4.01

註一：「如果使用代理遇到它不認識的元素，它應試著繪製元素的內容。」:Notes on invalid documents

注意：本建議並非HTML 4.01 的規範。雖然這修正錯誤的機制有受廣泛地實作，資訊網作者不應盲目地依賴它。

取代作為置放(positioned)區塊的 <layer> 與 <ilayer>

要升級置放的 <layer> 元素最好的 W3C 資訊網標準的取代方法是用 <div>。<div> 元素不能夠轉置(transclude)，不能夠匯入網頁外的 HTML 內容，因此如果設定 src 屬性它將受符合 W3C 的瀏覽器所忽略。

如果你有

<LAYER style="position: absolute;" top="50" left="100"
width="150" height="200">
   ... 內容在這裡 ...
</LAYER>

你可以用這個代替：

<div style="position: absolute; top: 50px; left: 100px;
width: 150px; height: 200px;">
   ... 內容在這裡 ...
</div>

棄用（Deprecated）的元素

HTML 4.01 內棄用的元素一般被廣泛使用，不過它們已被其它的技巧所取代了。

W3C 的階層樣式列表（CSS）建議書中承襲了許多棄用（和一些排除的）標籤的功能，樣式表提供了威力強大的展示及組織能力，但對於 CSS 的討論則不在此文的範圍之中。

Applet

APPLET 元素的功能已在 HTML 4.01 中為 OBJECT 取代而棄用。

<p>
<applet code="HelloWorldApplet.class" height="200" width="350"></applet>
</p>

可以被轉為

<p>
<object
  classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" 
  codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0" 
  codetype="application/java" standby="載入 applet 中..." 
  height="200" width="350">
<param name="code" value="HelloWorldApplet.class">
<!--[if !IE]>
Mozilla 1.x、Firefox 1.x、Netscape 7.x 與其它會用內物件(巢套物件)
-->
     <object classid="java:HelloWorldApplet.class" 
     standby="載入 applet 中..." 
     height="200" width="350">
     <p>你的瀏覽器似乎沒有啟用 java 支援或沒有 Java plug-in。<br>
     <a href="http://www.java.com/zh_TW/download/manual.jsp">你可以在這裡下載
     最新的 Java plug-in。（免費下載；15 MB）</a></p>
     </object>
<!--<![endif]-->
</object>
</p>

以上的程式碼在 will work for MSIE 6、以 Mozilla 為基礎的瀏覽器、與其它以標準為基礎的瀏覽器有效。此外，它會通過 HTML 4.01 transitional 或 HTML 4.01 strict 的查驗（validation）。

程式碼的解釋：

根據 HTML 4.01 推薦，如果 <object>（因為其內容型別不受支援或無 ActiveX 控制件的支援）不受繪製，則瀏覽器應繪製其內容：這裡，內容是另一個（代替的）<object>。在這裡，不支援由 ActiveX 控制件觸發之 Java plug-in 的瀏覽器會顯示內 <object>。

classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93": 

這個 clsid 數值使 MSIE 6 瀏覽器用（安裝在使用者系統上）最高版本的 JRE。有時候 MSIE 6 使用者有安裝數個 JRE plug-in 版本。

codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0": 

這 codebase 定義　JRE　最低版本；在這裡是 1.4.2。如果瀏覽器沒有 java plug-in 或它有的版本在 1.4.2 之前，那將會有自動最新 1.4.2 版的下載。這選擇也許有爭議，一方面最新版的 JRE plug-in 有些安全修補與問題修正，另一方面未有使用者明確的同意而強制下載 15MB 檔不會是最好的。

其它有時會用到或需要的屬性：

• code="HelloWorldApplet.class": applet 的 class 名稱。
• archive="JarFileName.jar": 如果 java applet class 存包在 jar 檔內這通常有.jar 副檔名。
• codetype="application/java"; 如果 class 存包在 jar 檔內 codetype 應是「application/java-archive」。
• data="java:HelloWorldApplet.class": applet 資料。
• type="application/java": 資料的型別。如果 data 屬性有用到建議一並用這屬性。

其它 applet 轉換到 object 的資訊

• Java applet using <object> tag by Shayne Steele
• HTML 4.01 on Including an applet
• HTML 4.01 on Including an object

Font

被棄用的 FONT 標籤廣泛用以指定文字的字體、色彩及尺寸，而這種功能已從 HTML 轉移至 CSS。FONT 標籤可直接以指定了相同樣式資訊的 SPAN 標籤替代：

<P><FONT color="blue" face="Helvetica">
A really <FONT size="+1">big</FONT> shoe.
</FONT></P>

可轉換為

<pre class="code">
<P><SPAN style="color:blue; font-family: Helvetica, sans-serif;">
A really <SPAN style="font-size: larger;">big</SPAN> shoe.
</SPAN></P>

或簡潔點的方式

<P style="color: blue; font-family: Helvetica, sans-serif;">
A really <SPAN style="font-size: larger;">big</SPAN> shoe.
</P>

這雖然適用於區域字體的改變，但卻不是使用樣式的最佳方式；CSS 的本意在於將文字及其他樣式以具邏輯的組合方式，來全域性地將樣式套用到所需的所有元素上。

更多有關 <FONT> 轉換：

W3C Quality Assurance tip for webmaster: Care With Font Size, Recommended Practices: Forget , use CSS