[译文]Formsinlegacybrowsers

系列文章讲解原文所有的web开发者都会很快（或者痛苦地）意识到Web是一个粗糙的环境，而最糟糕的一点就是旧的浏览器。说到“老浏览器”，我们往往会想到老版本的IE。但事实上，老式浏览器不止一种。一年前的Firefox，例如ESR版本，也被认为是旧的。在移动端，由于部分浏览器和操作系统无法升级，导致很多旧安卓手机或iPhone上的浏览器都不是最新的，也属于老浏览器。令人沮丧的是，我们的部分工作是在旧浏览器的荒野中度过的。但幸运的是，有一些技巧可以帮助解决80%由旧浏览器引起的问题。理解问题其实首先要做的就是阅读这些浏览器的文档，尝试理解共同的部分。例如，CSS支持是HTML表单的一个主要问题，如果您刚刚开始，您应该首先检查您要使用的元素（或DMO接口）的支持。尽管MDN上提供了许多网页使用的元素、属性和API的兼容性表；其他资源也可以提供很大的帮助：浏览器开发者文档Mozilla：就在你现在的位置（译注：MDN）微软：InternetExplorerStandardsSupportDocumentationOpera：OperaWebKit中的Web规范支持：由于该引擎有多个不同的版本，因此需要一些技巧找到相应的文档：Webkit博客和PlanetWebkit总结了一些Webkit内核开发人员有史以来最好的文章。Chromium网站也很重要。Apple网站上也有关于各种技术支持级别的信息，第三方文档CanIUse。QuirksMode是关于浏览器兼容性的优秀资源。它的移动部分是最好的。PositionIsEverything是有关旧浏览器渲染问题及其修复方法的最佳资源。MobileHTML5有很多移动浏览器兼容性信息，不仅是那些“前5名浏览器”（译注：可能包括Apple、Android、Nokia、Amazon、Blackberry）让事情变得简单，因为HTML表单包含很多复杂的交互，我们有记住一条规则：尽可能简单。很多时候，我们想让表单“漂亮”或者“功能高级”，但是构建一个高效的HTML表单并不能单靠设计或者技术来解决。建议花一些时间阅读这篇关于UXForTheMasses的表单可用性文章。优雅降级是Web开发人员最好的朋友。优雅降级和渐进增强是两种开发范式，可让您通过同时支持多种浏览器来构建出色的产品。当您在现代浏览器上构建某些东西并希望确保它在旧浏览器上工作时，您正在使用优雅降级。接下来，让我们看一些HTML表单的例子：HTML输入框类型HTML5带来的输入框类型非常酷，因为它们退化的方式是可以预见的。如果浏览器无法识别元素的type属性值，它将回退到文本类型。Pickacolorchrome24Firefox18CSSfeatureselectorCSSfeatureselectorforHTMLform非常有用，但有些老了浏览器不支持它。这时候，我们往往会用一个等价的类名来代替这个特性：.nu??mber{/*这里的样式可以在任何地方生效*/}注意下面的代码是不必要的（多余的），在某些浏览器中也会失效：在某些浏览器下会失败，因为如果它们不能让其中一个选择器失败，它们将跳过整个规则*/}表单按钮用两种方式定义HTML表单中的按钮：button,submit,resetorimage元素如果想用元素选择器指定CSS，使用元素会有点麻烦：input{/*该规则将覆盖由input定义的按钮的默认样式*/border:1pxsolid#CCC;}input.button{/*这不会恢复为默认样式*/border:none;}input.button{/*也不会在这里恢复！实际上在所有浏览器下都没有办法做到这一点。*/border:auto;}使用元素有两个问题：老的IE会有bug。当用户点击按钮时，发送的不是value属性的内容，而是标签之间元素HTML内容的开始和结束。当然只有当你想发送value的值时才会出现这个问题，比如你可能想处理用户点击了哪个按钮的数据。一些非常古老的浏览器不使用submit作为type属性的默认值，因此建议您始终在元素上设置type属性。DoA选择这两个元素中的哪一个取决于您项目中的约束。放弃CSSHTML表单和旧浏览器的最大问题是CSS支持。正如您在表单组件的兼容性表一文中看到的，这很难处理。尽管可以对文本元素（例如大小和颜色）进行一些微调，但通常会产生副作用。所以剩下的最好的事情就是完全不对HTML表单组件设置样式，但您仍然可以设置周围元素的样式。作为专业人士，如果遇到客户肯定需要给表单组件添加样式，可以研究一些比较难的技术，比如用JavaScript重构表单组件。但在这种情况下，你应该毫不犹豫地指出客户的愚蠢。特征检测和polyfills虽然JavaScript是现代浏览器的一项伟大技术，但在旧浏览器上使用它会遇到很多问题。“不起眼”的JavaScriptJavaScript最大的问题是API的可用性。因此，最好的做法是使用“简陋”的JavaScript。这是一种指定两个要求的开发模式：结构和行为的严格分离。如果代码死了，页面内容和基本功能必须仍然可以访问和使用。文章TheprinciplesofunobtrusiveJavaScript很好地说明了这一点。（本文由Peter-PaulKoch为Dev.Opera.com撰写，现已移至Docs.WebPlatform.org）Modernizr库在大多数情况下，一个好的“polyfill”可以帮助我们提供那些缺失的API。所谓polyfill是指一小段JavaScript，用来“填”旧浏览器功能的坑。它们可用于提供任何类型的功能支持，并且JavaScript的polyfill比CSS或HTML的polyfill风险更小；毕竟JavaScript在很多情况下都会挂掉（比如网络问题、代码冲突等）。但即使没有polyfill，只要您在开发时牢记“谦虚”的JavaScript原则，这也没什么大不了的。为缺失的API提供polyfill的最佳方法是使用Modernizr库及其衍生项目YepNoep。Modernizr是一个库，用于测试功能的可用性并据此采取行动。YepNoep是一个用于条件加载的库。例如：Modernizr.load({//在这里测试浏览器是否支持HTML5表单验证APItest:Modernizr.formvalidation,//如果浏览器不支持，加载下面的polyfillnope:form-validation-API-polyfill.js,//在任何情况下，依赖于该API的核心应用程序文件都将被下载：app.js,//一旦这些文件被加载，下面的函数调用将初始化应用程序完成：在里面（）;}}）;Modernizr团队还维护了一个有用的polyfill列表，请按需获取。注意：Modernizr的其他一些很酷的功能也可以在您使用“谦逊”的JavaScript原则和优雅的降级技术时为您提供帮助。请阅读Modernizr的文档以关注性能。即使Modernizr已经注重性能，加载一个200kB的polyfill仍然会影响应用程序的性能，这对于旧浏览器来说更为严重。许多旧浏览器的JavaScript引擎速度较慢，这可能会导致polyfill执行，从而给用户带来糟糕的体验。性能本身就是一个话题，旧的浏览器对性能更加敏感：首先它们很慢，其次它们依赖的polyfill越多，它们就必须执行更多的JavaScript。因此，与现代浏览器相比，旧浏览器有双重负担；因此，更有必要测试代码在旧浏览器上的实际运行情况。有时即使是为了性能，而不是在所有浏览器上实现相同的功能，一些可以带来更好用户体验的功能也必须在旧浏览器中删除。最后，还有一个建议，多为你的终端用户着想。结束语如您所见，处理旧版浏览器涉及的不仅仅是表单。这是一整套技术，全面掌握它们超出了本文的范围。如果您已经阅读了本HTML表单指南中的整篇文章，您应该能够轻松地使用表单。如果您发现了任何新的技术和技巧，请帮助改进本指南。