20080511

译文:重新挖掘button元素的作用

Author:  WinkCategories:  XHTML/CSSComments Off

在制作带有图片的按钮时,经常会为如何更有效地组织CSS以灵活应对各种不同按钮而发愁,以前我的做法通常是为input写专门的class,往往会造成很大的代码量,而这篇文章正好给了我很好的启发。仓促翻译,水平有限,见谅。

为用户提供风格统一的界面对于每一位程序设计者来说都是亘古不变的追求。不过在Web设计中却这种统一却尤为困难,这是因为在不同浏览器和操作系统上,视觉渲染有着极大的差别。这种差异在处理表单元素时最为明显,其中又以submit按钮实现视觉统一最为困难。

现今的情况是,属性为type="submit"input被渲染得要么很难看(Firefox),要么渲染得很隔路(IE)(译注:原谅我用了一个北方词形容它,实在是代表了我对IE的一贯看法),又或者非常死板(Safari)。最常用的解决方案是我们自己制作图片嵌入input。不幸的是,使用这种方法的话,每次需要新的按钮时,就需要被迫重复乏味的图片编辑工作。我们需要一个更好的方法——对设计师来说更灵活更有意义的方法。幸运的是这种方法早已存在,我们所需做的只是一点点小修改。各位,让我来介绍<button>元素这位朋友。

input VS button

标准的提交按钮的写法是:

<input type="submit" value="Submit" />

三种浏览器的显示效果如下:

input提交按钮

使用button元素当作提交按钮的写法如下:

<button type="submit">Submit</button>

显示效果是:

button

这些按钮和上面的写法在运行和表现上完全相同。除了用其提交表单之外,还可以为它添加accesskeytabindex属性。Safari下只是视觉效果不同(未使用aqua的界面效果)。<button>标签最棒之处在于可以在其中插入实用的HTML元素,比如图片:

<button type="submit">&ltimg src="" alt="" /> Submit</button>

显示效果为:

带图片的button

很不错。(好吧,它们看起来是有点难看,不过我说过它们还需要一点点修改。)事实上,按照W3C的说法,<button>元素就是为了应对这种变现差异而产生的。

使用BUTTON元素创建的按钮功能和使用INPUT元素所创建的相同,但是前者提供了更丰富的表现可能:BUTTON元素可以包含其它内容。例如,包含了图片的BUTTON元素作用类似于设置了type="image"的INPUT元素,但是BUTTON元素的type可以设置内容。

BUTTON元素-W3C

所以我们要寻找一个解决方案,好在互联网上的朋友们提供的大量笔记为我们解决这样一个难题提供了很好的帮助。的确很好用,不幸的是很多设计师和开发人员甚至都不知道这个标签的存在。在将我的Wufoo项目中图片类型的input全部替换为<button>元素之前,需要先确定这些标签和CSS可以满足如下需求:

需求:

  • 表现形式必须是按钮;
  • 在不同的浏览器中的表现形式必须相同;
  • 按钮的样式需要可以同样在链接上使用。(因为Wufoo项目中的交互都是由表单的提交或者链接触发的Ajax来发起的。这些提交按钮和链接会有挨着出现的可能,我需要它们有着同样的样式。)
  • 标签形式灵活,以方便很多不同情况下的修改使用。
  • 允许使用图标和颜色来有效地表达交互过程信息。

带着这些小挑战,我开始研究CSS的写法。在解决了一些跨浏览器的问题之后,写出了下面的代码(在Wufoo项目中可以到处看到):

成果

无需太惊讶,就是这么简单有效。我喜欢这种处理按钮的方式原因就是可以使用类似FAMFAMFAM这种数目超过一千的图标库来随意表达我的各种想法而无需使用Photoshop来一个个制作按钮。如果重新留意一下代码,可以看到最后两个按钮其实是链接:

