以萬維網標準設計您的網頁
出自 MozTW Wiki
原文 (重大更新中)
- 翻譯：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[] (Netscape 4) 或 document.all (Internet Explorer 5+) 實際上並非任何資訊網標準的一份子。近來相容於 W3C 標準的瀏覽器（如 Mozilla、Firefox、與 Netscape 6/7）並不支援這些非標準的元素與專有的 DOM 串組。
本文章提供您一份將網頁升級、以求符合全球資訊網標準的程序概覽。各段節會舉出一些與標準相違背之技法，並建議替代方案。所有本文章所提出的標準替代方案皆也測試與檢定過，在近代瀏覽器如 MSIE 6、Netscape 7.x、Firefox 1.x、Opera 7+、Safari 1.2+、Konqueror 3.x 等裡完全無問題。最後的一節「更動摘要」整理本文所有替換建議。
本文件內容:
- 升級 Layer 元素 (Netscape 4)
- 棄用（Deprecated）的元素
- Applet
- Font
- 其它棄用的
- 其它排除的元素
- 使用 W3C DOM
- 與 DOM 相關未支援的屬性
- 以 W3C DOM 存取元素
- 操作文件樣式及內容
- 開發跨瀏覽器跨平台的網頁
- Browser identification: not best, not reliable
- Object/Feature detection: best, most reliable
- 使用物件偵測
- 更動摘要
升級 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
取代作為置放(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>（例如因為其內容型別不受支援，或例如瀏覽器無法支援 <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 檔不會是最好的。
其它 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 代換方式 |
|---|---|
CENTER 或 align="center" |
CSS1: CSS1 text-align: center; 用於同軸（inline）元素 「[text-align 特性]定義文字[或同軸內容]該如何在元素內對齊」 |
CENTER 或 align="center"
| CSS1: margin-left: auto; margin-right: auto; for block-level elements
「if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent.」 |
bgcolor 屬性 |
CSS1 <a href="http://www.w3.org/TR/CSS1#background-color">background-color</a>: ; |
SSTRIKE |
CSS1: text-decoration: line-through; |
U |
CSS1: text-decoration: underline |
DIRMENU |
HTML 4.01: <UL> |
其它排除的元素
有一些用來作動畫與其它特效的專有元素不在任何資訊網標準內。本節舉出這些元素並建議一些用 W3C HTML 4.01 取得同樣效果的技巧：
| 排除的元素 | W3C 代換方式 |
|---|---|
BLINKNav2+ |
CSS1: text-decoration: blink;用戶代理有受 CSS1 規格要求要能識別 blink 關鍵字，但沒有受要求支援閃爍效果，因此符合 CSS1 的瀏覽器不一定會將文字閃爍顯示出。最好的方法是不要用閃爍內容。 |
MARQUEEIE2+ |
HTML 4.01 DIV 或 SPAN，內容字串用 JavaScript 藉由 DOM level 1 來定時轉換。如閃爍文字，這類效果不受鼓勵。調查有顯示不斷移動的物件或文字會干擾閱讀與降低周邊視力。DHTML 走馬燈並在測試的瀏覽器下耗費使用者系統資源 (cpu, RAM)，並會對普通的系統造成很大的負荷。如果在評估與考慮網頁後你還是想要在頁內用走馬燈效果，那你可以用以下小教學: Mozilla 1.4+、NS 7.2、與 Firefox 1.x 支援這非標準的 <marquee> 元素，不過使用者可用這個 tip 來關閉這支援。 |
BGSOUNDIE2+ |
HTML 4.01 OBJECT，例如:
|
EMBEDNav2+,IE3+ |
HTML 4.01 OBJECT。對於把 EMBED 轉換到 OBJECT 標籤的資訊請見這個 DevEdge 文章。EMBED 從未 是 W3C HTML 標準推薦的一部份，但是它還是受到 Gecko 與其它現代瀏覽器支援。支援度的品質不一；Internet Explorer 的支援與大部份 Netscape plug-in 不相容。OBJECT 也不是皆受支援，尤其是在舊的瀏覽器上。 |
使用 W3C DOM
在一些瀏覽器上 document 物件有屬性可用來存取元素陣列與元素類別。舉例來說， Internet Explorer 用 document.all[] 來存取文件內特定的元素。這些陣列有許多不在 W3C 的 Document Object Model 規格內，並在符合標準的瀏覽器 (如 Mozilla、Firefox、與 Netscape 6/7) 內會產生 JavaScript 錯誤。
在 W3C 的 Document Object Model 內，幾乎所有的 HTML 頁面的元素是腳本可存取物件 (scriptable object)。一般來講，W3C 的 DOM 的屬性 (attribute) 與方法 (method) 比 DHTML 編程所用的專有物件模型還強大。大致上，現代瀏覽器，如 MSIE 6、Safari 1.x、Konqueror 3.x 與基於 Mozilla 的瀏覽器 (Firefox、Mozilla、Netscape 6/7) 對 W3C DOM 的屬性 (attribute) 與方法 (method) 有很好的支援，所以依賴專有物件模型不會有更多的好處。
與 DOM 相關未支援的屬性
以下這些 document 物件特性不受 W3C Document Object Model 支援：
document.layers[]document.elementName
(例如用document.yooneek來取得<p name="yooneek">元素的參引)id_屬性值document.all.id_屬性值document.all[id_屬性值]
以下這些(源自 Internet Explorer)的物件特性不受 W3C Document Object Model 支援：
FormName.InputName.valuedocument.forms(0)element.innerText
Scripts that use these properties will not execute in Firefox, Mozilla and Netscape 6/7 or other standards-compliant browsers. Instead, use the W3C DOM access attributes and access methods described in the next section; since these are supported by Internet Explorer too, then there is no need to use MSIE-specific attributes and methods.
以 W3C DOM 存取元素
存取 HTML 頁面的元素的最好也最受廣泛支援的方法是用 document.getElementById(id).
所有的現代瀏覽器 (Netscape 6+、Mozilla、MSIE 5+、Firefox、Opera 6+、Safari 1.x、Konqueror 3.x 等等)支援
document.getElementById(id)。此方法返回一個獨特識別的屬性的物件參引 (this returns an object reference
to the uniquely identified element)，而這可用腳本處理 (script) 該元素。舉例來說，以下小範例於動態把一個
id 為 "inset" 的 div 元素的的左邊界 (left margin) 設定為半公寸：
<span class="remark">// in the HTML: <div id="inset">Sample Text</div></span>
document.getElementById("inset").style.marginLeft = ".5in";
| 特定 IE 的元素存取法 | W3C 資訊網標準取代方案 |
|---|---|
| id_attribute_value | document.getElementById(id_屬性值) |
| document.all.id_屬性值 | document.getElementById(id_屬性值) |
| document.all[id_屬性值] | document.getElementById(id_屬性值) |
| 表格名.欄位名.value | document.forms["表格名"].欄位名.value or document.forms["表格名"].elements["欄位名"].value |
| document.forms(0) | document.forms[0] |
More on accessing forms and form elements:
Referencing Forms and Form Controls by comp.lang.javascript newsgroup FAQ notes
DOM 1 specification on accessing forms and form elements
For accessing a group of elements, the DOM specification also includes
getElementsByTagName, which returns a list of all the elements with the
given tag name in the order they appear in the document:
var arrCollection_Of_Anchors = document.getElementsByTagName("a");
var objFirst_Anchor = arrCollection_Of_Anchors[0];
alert("The url of the first link is " + objFirst_Anchor.href);
In addition to these access methods, the W3C DOM2 specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events raised as the user interacts with the document itself.
操作文件樣式及內容
‧返回上一頁: 技術傳教專案主頁
