【譯】遺留瀏覽器中的表單

時間 2019-11-09

原文原文鏈接

系列文章說明javascript

原文html

全部的web開發者都會很快（或者很痛苦地）意識到Web是一個粗糙的環境，其中最糟糕的一點就是老舊的瀏覽器。提到「老舊瀏覽器」，咱們腦海中每每復現的就是舊版的IE。但其實老舊瀏覽器不止這一種，一個一年前的Firefox，好比ESR版本也算得上老舊了。至於移動端，因爲有些瀏覽器和操做系統都不能升級，這就致使了許多老舊的安卓手機或iPhone上的瀏覽器不是最新的，這些也算是老舊瀏覽器。html5

使人沮喪的是，咱們工做的一部分都要耗在老舊瀏覽器這片荒野上。但幸運的是，有一些技巧能夠協助解決由老舊瀏覽器引發的80%的問題。java

瞭解存在的問題

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

瀏覽器開發商的文檔

Mozilla：就在你如今所訪問的地方啦（譯註：MDN）github
Microsoft：Internet Explorer Standards Support Documentationweb
Opera：Web specification support in Operachrome
WebKit：因爲該引擎有着幾個不一樣的版本，想找到對應文檔須要些技巧：segmentfault
- 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帶來的輸入框類型很是酷，由於它們做降級處理的方法是可預見的。若瀏覽器不認識<input>元素的type特性值，就會回退到text類型。

<label for="myColor">
  Pick a color
  <input type="color" id="myColor" name="color">
</label>

chrome 24	Firefox 18

CSS的特性選擇器

CSS的特性選擇器對HTML表單來說很是有用，但某些老舊的瀏覽器並不支持它。此時咱們常會用一個等價的類名來替代該特性：

<input type="number" class="number">

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

input.number {
  /* 該處樣式能夠在每一個地方都生效 */
}

要注意下面的代碼是沒有必要的（冗餘），並且也會在某些瀏覽器下失效：

input[type=number],
input.number {
  /* 這裏的樣式會在某些瀏覽器下失效，由於它們若不能失敗其中一個選擇器，
     就會跳過整段規則 */
}

表單按鈕

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

<input>元素的type特性設爲button, submit, reset或image
<button>元素

若你想使用元素選擇器來指定CSS，使用<input>元素的話會有些麻煩：

<input type="button" class="button" value="click me">

input {
  /* 這處規則會覆蓋input定義的按鈕的默認樣式 */
  border: 1px solid #CCC;
}

input.button {
  /* 這裏並不會恢復默認樣式 */
  border: none;
}

input.button {
  /* 這裏也不會恢復！實際上在全部瀏覽器下都沒有方法來作到這點。 */
  border: auto;
}

使用<button>元素則要面對兩個問題：

老舊IE下會有一個bug，當用戶點擊按鈕時，發送的不是value特性的內容，而是<button>元素起止標籤間的HTML內容。固然個問題只有當你想發送value的值時纔會凸顯，例如，你可能想處理關於用戶點擊了哪一個按鈕的數據。
某些很是老舊的瀏覽器不會吧submit做爲type特性的默認值，故而仍是推薦你老是設置<button>元素的type特性。

<!-- 有時點擊該按鈕會發送"<em>Do A</em>"而不是"A" -->
<button type="submit" name="IWantTo" value="A">
  <em>Do A</em>
</button>

選擇這兩種元素中的哪一種，取決於你項目中的約束。

放棄CSS

HTML表單和老舊瀏覽器的最大問題是對CSS的支持。如你在表單組件的屬性兼容性表一文中所見到的，這很難處理。即便在文本元素上可能能夠作些微調（好比大小和顏色），但一般也會有反作用。因此剩下的最佳方式就是不要給HTML表單組件添加一點樣式，不過你仍能夠給周邊元素添加樣式。做爲專業人士，若你遇到你的客戶必定須要給表單組件加樣式，能夠調研下某些困難的技術，譬如用JavaScript重構表單組件。但其實在這種狀況下，你應該堅決果斷地指出客戶的愚蠢之處。

特徵檢測和polyfill

雖然在現代瀏覽器上JavaScript是個很棒的技術，但在老舊瀏覽器上使用它卻有不少問題。

「不起眼的「JavaScript

JavaScript最大的問題就是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。因此，相比現代瀏覽器，老舊瀏覽器有着雙重的負擔；也所以對代碼在老舊瀏覽器上的實際運行狀況，更要進行測試。甚至有時爲了性能，相比在全部瀏覽器上實現相同功能，還得在老舊瀏覽器移除某些些會帶來更好用戶體驗的功能。最後還有一個建議，多考慮下你的終端用戶吧。