<div class="buttons">
	<button type="submit" class="positive"><img src="tick.gif" alt=""/> Save</button>
	<a href="/password/reset/"><img src="textfield_key.gif" alt=""/> Change Password</a>
	<a href="#" class="negative"><img src="cross.gif" alt=""/> Cancel</a>
</div>

这样做有效的原因是大部分Web程序的动作都是由事件驱动的,因此可以简单地通过发送给用户一个指向特定URL的链接来将动作初始化。使用对于链接和按钮都有效的样式可以使Ajax和标准提交按钮发起的交互的表现统一上更为灵活。

说句题外话,你可能会想知道为什么我将图标的alt属性留空。alt是图片的必要属性,这里却留空,这的确令人讶异。值为空的alt属性完全符合标准,可以告诉浏览器哪些信息是可以忽略的,以节省用户用于找寻其它控件时的宝贵时间。因为这些图标其实是多余的,我并不想用户因为这些用于视觉表现的图片的信息而浪费时间。用户应该只看到“Submit”的提示而并非容易令人混淆的“Checkmark Submit”。

CSS代码

用于控制这些按钮样式的CSS代码大部分还是很直观的。不同浏览器之间的差异会造成padding值的效果不同,不过天下无难事,这些问题已经解决了。

/* BUTTONS */

.buttons a, .buttons button{
display: block;
float: left;
margin: 0 7px 0 0;
background-color: #f5f5f5;
border: 1px solid #dedede;

border-top: 1px solid #eee;
border-left: 1px solid #eee;
font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size: 100%;
line-height: 130%;
text-decoration: none;
font-weight: bold;
color: #565656;
cursor: pointer;
padding: 5px 10px 6px 7px; /* Links */
}
.buttons button{
width: auto;
overflow: visible;
padding: 4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding: 5px 10px 5px 7px; /* Firefox */
line-height: 17px; /* Safari */
}
*:first-child+html button[type]{
padding: 4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin: 0 3px -3px 0 !important;
padding: 0;
border: none;
width: 16px;
height: 16px;
}

制作的时候还出现了关于IE的长按钮的渲染bug。可以在Jehiah.cz中找到相关内容,不过上面的宽度和overflow声明也起到了作用。

添加一些颜色

在Wufoo项目中,我们将中性动作(译注:例如修改密码)的hover颜色设为蓝色,将正向动作(译注:例如提交)和反向动作(译注:例如取消)的颜色分别设为绿色和红色。下面的代码就是我们创建的用来处理添加、保存之类的正向动作和取消、删除之类的反向动作的样式。对于我们来说还不错,当然你可以修改成自己喜欢的颜色。

/* STANDARD */

button:hover, .buttons a:hover{
background-color: #dff4ff;
border: 1px solid #c2e1ef;
color: #336699;
}
.buttons a:active{
background-color: #6299c5;
border: 1px solid #6299c5;
color: #fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
color: #529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color: #E6EFC2;
border: 1px solid #C6D880;
color: #529214;
}
.buttons a.positive:active{
background-color: #529214;
border: 1px solid #529214;
color: #fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
color: #d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background: #fbe3e4;
border: 1px solid #fbc2c4;
color: #d12f19;
}
.buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}

结语

最后要说的是,这只是我们用来解决Wufoo项目中遇到的问题的方案,不过在我们的开发过程中表现得很好。当然,这并非是解决这类问题的唯一方法。还有很多方法可以达到目的(例如梯度gradient),也可以将按钮变为圆角(替换代码中的图片)。由于<button>标签几乎可以包含任何标签(译注:其实在XHTML中并非如此,参见W3C的XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)文档中关于button标签内可包含元素的限制。),你可以添加诸如<span>之类的标签来配合使用Alex Griffioen最近编写的方法以实现非常漂亮的梯度圆角按钮。我真诚地希望这只是广大设计师为追求程序界面元素重用性而奋斗的开始。再多说一句,我希望你能在使用PSD文件生成按钮时多考虑一下这个经常被遗忘的表单元素。

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.

Back to Page Top