CSS Secrets

6 User Experience

29 Picking the right cursor

The problem

The purpose of a mouse pointer is not just to display where the cursor is on the screen, but also to communicate which actions are possible to the user. This common UX practice in desktop applications often gets forgotten in web apps.

Authors are not the only ones to blame for this. Back in the days of CSS 2.1, we didn’t really have access to many built-in cursors. We mainly used the cursor property to indicate that something is clickable, with a pointer cursor, or sometimes to indicate tooltips with a help cursor. Some also utilized the wait or progress cursors instead of (or alongside) a loader. But that was about it. However, although in CSS User Interface Level 3 (w3.org/TR/css3-ui/#cursor) we got a boatload of new built-in cursors to utilize, most authors comfortably stayed in their old cursor habits. Like many UX improvements, you don’t really realize there is a problem, until you reach the solution. Let’s advance to that then!

FIGURE 6.1 The set of built-in cursors in CSS 2.1 was rather limited (cursors shown as they’re displayed in OS X)

The solution

You can see the full list of new built-in cursors in Figure 6.2 and read about their purpose in the specification, but as you can imagine, not all of them are useful for most web apps. For example, there’s even a cell cursor, which “indicates that a cell or set of cells ...