现代 CSS

CSS秘密花园:扩展可点击区域

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

CSS Secrets

如果你对用户体验感兴趣的话,你可能听说过费茨法则。最早在1954年由美国物理学家Paul Fitts提出,费茨法则是迅速移动到目标区域所需要的时间,是到目标的距离和目标的宽度之间的比率的对数函数。其常用的数学公式是 $$ T = a + b log_{2} (1 + \frac{D}{W}) $$ 其中,T是所用的时间,D是到目标中心的距离,W是目标的宽度,ab是常数。

提示:查看费茨法则的应用,通过simonwallner.at/ext/fitts的交互可视化

尽管在当时,图形用户界面是不存在的,费茨法则完全适用于定点设备,但现在已成为广为人知的HCI(人机交互)原则。这在一开始听起来可能会比较惊讶,但是记得费茨法则更多的是人类电机控制,而不是特定的硬件。

一个显而易见的推论是,目标越大,越容易到达。因此,它通常会增加可用性来扩展小控件周围的可点击区域,否则可能会很难点击到,如果不能选择将其放大的话。随着触摸屏的逐渐普及,这变得越来越重要。没有人会想要按了几十次才点到那个令人讨厌的小按钮,尽管这还是普遍存在。

其他时候,我们希望当我们鼠标悬停在窗口的一侧时,就会有某个元素划入——例如,一个自动隐藏的标题,在鼠标靠近的时候自动从顶部划入,这也涉及到了要扩展它的点击区域(只针对一个方向)。我们可以通过CSS来完成它吗?

解决方案

我们先假设我们有如图所示的简单的一个按钮

扩展可点击区域

然后我们希望它的点击面积增加10px,四个方向都是。我们已经为它应用了一些简单的样式,包括cursor: pointer,这不仅可以为鼠标交互提供一些方便,还可以帮我们测试点击区域在哪。

扩展点击区域的最简单的方法是一个透明的实线边框,因为鼠标和边框的交互也会作用在元素之上,不像outline和shadow。例如,把一个元素的点击区域在所有方向上扩展10px,代码可以简单地这样写:

border: 10px solid transparent;

但是,正如你在下图中看到的,效果不是很好,因为这让我们的按钮变大了!

扩展可点击区域

原因是背景默认扩展了其下方的边框。background-clip可以帮助裁剪背景,如下:

border: 10px solid transparent;
background-clip: padding-box;

扩展可点击区域

如上图所示,显示没有问题。但是等你在按钮周围做一个实际的边框,你才会发现实际上你已经用了唯一的那个边框来扩展点击区域了。那怎么办呢?很简单,你可以利用内阴影模拟一个(纯色的)边框

border: 10px solid transparent;
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
background-clip: padding-box;

效果如下图所示:

扩展可点击区域

不像边框,你可以使用不止一个box-shadow,如果你需要更多,你可以使用逗号来分隔这一组阴影。但是,如果我们把内阴影和外阴影结合起来,我们会得到一个非常奇怪的效果,因为外阴影是在边框盒之外绘制的。例如,我们可能会想给按钮添加一个模糊阴影,给它一个在页面上“pop out”的效果,也就是另一种可点击的内容:

box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset,
            0 .1em .2em -.05em rgba(0,0,0,.5);

但是,如果我们试过了,我们看到的结果和我们期望的有很大不同。

扩展可点击区域

这种解决方案因为其它原因,所以并不完美。边框会影响布局,这在某些情况下可能不是问题。所以我们该咋办呢?我们移除边框,然后利用伪元素来捕捉它们的父元素和鼠标的交互。

我们可以覆盖一个透明的伪元素在我们的按钮上边,而且它在各个方向都比我们的按钮大10px

button {
    position: relative;
    /* [rest of styling] */
}
button::before {
    content: '';
    position: absolute;
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;
}

这也是可行的,而且只要我们不需要伪元素了,它也不会影响到任何东西。伪元素的解决方案是非常灵活的——我们可以让点击区域变成任何大小、位置,或者我们想要的形状,甚至和元素本身完全无关的内容!

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-secrets/extending-the-clickable-area.html

Air Jordan XIII High

返回顶部