資訊專欄INFORMATION COLUMN
摘要：提到老舊瀏覽器，我們腦海中往往復現的就是舊版的。但幸運的是，有一些技巧可以協助解決由老舊瀏覽器引起的的問題。放棄表單和老舊瀏覽器的最大問題是對的支持。結論如你所見，處理老舊瀏覽器所涉及的內容不止有表單。
系列文章說明
原文
所有的web開發者都會很快（或者很痛苦地）意識到Web是一個粗糙的環境，其中最糟糕的一點就是老舊的瀏覽器。提到“老舊瀏覽器”，我們腦海中往往復現的就是舊版的IE。但其實老舊瀏覽器不止這一種，一個一年前的Firefox，比如ESR版本也算得上老舊了。至于移動端，由于有些瀏覽器和操作系統都不能升級，這就導致了許多老舊的安卓手機或iPhone上的瀏覽器不是最新的，這些也算是老舊瀏覽器。
令人沮喪的是，我們工作的一部分都要耗在老舊瀏覽器這片荒野上。但幸運的是，有一些技巧可以協助解決由老舊瀏覽器引起的80%的問題。
了解存在的問題實際上，首要的任務是閱讀這些瀏覽器的文檔、試著理解其公共部分。比如，CSS的支持程度是HTML表單的一個重大問題，若你剛開始開發，應先檢查下要用的元素（或DMO接口）的支持程度。雖然許多web頁面要用的元素、屬性、API的兼容性表格，MDN上都有；但別的資源也能提供很大的幫助：
瀏覽器開發商的文檔Mozilla：就在你現在所訪問的地方啦（譯注：MDN）
Microsoft：Internet Explorer Standards Support Documentation
Opera：Web specification support in Opera
WebKit：由于該引擎有著幾個不同的版本，想找到對應文檔需要些技巧：
Webkit博客和Planet Webkit匯總了Webkit內核開發者一些最好的文章。
chromium網站也很重要。
還有Apple的網站
第三方文檔Can I Use上有各類技術的支持程度信息。
Quirks Mode是關于瀏覽器兼容性的一個極好資源。其移動部分是現在最好的。
Position Is Everything是一份關于老舊瀏覽器渲染問題及其解決方法的最好資料。
Mobile HTML5 有著大量移動端瀏覽器兼容性信息，不只有那些“前5的瀏覽器”（譯注：大概包括蘋果、安卓、Nokia、Amazon、Blackberry）
讓事情變得簡單由于HTML表單包含了大量復雜的交互，我們得記住一條法則：keep it as simple as possible。許多情況下我們會想讓表單變得“漂亮”或“帶有高級功能”，但構建高效的HTML表單并不單靠設計或技術就能解決，建議花點時間閱讀下forms usability on UX For The Masses這篇文章.
優雅降級是web開發者的最佳朋友優雅降級和漸進增強這兩個開發模式通過同時支持眾多的瀏覽器，能讓你建立偉大的產品。當你在現代瀏覽器上構建了一些東西，并想確保它能在老舊瀏覽器上運行時，你就是在使用優雅降級了。
接下來我們看些關于HTML表單的例子：
HTML的輸入框類型HTML5帶來的輸入框類型非常酷，因為它們作降級處理的方法是可預見的。若瀏覽器不認識元素的type特性值，就會回退到text類型。
| chrome 24 | Firefox 18 |
|---|---|
CSS的特性選擇器對HTML表單來講非常有用，但某些老舊的瀏覽器并不支持它。此時我們常會用一個等價的類名來替代該特性：
input[type=number] {
/* 這里的樣式會在某些瀏覽器下失效 */
}
input.number {
/* 該處樣式可以在每個地方都生效 */
}
要注意下面的代碼是沒有必要的（冗余），而且也會在某些瀏覽器下失效：
input[type=number],
input.number {
/* 這里的樣式會在某些瀏覽器下失效，因為它們若不能失敗其中一個選擇器，
就會跳過整段規則 */
}
表單按鈕
在HTML表單中定義按鈕有兩種方式：
元素的type特性設為button, submit, reset或image
元素
若你想使用元素選擇器來指定CSS，使用元素的話會有些麻煩：
input {
/* 這處規則會覆蓋input定義的按鈕的默認樣式 */
border: 1px solid #CCC;
}
input.button {
/* 這里并不會恢復默認樣式 */
border: none;
}
input.button {
/* 這里也不會恢復！實際上在所有瀏覽器下都沒有方法來做到這點。 */
border: auto;
}
使用元素則要面對兩個問題：
老舊IE下會有一個bug，當用戶點擊按鈕時，發送的不是value特性的內容，而是元素起止標簽間的HTML內容。當然個問題只有當你想發送value的值時才會凸顯，例如，你可能想處理關于用戶點擊了哪個按鈕的數據。
某些非常老舊的瀏覽器不會吧submit作為type特性的默認值，故而還是推薦你總是設置元素的type特性。
選擇這兩種元素中的哪種，取決于你項目中的約束。
放棄CSSHTML表單和老舊瀏覽器的最大問題是對CSS的支持。如你在表單組件的屬性兼容性表一文中所見到的，這很難處理。即使在文本元素上可能可以做些微調（比如大小和顏色），但通常也會有副作用。所以剩下的最佳方式就是不要給HTML表單組件添加一點樣式，不過你仍可以給周邊元素添加樣式。作為專業人士，若你遇到你的客戶一定需要給表單組件加樣式，可以調研下某些困難的技術，譬如用JavaScript重構表單組件。但其實在這種情況下，你應該毫不猶豫地指出客戶的愚蠢之處。
特征檢測和polyfill雖然在現代瀏覽器上JavaScript是個很棒的技術，但在老舊瀏覽器上使用它卻有很多問題。
“不起眼的“JavaScriptJavaScript最大的問題就是API的可用性。因此，最佳實踐是使用”不起眼的“JavaScript。這是一種開發模式，規定了兩個要求：
結構和行為嚴格分離。
如果代碼掛掉，頁面內容和基本的功能必須還有可訪問性和可用性。
The principles of unobtrusive JavaScript一文很好地闡述了該觀點。（該文由Peter-Paul Koch為Dev.Opera.com撰寫，現已移至Docs.WebPlatform.org）
Modernizr庫多數情況下，一個好的”polyfill“可以幫我們提供那些缺失的API。所謂的polyfill，是指一小段用于“填補”老舊瀏覽器功能上的坑的JavaScript。它們可以用于提供任何功能上的支持，相比CSS或HTML的polyfill，為JavaScript使用polyfill會有更小的風險；畢竟JavaScript會在很多情況下掛掉（比如網絡問題、代碼沖突等等）。但即使不用polyfill，只要你開發時心中存有“不起眼的“JavaScript原則，其實也沒什么大不了。
為缺失的API提供polyfill，最佳的方式是使用Modernizr庫及其衍生項目YepNoep。Modernizr是一個能測試功能可用性、并以此來做相應動作的庫。YepNoep則是一個按條件作加載的庫。
舉個例子：
Modernizr.load({
// 此處測試瀏覽器是否支持HTML5的表單校驗API
test : Modernizr.formvalidation,
// 若瀏覽器不支持，則加載下列polyfill
nope : form-validation-API-polyfill.js,
// 在任何情況下，依賴那個API的核心App文件都會被下載
both : app.js,
// 一旦這些文件都被加載了，下面的函數調用就會來初始化App
complete : function () {
app.init();
}
});
Modernizr團隊還維護了一個好用的polyfill列表，請按需自取。
關注性能注意：在使用“不起眼的“JavaScript原則和優雅降級技術時，Modernizr其它一些很棒的特性也能幫到你。請閱讀Modernizr的文檔
即使像Modernizr已經很注重性能了，但加載200kB的polyfill仍會影響應用的性能，這對老舊瀏覽器來講更為嚴重。許多老舊瀏覽器的JavaScript引擎很慢，這樣會讓polyfill的執行給用戶造成不好的體驗。性能是本身就是一個主題，老舊瀏覽器對性能更是敏感：首先它們就很慢，再者依賴越多的polyfill它們就得執行更多的JavaScript。所以，相比現代瀏覽器，老舊瀏覽器有著雙重的負擔；也因此對代碼在老舊瀏覽器上的實際運行情況，更要進行測試。甚至有時為了性能，相比在所有瀏覽器上實現相同功能，還得在老舊瀏覽器移除某些些會帶來更好用戶體驗的功能。最后還有一個建議，多考慮下你的終端用戶吧。
結論如你所見，處理老舊瀏覽器所涉及的內容不止有表單。這是一整套的技術，全面掌握它們已經超出了本文的范圍。
如果已經讀完了這個HTML表單指南的全部文章，你應該能很輕松地使用表單了。若你還發現了哪些新技術、新技巧，也請幫助完善這個指南。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84150.html
摘要：提到老舊瀏覽器，我們腦海中往往復現的就是舊版的。但幸運的是，有一些技巧可以協助解決由老舊瀏覽器引起的的問題。放棄表單和老舊瀏覽器的最大問題是對的支持。結論如你所見，處理老舊瀏覽器所涉及的內容不止有表單。 系列文章說明 原文 所有的web開發者都會很快（或者很痛苦地）意識到Web是一個粗糙的環境，其中最糟糕的一點就是老舊的瀏覽器。提到老舊瀏覽器，我們腦海中往往復現的就是舊版的IE。但...
摘要：一個表單由一或多個部件組成，這些部件可以是文本框單行或多行選擇框按鈕復選框或單選按鈕。在我們的示例里，一個文本框中用了該屬性的默認值，該值表示一個基本的單行文本框，用于接收無控制或驗證的任何文本。 前言 這個系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關的基礎知識。而表單作為一個經典的頁面交互方式，是每個前端工程師繞不開的話題，通過翻譯這個系列的文章既是有助于掃清自己的知識盲區...
摘要：能異步地發送任意數據的技術稱為，表示異步的和。若你使用，使用發送表單還會影響同源策略，并導致內容被發送到一個無法訪問的中。但要手動發送二進制數據的話，還有很多額外工作要做。用來發送二進制是很直接的，使用方法就好了。 系列文章說明 原文 在[發送表單數據]()一文中，HTML表單可以聲明式地發送一個HTTP請求。但表單也可以用JavaScript來準備一個HTTP請求。本文將探索如何...
摘要：能異步地發送任意數據的技術稱為，表示異步的和。若你使用，使用發送表單還會影響同源策略，并導致內容被發送到一個無法訪問的中。但要手動發送二進制數據的話，還有很多額外工作要做。用來發送二進制是很直接的，使用方法就好了。 系列文章說明 原文 在[發送表單數據]()一文中，HTML表單可以聲明式地發送一個HTTP請求。但表單也可以用JavaScript來準備一個HTTP請求。本文將探索如何...
摘要：協議是萬維網數據通信的基礎在這個協議上可以對同一使用不同的方法獲取數據下面展示了幾種不同的方法將未經加密的信息發送的服務器是最通用的方法該方法除了服務端不返回響應內容只返回頭信息之外同是一樣的用于向服務器發送表單數據請求不會被緩存將所指示的 HTTP協議是萬維網數據通信的基礎. 在這個協議上可以對同一URL使用不同的方法獲取數據.下面展示了幾種不同的HTTP方法. GET 將未經加...
閱讀 1478·2021-10-14 09:43
閱讀 1442·2021-10-09 09:58
閱讀 1937·2021-09-28 09:42
閱讀 3727·2021-09-26 09:55
閱讀 1752·2021-08-27 16:23
閱讀 2755·2021-08-23 09:46
閱讀 906·2019-08-30 15:55
閱讀 1405·2019-08-30 15:54
