摘要：提到老舊瀏覽器，我們腦海中往往復(fù)現(xiàn)的就是舊版的。但幸運(yùn)的是，有一些技巧可以協(xié)助解決由老舊瀏覽器引起的的問題。放棄表單和老舊瀏覽器的最大問題是對(duì)的支持。結(jié)論如你所見，處理老舊瀏覽器所涉及的內(nèi)容不止有表單。

系列文章說明

原文

所有的web開發(fā)者都會(huì)很快（或者很痛苦地）意識(shí)到Web是一個(gè)粗糙的環(huán)境，其中最糟糕的一點(diǎn)就是老舊的瀏覽器。提到“老舊瀏覽器”，我們腦海中往往復(fù)現(xiàn)的就是舊版的IE。但其實(shí)老舊瀏覽器不止這一種，一個(gè)一年前的Firefox，比如ESR版本也算得上老舊了。至于移動(dòng)端，由于有些瀏覽器和操作系統(tǒng)都不能升級(jí)，這就導(dǎo)致了許多老舊的安卓手機(jī)或iPhone上的瀏覽器不是最新的，這些也算是老舊瀏覽器。

令人沮喪的是，我們工作的一部分都要耗在老舊瀏覽器這片荒野上。但幸運(yùn)的是，有一些技巧可以協(xié)助解決由老舊瀏覽器引起的80%的問題。

實(shí)際上，首要的任務(wù)是閱讀這些瀏覽器的文檔、試著理解其公共部分。比如，CSS的支持程度是HTML表單的一個(gè)重大問題，若你剛開始開發(fā)，應(yīng)先檢查下要用的元素（或DMO接口）的支持程度。雖然許多web頁(yè)面要用的元素、屬性、API的兼容性表格，MDN上都有；但別的資源也能提供很大的幫助：

Mozilla：就在你現(xiàn)在所訪問的地方啦（譯注：MDN）

Microsoft：Internet Explorer Standards Support Documentation

Opera：Web specification support in Opera

WebKit：由于該引擎有著幾個(gè)不同的版本，想找到對(duì)應(yīng)文檔需要些技巧：

Webkit博客和Planet Webkit匯總了Webkit內(nèi)核開發(fā)者一些最好的文章。

chromium網(wǎng)站也很重要。

還有Apple的網(wǎng)站

Can I Use上有各類技術(shù)的支持程度信息。

Quirks Mode是關(guān)于瀏覽器兼容性的一個(gè)極好資源。其移動(dòng)部分是現(xiàn)在最好的。

Position Is Everything是一份關(guān)于老舊瀏覽器渲染問題及其解決方法的最好資料。

Mobile HTML5 有著大量移動(dòng)端瀏覽器兼容性信息，不只有那些“前5的瀏覽器”（譯注：大概包括蘋果、安卓、Nokia、Amazon、Blackberry）

由于HTML表單包含了大量復(fù)雜的交互，我們得記住一條法則：keep it as simple as possible。許多情況下我們會(huì)想讓表單變得“漂亮”或“帶有高級(jí)功能”，但構(gòu)建高效的HTML表單并不單靠設(shè)計(jì)或技術(shù)就能解決，建議花點(diǎn)時(shí)間閱讀下forms usability on UX For The Masses這篇文章.

優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)這兩個(gè)開發(fā)模式通過同時(shí)支持眾多的瀏覽器，能讓你建立偉大的產(chǎn)品。當(dāng)你在現(xiàn)代瀏覽器上構(gòu)建了一些東西，并想確保它能在老舊瀏覽器上運(yùn)行時(shí)，你就是在使用優(yōu)雅降級(jí)了。

接下來我們看些關(guān)于HTML表單的例子：

HTML5帶來的輸入框類型非?？幔?yàn)樗鼈冏鹘导?jí)處理的方法是可預(yù)見的。若瀏覽器不認(rèn)識(shí)元素的type特性值，就會(huì)回退到text類型。

  Pick a color
  

CSS的特性選擇器對(duì)HTML表單來講非常有用，但某些老舊的瀏覽器并不支持它。此時(shí)我們常會(huì)用一個(gè)等價(jià)的類名來替代該特性：

input[type=number] {
  /* 這里的樣式會(huì)在某些瀏覽器下失效 */
}

input.number {
  /* 該處樣式可以在每個(gè)地方都生效 */
}

要注意下面的代碼是沒有必要的（冗余），而且也會(huì)在某些瀏覽器下失效：

input[type=number],
input.number {
  /* 這里的樣式會(huì)在某些瀏覽器下失效，因?yàn)樗鼈內(nèi)舨荒苁∑渲幸粋€(gè)選擇器，
     就會(huì)跳過整段規(guī)則 */
}

在HTML表單中定義按鈕有兩種方式：

元素的type特性設(shè)為button, submit, reset或image

元素

若你想使用元素選擇器來指定CSS，使用元素的話會(huì)有些麻煩：

input {
  /* 這處規(guī)則會(huì)覆蓋input定義的按鈕的默認(rèn)樣式 */
  border: 1px solid #CCC;
}

input.button {
  /* 這里并不會(huì)恢復(fù)默認(rèn)樣式 */
  border: none;
}

input.button {
  /* 這里也不會(huì)恢復(fù)！實(shí)際上在所有瀏覽器下都沒有方法來做到這點(diǎn)。 */
  border: auto;
}

使用

元素則要面對(duì)兩個(gè)問題：

老舊IE下會(huì)有一個(gè)bug，當(dāng)用戶點(diǎn)擊按鈕時(shí)，發(fā)送的不是value特性的內(nèi)容，而是

