知識星球24ways 在這10年中已經逐漸變得強大了。在因特網歷史中這已是一個永遠不可磨滅的了。回想一下在那段時間裡我們見證所有變化：Ajax的興起，移動裝置的激增，前端開發工具不可預知的前景。
工具和技術來來往往，興起衰落，但在過去的十年中有一件事於我而言是一直沒有變化的：漸進式增強。
漸進式增強不是一門技術。它更像是一種思考方式。漸進式增強鼓勵你去思考網頁所提供的基本意義，而不是去想一個已完成網頁如何展示的細小問題。所以漸進式增強允許你以更抽象的方式思考核心功能，而不是糾結於網頁在不錯的寬屏裝置上的理想狀態。
一旦你已經確定要新增的核心功能是什麼–向購物欄中新增一件商品，釋出一條訊息，分享一張圖片–然後你可以以一種最簡單的方式實現該功能。那通常也意味著要從優秀的老式的HTML入手。你所需要的通常只是連結和表格。然後，只要你已經使得該核心功能基本工作，你就可以開始對更多現代瀏覽器加強功能以逐步提供更好的使用者體驗。
以這種方式工作的好處不僅僅是你的網頁可以在舊式瀏覽器中工作（儘管只是基本能執行）。它還能保證如果在現在的瀏覽器中出現的小毛病不至於釀成大禍。
人們對漸進式增強存在一個誤解，認為漸進式增強就是花時間解決舊式瀏覽器，然而事實卻相反。將基本功能投入使用並不會花費太久。而且一旦你已經完成這部分工作，你就可以隨心所欲地去測試最新最好的瀏覽器技術，腦中的意識是即使它們現在還不能被普遍支援，也沒有問題，因為你已經把最可靠的東西投入使用了。
看待Web發展的關鍵在於意識到不會有最終的介面—可能會有很多隻有輕微差別但會依賴於任意時刻任意使用者的屬性和容量的介面。網站不需要在每一個瀏覽器中都一模一樣。
真正理解了這個就是一個極大地進步。你可以把時間花費在為更多瀏覽器提供最好體驗的同時保證能在任何建立工作的地方實現核心功能，而不是努力使你的網站在差異巨大的瀏覽器中一模一樣。
允許我以一個簡單的例子來表述：導航。
第一步：核心功能
假設我們現在有一個關於聖誕節12天歡慶的簡單網站，一天一個頁面。這個核心功能也相當清晰了：
1、瞭解其中任意一天。
2、從一天到另一天瀏覽。
第一個功能可以透過將文字用頭條，段落以及所有常用的HTML結構化標簽組裝起來實現。第二個則透過一系列的超連結實現。
那麼現在導航串列最適合放在哪裡呢？個人而言，我是一個跳轉到頁尾導航樣式的粉絲。這個樣式先放網頁內容，其次才是導航。頁面頂部有一個帶有href屬性的連線指嚮導航的標簽。
…
檢視頁尾超鏈導航樣式的演示。
由於只有超連結，這個樣式也只是在網路初興時期能在每一個瀏覽器上工作。Web瀏覽器要做的只是展示超連結（正如名字所示）。
第二步：增強型佈局
在小螢幕裝置上，比如行動電話，頁尾連結樣式是一個相當簡潔的解決辦法。一旦有更多的螢幕空間可使用時，就可以使用CSS將導航重新定位在內容之上。我可以設定position屬性為absolute,使用彈性佈局盒，或者設定display屬性為table。
@media all and (min-width: 35em) {
.control {
display: none;
}
body {
display: table;
}
[role=”navigation”] {
display: table-caption;
columns: 6 15em;
}
}
第三步：增強！
沒錯。現在我已經可以為所有人提供核心功能了，而且對寬屏也有相當不錯的響應風格設計。到這裡我可以停下腳步了，但漸進式增強的實際優點卻是我還沒有做到的。從這兒開始，我可以瘋狂地為現代瀏覽器新增各種奇特的最佳化效果，而不用擔心不能為舊式瀏覽器提供退路—退路已經準備好了。
實際上我想為小螢幕的裝置提供一個漂亮的屏外畫布。下麵是我的規劃：
1、 將導航放置在主內容下麵。
2、 監聽偽類為.control的連結是否被點選並攔截其反應。
3、 當這些連結被點選後，為主體body切換賦予偽類.active。
4、 如果偽類.active存在，將內容滑出以顯示導航。
下麵是定位內容和導航的CSS程式碼：
@media all and (max-width: 35em) {
[role=”main”] {
transition: all .25s;
width: 100%;
position: absolute;
z-index: 2;
top: 0;
right: 0;
}
[role=”navigation”] {
width: 75%;
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
.active [role=”main”] {
transform: translateX(-75%);
}
}
在我的JavaScript程式碼中，我將會監聽偽類.control連結上的任何點選事件，然後據此為主體body切換賦予偽類.active。
(function (win, doc) {
‘use strict’;
var linkclass = ‘control’,
activeclass = ‘active’,
toggleClassName = function (element, toggleClass) {
var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’);
if (!element.className.match(reg)) {
element.className += ‘ ‘ + toggleClass;
} else {
element.className = element.className.replace(reg, ”);
}
},
navListener = function (ev) {
ev = ev || win.event;
var target = ev.target || ev.srcElement;
if (target.className.indexOf(linkclass) !== -1) {
ev.preventDefault();
toggleClassName(doc.body, activeclass);
}
};
doc.addEventListener(‘click’, navListener, false);
}(this, this.document));
我已經準備就緒了，是嗎？哪有那麼快！
標準符合測試
我假設在我的程式碼中已經實現addEventListener函式。這並不是一個安全的假設。因為JavaScript不像HTML或CSS那樣具有容錯性。如果你使用了一個瀏覽器不能識別的HTML元素或屬性，或是使用了一個瀏覽器不能理解的CSS選擇器，屬性或是值，那都不是大問題。瀏覽器會忽略掉它不能識別的東西：既不會丟擲錯誤也不會停止解析檔案。
JavaScript就不同了。如果你的JavaScript程式碼有錯誤，又或者使用了一個瀏覽器不能辨識的JavaScript函式或屬性，瀏覽器會丟擲錯誤，而且會停止解析檔案。這就是為什麼JavaScript中特徵在使用之前必須要測試。這也說明將核心功能依賴於JavaScript是非常不安全的。
就我而言，我需要測試addEventListener函式的存在性：
(function (win, doc) {
if (!win.addEventListener) {
return;
}
…
var enhanceclass = ‘cutsthemustard’;
doc.documentElement.className += ‘ ‘ + enhanceclass;
}(this, this.document));
BBC的大牛們稱這種特徵測試為標準符合測試。如果一個瀏覽器透過了該測試，它就達到了標準，所以它就獲得了增強效能。如果一個瀏覽器沒能達到標準，它就沒有增強的效能。這也不算什麼壞事，記住，網站不需要在每個瀏覽器中都表現的一樣。
我希望確保我的離線畫布樣式只能應用於符合標準的瀏覽器。我會使用JavaScript為檔案新增一個偽類.cutsthemustard：
(function (win, doc) {
if (!win.addEventListener) {
return;
}
…
var enhanceclass = ‘cutsthemustard’;
doc.documentElement.className += ‘ ‘ + enhanceclass;
}(this, this.document));
現在我可以使用已存在的類名來調整我的CSS：
@media all and (max-width: 35em) {
.cutsthemustard [role=”main”] {
transition: all .25s;
width: 100%;
position: absolute;
z-index: 2;
top: 0;
right: 0;
}
.cutsthemustard [role=”navigation”] {
width: 75%;
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
.cutsthemustard .active [role=”main”] {
transform: translateX(-75%);
}
}
檢視符合標準的增強型離線畫布導航演示。記住，這隻適用於小螢幕，所以你可能會需要將瀏覽器視窗壓扁。
增強所有！
這僅僅是一個相對比較簡單的例子，但它闡明瞭漸進式增強背後的思想：只要你已經為所有人提供了核心功能，就可以隨意為現代瀏覽器增加最流行的增強效能。
漸進式增強並不意味著你必須為所有人都提供一模一樣的功能—恰恰相反。這也是為什麼需要儘早確定你的核心功能是什麼，而且確保這個核心功能可以被大多數基本技術提供實現。在這個點的基礎上，你可以隨意新增更多的不屬於關鍵任務的特徵。你可以在能支援更多特徵的瀏覽器上相應的新增更多的屬性，比如CSS的動畫效果，JavaScript的定位功能以及HTML中新的輸入框型別。
正如我所說的，漸進式增強不是一門技術。它是一種思考方式。如果你已經開始使用這種思考方式，你就已經準備好了面對接下來的十年了。
原文出處：24ways.org
譯文出處：伯樂線上 – fzr
連結：http://web.jobbole.com/82186/