On Styled Form Elements

今天给feedpusher加了random item的功能, 随机出的一文, 觉得还算不错, 所以就翻译一下. 原作者主要介绍了下对input,form元素的样式定义历史, 从以前的类型少但自定义空间大, 到现在类型多, 可自定义空间反而变小了. 不能完全确认作者的心态是积极还是消极, 不过略有点怅然所示的感觉, 毕竟可控的地方变少了, 确实让创造的感觉变弱了.

==============正文============

20多年来, 我们一直用着几乎同样的input和form元素: 文本输入框, 密码类型,下拉框, 单选框, 复选框, 文件管理框, 隐藏域以及不同类型的button: submit, reset, image以及默认的button.

一直以来, 我们使用的这些input元素都是伴随着操作系统或者浏览器内置的样式. 遗憾的是, 我们已经差不多研究出来如何对抗这些默认样式, 从而对这些基础的或者高级的元素应用我们自己的样式的方法了(高级和低级区别主要在于伪类–译者附).

自定义样式通常意味着要使用background-image, 伪类, 还有各种奇怪的前缀修饰, 选择性的隐藏特定的元素. 限于篇幅原因本文不会介绍各种技巧, 但是这些input元素以及他们应用的复杂性都无疑放大了跨浏览器和平台的问题. 每一种浏览器和操作系统的组合都使用着自己的样式和功能, 其中有一些很难去控制(应该是说很难覆盖重写样式–译者附), 而它们之间都是不一致的.

虽然从样式上来说, input元素相当的复杂… 但是这些元素本身的交互形式确实非常简单的–点击, 输入, 点击其它元素. 交互的简单就允许我们对样式的定义有更多一点的追求, 来获得更好的体验. 基本只有下拉框因为带有选项列表, 所以交互形式更加高级(繁琐)一些.

随着web技术的发展, 我们对于更好的界面体验有了更多的渴求. 我们创造了多JS的组件, 来提升基础的input元素的使用体验(比如datepicker, jqueryUI), 这也确实起到了一段时间的作用, 直到2007年现代移动互联网时代爆发, 改变了所有事情.

环境的变化产生了交互的变化, 我们本来很可爱的日历样式的日期选择组件在3.5-inch的触摸屏幕上就变成了赤裸裸的噩梦, 甚至是那些下拉框都需要重新思考其交互形式.

iPhone默认的下拉框是一个满屏宽的滚轮界面, 就其尺寸来说交互形式非常自然. 虽然说它不算是完美的界面, 尤其是当选项超过了10左右(千万不要让我从选择国家的列表开始啊…), 但是本身已经是一个相当大的改进了.

Android的下拉框也是类似的处理方式,只是形式上略有不同–如下:

下例是一个iOS内置的日期选择器–由三个下拉框组成, 这就比直接在移动端使用原来日历样式的那个好很多了.

标准的select元素在这些设备上的支持做的都很好, 但是我们却无法在网页上直接使用这些系统原生自带的组件, 比如iOS的日期选择. 幸运的是, HTML5给我们带来了一些全新的input类型. 比如date以及range类型, 都得以让浏览器和操作系统处理更加附加的交互形式. Apple很快就在iOS5中引入了date的支持, 并且给了我们在网页上直接调用iOS date picker的能力.

正是因为对这些新的input类型的支持, 我们如今已经可以使用这些丰富的类型, 只需要在适当的时候给予一些容错, 或者至少是一些友好的提示–对于不支持的input类型, 会自动变成文本框. 下拉框和日期选择都只是一个简单的例子, 表明系统正在更好地处理元素–毕竟设备本身总是能够更好决定自己的用处而不是不可知的网络.

过去只有简单交互形式的input元素给了我们试验的空间, 但是如今复杂的元素交互形式却给我们留下了更少的空间. 在浏览器和操作系统接管了大多数交互的情况下, 我们只能任由他们了. 网络是不会停止发展的, 我们正在走向更加复杂的元素交互, 但却更少的可控性.

这让我开始好奇我们还要和那些原生样式抗争多久. 也许是到了我们停止修改, 伪造input元素类型, 接受时代的大势所趋.

Source Link:
A List Apart-On Styled Form Elements