乐者为王

Do one thing, and do it well.

重新认识button元素

英文原文:http://www.particletree.com/features/rediscovering-the-button-element/

简介

对每个应用程序设计者来说,为你的用户创建一套一致的界面是个不懈的斗争。在Web上构建一致性尤为艰难,因为跨越浏览器和操作系统的视觉渲染差异是完全不同的,并且在什么能做和不能做上几乎是随心所欲的。在你处理 表单元素时这个问题变得更为明显。在标准外观的战争里,它们中最大的输家是臭名昭著的提交按钮。

现状是,带有type="submit"的输入要么是太丑陋(Firefox),有点缺陷(Internet Explorer),要么完全缺乏弹性(Safari)。大多数的解决方案是使用图片输入和自己创建这个该死的东西。这是不幸的,因为那样做以后每当我们急需一个新按钮时工作就被归结为启用Photoshop的繁琐任务。我们需要的是更好的东西——一些对于设计者来说更加灵活和有意义的东西。我们很幸运,因为解决方案已经存在,它所需要的是一点点爱。我的朋友们,让我向你介绍我的小朋友:<button>元素。

输入 vs 按钮

这里是标准的提交按钮标记:

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

它在浏览器三兄弟里看起来像这样:

嗯。这里是创建一个用于提交的按钮元素时使用的标记:

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

并且它看起来像这样:

这些按钮与上面对等物的工作和行为方式完全相同。除提交表单外,你可以让它们禁用,添加一个accesskey甚至指定一个tabindex。除了Safari里的按钮看起来有视觉差异(它没有把不自然的aqua界面放到按钮上,这对我们是有利的),关于<button>标签最酷的事情是你可以在它们里面放置有用的HTML元素,像图片:

1
<button type="submit"><img src="" alt="" /> Submit</button>

它们看起来像这样:

非常好。(好吧,它们有点丑,但是我说过它们需要一点点爱。)实际上,根据W3C所说,这些特殊的视觉差异正是<button>元素被创建的原因。

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

The Button Element - W3C

所以这里我们正在寻找一种设计解决方案,好在拥有海量资料的互联网上有一段标记可以帮助我们解决这个问题。这很方便,然而不幸的是大多数设计者和开发者甚至不知道该元素存在。现在,在我直接用按钮元素替换所有在Wufoo中的图片输入之前,我决定标记和CSS必须满足几个需求:

需求

  1. 它们必须看起来像按钮。
  2. 它们必须在浏览器里看起来相同。
  3. 我用于按钮的样式需要同样能被使用在链接上(因为在Wufoo中的交互总是由一个表单提交或者从链接来的一个Ajax调用引发,这些东西很可能并排排列,我需要它们具有相同的视觉重量感)。
  4. 在许多不同情况下使用时标记需要保持弹性和易于修改。
  5. 我应该能够有效地使用图标和颜色来传递关于这种交互将要发生的信息。

带着这些适当的挑战,我潜进CSS,在解决一些跨浏览器的挑战之后,得出了以下内容(你也可以在Wufoo上看到所有的这些内容):

结果

没有什么疯狂的。简单,但是有效。现在,我喜欢这种处理按钮的方式是我可以使用FAMFAMFAM的1000个图标库去说明大量可笑的想法和动作而不必每一次我需要一些新东西时都要从Photoshop生成。如果我们快速查看下标记,你会注意到在那里的最后两个按钮实际上是链接:

1
2
3
4
5
6
7
8
9
10
11
<div class="buttons">
    <button type="submit" class="positive">
        <img src="/images/icons/tick.png" alt=""/> Save
    </button>
    <a href="/password/reset/">
        <img src="/images/icons/key.png" alt=""/> Change Password
    </a>
    <a href="#" class="negative">
        <img src="/images/icons/cross.png" alt=""/> Cancel
    </a>
</div>

这很有用的原因是因为在Web应用中许多动作是由REST驱动的,所以只要通过链接把用户请求发送到某个特定的URL就会发起它们需要做的事情。使用可以在这两种类型的元素(链接和按钮)上工作的样式,为我们提供了灵活性,以保持我们的交互方式看起来是一致的和适当的,不管它是通过Ajax完成还是一个标准的提交。

仅仅是一些简短的题外话。你可能想知道我为什么把那些图标图片中的alt属性留成空白。它可能会令一些人感到惊讶,虽然每个图片的alt属性是必需的,实际上描述它们不是必需的。空的alt属性完全有效,并且帮助屏幕阅读器知道哪些信息事实上要被忽略,在你试图寻找下一个适当的可操作条目时节省你用户宝贵的时间。因为图标实际上是多余的,我宁愿不要浪费用户的时间听到我用于可视化的图片发生了什么事。它们只会听到“Submit”而不是“Checkmark Submit”,这实际上会让事情有点困惑。

CSS

在大多数情况下,样式化这些按钮的CSS是相当直白的。让人抓破脑袋的跨浏览器的不一致性导致下列代码中填充的数量不一致,但没什么不可能,你们很幸运,这个问题已经解决了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
}

当致力于不一致性的时候有件事出现了,就是Internet Explorer中关于显示长按钮有个渲染缺陷的事实。你可以在Jehiah.cz阅读相关内容,但它是什么导致了以上代码中一些宽度和溢出的声明。

添加一些颜色

在Wufoo中,我们使悬停颜色蓝色成为中性动作,对于正面和负面内涵适当地使用绿色和红色。以下的代码是我们为处理按钮而创建的样式,这些按钮意味着显示像添加和保存这样的正面交互以及像取消和删除这样的负面交互。对我们来说这是一次不错的尝试,显然你可以根据自己的喜好选择颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* 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处理事情,它是为我们制定的开发流程。当然,这不是玩这个游戏的唯一方法。有许多你可以给它添加趣味的方法(使用渐变!)和改变周围的事物(在标记中的图片上使用图片替换)。因为<button>标签几乎可以处理在它里面的任何标记,你可以添加一些<span>标签,然后使用Alex Griffioen最近写的方法来创建真正漂亮的圆角渐变作品。老实说,我希望对于许多与他们应用中可复用表单界面斗争的设计者来说这只是一个很好的起点。或许甚至,我希望你再次看看这个经常被浪费的表单元素,在不经思考就为提交采用输入和PSD之前要二思。

Comments