30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Front-End
Code

漸進增強的理論

by
Length:ShortLanguages:
This post is part of a series called The Theory and Practice of Progressive Enhancement.
Building a Website With Progressive Enhancement

Chinese (Traditional) (中文(繁體)) translation by Zhang Xiang Liang (you can also view the original English article)

建立網站時,你有數種方式可以選擇。

你可以先使用最先進技術,包括程式碼、樣式等,然後在較舊的流覽器優雅降級 (graceful degradation)。或者你選擇忽略舊流覽器。又或者,你可以先建立基本網頁,接著以漸進增強( progressive enhancement)方式加上程式碼和樣式讓網頁有更多的功能。

在這個系列中,我們將看看後者是怎麼達成的。  

首先,我們會講述漸進增強的背後理論。但不用覺得懼怕,這不是火箭科學,這些規則其實相當簡單。


為什麼?

 你或許會問:為什麼我要理舊流覽器?畢竟現在幾乎所有的主流流覽器都會自動更新了。

 首先而且是最重要的,除非你製作高度互動的網路應用程式,不然你必需考慮失能的使用者。他們可以用螢幕閱讀軟體,這些裝置不會讀樣式或複雜的介面,因為這會讓使用者難以理解到底有什麼在頁面上。

第二點,現在仍有人關掉 JavaScript 及/或 CSS。原因有很多 - 頻寬上限、緩慢地連線、或個人偏好。   有些人也使用文字流覽器,這些流覽器唯讀取少量的 CSS 並且忽略 JavaScript。 

再者,這會讓你的程式碼容易維護。你會有更富有語意的 HTML。未來維護時可以輕鬆搞清楚這些標記(markup)、樣式和程式碼在做什麼。

最後,有些地方就是不讓使用者安裝或更新任何軟體,包括流覽器(這在大公司時常發生)。  

如果你還是沒被說服,有些國家甚至立法要求網路開發者需要讓失能者也可以使用他們的網站(例如在英國)。


基本規則  

現在讓我們回顧使用漸進式增強製作網站的基本規則。 

基本內容應該讓所有流覽器都可以讀取 

如果你理解“內容”在這篇文章的涵義,這看來似乎很直覺。

在此“內容”是指你希望使用者所接受到的訊息以其最基本的方式-文字-呈現。標題、注解、連結、段落等類似格式是可接受的,但是圖片、音樂、動畫不在我們所討論的“內容”範圍內(而且它們應該以alt  title屬性適當地描述)。

現在來談一下“可讀取”的概念:不只是所有的流覽器可以呈現你的內容,並且要以可讀的方式呈現。換言之,把所有文字放入無格式化的單一段落不是個好主意。

所有流覽器可以執行基本功能  

如果你的網頁上有錨點或按鈕,使用者應該可以使用它們流覽相關內容。這和他們是使用最新版的 Chrome 或是使用舊版的 Internet Explorer 流覽器無關。

語意標記包含所有內容  

這需要多點計畫,特別是精巧的設計。這規則要求你儘量使用較少的基本 HTML 標籤來包裝內容。  意思是你無法為了視覺效果巢狀堆疊十數個<div>

如果你遵循此項原則,你的 HTML 會較清楚易懂。絢爛的效果就交由 CSS 負責。 

藉由外部的 CSS 增進頁面配置

首先,忘了 HTML 標籤 的 style 屬性吧。你必須使用 class、ID 或其他屬性,並且由格式表(stylesheet)來定義外觀。

 <style>標籤 也不可以使用,格式表必須使用<link> 標籤來載入,所以如果流覽器不支援或關掉 CSS,就不會下載相關檔案。

增進的行為由非侵入式、外部的 JavaScript 提供

此點和上述觀點類似-在 HTML 中沒有事件處理器(event handler),內容裡沒有<script>標籤,而且在此類檔案沒有載入時網頁仍然可以使用。所以你不能強迫使用者依靠 Javascript 進行像是送出表單的動作。

尊重終端使用者的流覽器偏好

這有點複雜。或許你想問自己,為什麼使用者的流覽器偏好和我的網頁有關?

首先這和 CSS 有關。基本上佈局應該是回應式的。字體大小應該和使用者的預設值相關(單位使用 em 而不是px)。

另外一部分和 JavaScript 相關:如果使用者關掉它,不要強迫他們改變設定,除非這和網站的核心功能有關。不要以一個大大的紅色框說,本網站無法在沒有 Javascript 支援下運行,相反的,花時間開發使用沒有 Javascript 也可以執行的功能。


設計流程  

你的設計流程或許不會有太多改變。你只是需要記得前面那些原則,然後不要製作違反他們的功能。

如果你的設計追隨最新標準,應該不會有什麼問題。佈局應該是簡單乾淨。  所有的效果只是錦上添花,所有的內容在移除 CSS 和 JavaScript 時不會無法讀取或瞭解。

所有只為了效果的 HTML 應該被移除。只有在一定必要時,為了避免阻礙網頁或浪費使用者太多頻寬,在頁面載入時以Javascript 插入所需HTML,(JavaScript 驅動的幻燈片是個完美的例子,  它們在沒有樣式或程式碼時會產生大混亂)。


測試漸進式增強

 除了主流的流覽器,測試還需要一些應用程式。

 螢幕閱讀軟體

這會讓你以視覺失能者的方式“看”你的網站。有許多應用程式可使用(這裡有完整列表。建議使用 ChromeVox,那是Google Chrome 應用程式,而且非常容易使用。

文字流覽器

這不一定是必要的,因為你可以從頁面移除所有 CSS 和 JavaScript,但是如果需要獨立的應用程式,我會推薦 Lynx

W3C 驗證

不是每個人都遵循 HTML 和 CSS 標準,或根據它們來評論工作,不過使用它們可幫助追蹤在較新版流覽器無法發現的問題。  一些較新的流覽器在輸出內容給使用者時會試著瞭解並修復不完整的 HTML。你可以在這裡驗證你的程式碼。


結論  

本文涵蓋漸進式增強的基本理論。現在你應該有使用此策略建立並測試網站所需的能力。 

下一篇文章,我們會開始實行理論,製作網頁的基本 HTML,並以 CSS 給予樣式。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.