舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

以萬維網標準設計您的網頁

出自 MozTW Wiki

於 2005年6月22日 (三) 15:01 由 Danielwang對話 | 貢獻 所做的修訂 (+ two paragraphs)

原文 (重大更新中)

  • 翻譯: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 等裡完全無問題。最後的一節「更動摘要」整理本文所有替換建議。

本文件內容:

  1. 升級 Layer 元素 (Netscape 4)
  2. 棄用(Deprecated)的元素
    1. Applet
    2. Font
    3. 其它棄用的
  3. 其它排除的元素
  4. 使用 W3C DOM
    1. 與 DOM 相關未支援的屬性
    2. 以 W3C DOM 存取元素
    3. 操作文件樣式及內容
  5. 開發跨瀏覽器跨平台的網頁
    1. Browser identification: not best, not reliable
    2. Object/Feature detection: best, most reliable
  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

取代作為置放(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 檔不會是最好的。

其它 applet 轉換到 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 <font>, use CSS

其它棄用的元素

棄用元素與屬性 W3C 代換方式
CENTERalign="center" CSS1: CSS1 text-align: center; 用於同軸(inline)元素
「[text-align 特性]定義文字[或同軸內容]該如何在元素內對齊」
CENTERalign="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.」
CSS1 horizontal formating
Worth mentioning is the excellent tutorial:

Centring using CSS(作者 David Dorward)
bgcolor 屬性 CSS1 <a href="http://www.w3.org/TR/CSS1#background-color">background-color</a>: ;
S
STRIKE
CSS1: text-decoration: line-through;
U CSS1: text-decoration: underline
DIR
MENU
HTML 4.01: <UL>

其它排除的元素

有一些用來作動畫與其它特效的專有元素不在任何資訊網標準內。本節舉出這些元素並建議一些用 W3C HTML 4.01 取得同樣效果的技巧:

排除的元素 W3C 代換方式
BLINK
Nav2+
CSS1: text-decoration: blink;
用戶代理有受 CSS1 規格要求要能識別 blink 關鍵字,但沒有受要求支援閃爍效果,因此符合 CSS1 的瀏覽器不一定會將文字閃爍顯示出。最好的方法是不要用閃爍內容。
MARQUEE
IE2+
HTML 4.01 DIVSPAN,內容字串用 JavaScript 藉由 DOM level 1 來定時轉換。

如閃爍文字,這類效果不受鼓勵。調查有顯示不斷移動的物件或文字會干擾閱讀與降低周邊視力。DHTML 走馬燈並在測試的瀏覽器下耗費使用者系統資源 (cpu, RAM),並會對普通的系統造成很大的負荷。如果在評估與考慮網頁後你還是想要在頁內用走馬燈效果,那你可以用以下小教學:
Cross-browser and web standard compliant Stock Ticker example by D. Rosenberg
Comprehensive web standard compliant alternative to <marquee> by D. Rosenberg

Mozilla 1.4+、NS 7.2、與 Firefox 1.x 支援這非標準的 <marquee> 元素,不過使用者可用這個 tip 來關閉這支援。

BGSOUND
IE2+
HTML 4.01 OBJECT,例如:

<OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT>
要讓聲音 OBJECT 在頁面上不顯示請見這個 DevEdge 文章
網頁背景聲音常常會把網頁載入變得很慢;如上述文字效果,伴隨頁面的音樂或聲音很少受人喜愛。根據 What we really hate on the web(我們資訊網上討厭的東西)調查,41.9% 調查受訪人會避開自動播放音樂的網站;71.1% 非常不喜歡自動播放音樂的網站。

Why Playing Music on your Web Site is a Bad Idea by A. Gulez
EMBED
Nav2+,IE3+
HTML 4.01 OBJECT。對於把 EMBED 轉換到 OBJECT 標籤的資訊請見這個 DevEdge 文章
EMBED 從未 是 W3C HTML 標準推薦的一部份,但是它還是受到 Gecko 與其它現代瀏覽器支援。支援度的品質不一;Internet Explorer 的支援與大部份 Netscape plug-in 不相容。OBJECT 也不是皆受支援,尤其是在舊的瀏覽器上。

使用 W3C DOM

在一些瀏覽器上 document 物件有可存取元素陣列與元素類別的屬性。document.all[], for example, is used by Internet Explorer to access particular elements within the document. Many of these arrays were not made a part of the W3C specification for the Document Object Model and will cause JavaScript errors in standards-compliant browsers like Mozilla, Firefox and Netscape 6/7.

The W3C Document Object Model exposes almost all of the elements in an HTML page as scriptable objects. In general the attributes and methods of the W3C DOM are more powerful than the proprietary object models used in DHTML programming. The attributes and methods of the W3C DOM are overall well supported by modern browsers like MSIE 6, Opera 7+, Safari 1.x, Konqueror 3.x and Mozilla-based browsers (Firefox, Mozilla, Netscape 6/7): so there is no gain from relying on proprietary object models.

與 DOM 相關未支援的屬性

以 W3C DOM 存取元素

操作文件樣式及內容

個人工具