Page 177 - css揭秘

1. 提示禁用状态

也许有人会有异议，但我坚持认为最应该得到广泛应用的新光标应该
是 not-allowed（参见图 6-3）。如果要提示某个控件因为某些原因而变得
图 6-3 无法交互（即控件已被禁用），用这个光标就再合适不过了。尤其是在眼下，
使用 not-allowed 光标来提示某 大多数表单都已经被过度美化，要清楚地表达某个表单控件是否被禁用往往
个控件已被禁用
十分困难，而这正是这个新光标的用武之地。它的用法其实十分常规，就像
这样：

:disabled, [disabled], [aria-disabled="true"] {
cursor: not-allowed;
}

试一试 play.csssecrets.io/disabled

2. 隐藏鼠标光标

把鼠标光标隐藏起来听起来简直就是一场噩梦，不是吗？难道真的会有
人想这么做吗？而 Web 标准竟然会为这种蠢事提供便利？！确实有一些人
曾在这方面犯过严重的可用性错误，但在对他们大发雷霆之前，不妨回忆一
下你以前用过的那些可怕的公共触摸屏（比如公共场所的信息查询台，飞机
椅背上的娱乐系统）。由于它们的开发者忘了隐藏鼠标光标，导致屏幕上总
会有个尴尬的小东西挥之不去。再回想一下，当你观看视频的时候，往往会
不自觉地把鼠标移到屏幕的最右侧，这同样是因为光标碍事。
这样看来，在不少场景下，隐藏鼠标光标确实能带来可用性的提升。这
就是为什么新规范会引入一个 none 类型的光标。在 CSS 2.1 中，隐藏光标
也是有可能的，但需要用到一张 1×1 的透明 GIF 图片，然后这样做：

! video {
如果你在视频画面上隐藏了
鼠标光标，可别一不小心在播放 cursor: url(transparent.gif);
}
控件区域也把光标给隐藏了，那
样的话你可就是好心办坏事了。
现在，我们再也不需要这么做了，因为可以直接使用 cursor: none。
不过，还是有必要提供一个回退方案，因为旧版浏览器可能还不认识这些新
的光标关键字。我们可以利用层叠机制来实现这一点：

cursor: url('transparent.gif');
cursor: none;

„ CSS 基本 UI 特性
http://w3.org/TR/css3-ui 相关规范

146 第 6 章 用户体验

඀ࠡ JOEC