【译】遗留浏览器中的表单

时间 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。因此，相比现代浏览器，老旧浏览器有着双重的负担；也所以对代码在老旧浏览器上的实际运行状况，更要进行测试。甚至有时为了性能，相比在全部浏览器上实现相同功能，还得在老旧浏览器移除某些些会带来更好用户体验的功能。最后还有一个建议，多考虑下你的终端用户吧。

结论

如你所见，处理老旧浏览器所涉及的内容不止有表单。这是一整套的技术，全面掌握它们已经超出了本文的范围。

若是已经读完了这个HTML表单指南的所有文章，你应该能很轻松地使用表单了。若你还发现了哪些新技术、新技巧，也请帮助完善这个指南。