元素起止標(biāo)簽間的HTML內(nèi)容。當(dāng)然個(gè)問題只有當(dāng)你想發(fā)送value的值時(shí)才會(huì)凸顯，例如，你可能想處理關(guān)于用戶點(diǎn)擊了哪個(gè)按鈕的數(shù)據(jù)。

某些非常老舊的瀏覽器不會(huì)吧submit作為type特性的默認(rèn)值，故而還是推薦你總是設(shè)置

元素的type特性。

Do A

選擇這兩種元素中的哪種，取決于你項(xiàng)目中的約束。

HTML表單和老舊瀏覽器的最大問題是對(duì)CSS的支持。如你在表單組件的屬性兼容性表一文中所見到的，這很難處理。即使在文本元素上可能可以做些微調(diào)（比如大小和顏色），但通常也會(huì)有副作用。所以剩下的最佳方式就是不要給HTML表單組件添加一點(diǎn)樣式，不過你仍可以給周邊元素添加樣式。作為專業(yè)人士，若你遇到你的客戶一定需要給表單組件加樣式，可以調(diào)研下某些困難的技術(shù)，譬如用JavaScript重構(gòu)表單組件。但其實(shí)在這種情況下，你應(yīng)該毫不猶豫地指出客戶的愚蠢之處。

雖然在現(xiàn)代瀏覽器上JavaScript是個(gè)很棒的技術(shù)，但在老舊瀏覽器上使用它卻有很多問題。

JavaScript最大的問題就是API的可用性。因此，最佳實(shí)踐是使用”不起眼的“JavaScript。這是一種開發(fā)模式，規(guī)定了兩個(gè)要求：

結(jié)構(gòu)和行為嚴(yán)格分離。

如果代碼掛掉，頁(yè)面內(nèi)容和基本的功能必須還有可訪問性和可用性。

The principles of unobtrusive JavaScript一文很好地闡述了該觀點(diǎn)。（該文由Peter-Paul Koch為Dev.Opera.com撰寫，現(xiàn)已移至Docs.WebPlatform.org）

多數(shù)情況下，一個(gè)好的”polyfill“可以幫我們提供那些缺失的API。所謂的polyfill，是指一小段用于“填補(bǔ)”老舊瀏覽器功能上的坑的JavaScript。它們可以用于提供任何功能上的支持，相比CSS或HTML的polyfill，為JavaScript使用polyfill會(huì)有更小的風(fēng)險(xiǎn)；畢竟JavaScript會(huì)在很多情況下掛掉（比如網(wǎng)絡(luò)問題、代碼沖突等等）。但即使不用polyfill，只要你開發(fā)時(shí)心中存有“不起眼的“JavaScript原則，其實(shí)也沒什么大不了。

為缺失的API提供polyfill，最佳的方式是使用Modernizr庫(kù)及其衍生項(xiàng)目YepNoep。Modernizr是一個(gè)能測(cè)試功能可用性、并以此來做相應(yīng)動(dòng)作的庫(kù)。YepNoep則是一個(gè)按條件作加載的庫(kù)。

舉個(gè)例子：

Modernizr.load({
  // 此處測(cè)試瀏覽器是否支持HTML5的表單校驗(yàn)API
  test : Modernizr.formvalidation,
 
  // 若瀏覽器不支持，則加載下列polyfill
  nope : form-validation-API-polyfill.js,
 
  // 在任何情況下，依賴那個(gè)API的核心App文件都會(huì)被下載
  both : app.js,
 
  // 一旦這些文件都被加載了，下面的函數(shù)調(diào)用就會(huì)來初始化App
  complete : function () {
    app.init();
  }
});

Modernizr團(tuán)隊(duì)還維護(hù)了一個(gè)好用的polyfill列表，請(qǐng)按需自取。

注意：在使用“不起眼的“JavaScript原則和優(yōu)雅降級(jí)技術(shù)時(shí)，Modernizr其它一些很棒的特性也能幫到你。請(qǐng)閱讀Modernizr的文檔

即使像Modernizr已經(jīng)很注重性能了，但加載200kB的polyfill仍會(huì)影響應(yīng)用的性能，這對(duì)老舊瀏覽器來講更為嚴(yán)重。許多老舊瀏覽器的JavaScript引擎很慢，這樣會(huì)讓polyfill的執(zhí)行給用戶造成不好的體驗(yàn)。性能是本身就是一個(gè)主題，老舊瀏覽器對(duì)性能更是敏感：首先它們就很慢，再者依賴越多的polyfill它們就得執(zhí)行更多的JavaScript。所以，相比現(xiàn)代瀏覽器，老舊瀏覽器有著雙重的負(fù)擔(dān)；也因此對(duì)代碼在老舊瀏覽器上的實(shí)際運(yùn)行情況，更要進(jìn)行測(cè)試。甚至有時(shí)為了性能，相比在所有瀏覽器上實(shí)現(xiàn)相同功能，還得在老舊瀏覽器移除某些些會(huì)帶來更好用戶體驗(yàn)的功能。最后還有一個(gè)建議，多考慮下你的終端用戶吧。

如你所見，處理老舊瀏覽器所涉及的內(nèi)容不止有表單。這是一整套的技術(shù)，全面掌握它們已經(jīng)超出了本文的范圍。

如果已經(jīng)讀完了這個(gè)HTML表單指南的全部文章，你應(yīng)該能很輕松地使用表單了。若你還發(fā)現(xiàn)了哪些新技術(shù)、新技巧，也請(qǐng)幫助完善這個(gè)指南。