13.2 Cursors

Another important part of the user interface is the cursor (referred to in the CSS specification as the "pointing device"), which is controlled by a device such as a mouse, trackpad, graphic tablet, or even an optical-reading system. The cursor is useful for providing interaction feedback in most web browsers; an obvious example is that the cursor changes to a small hand with an extended index finger whenever it crosses over a hyperlink.

13.2.1 Changing the Cursor

CSS2 lets you change the cursor icon, which means that it's much easier to create web-based applications that function in a manner similar to desktop applications in the operating system. For example, a link to help files might cause the cursor to turn into a "help" icon such as a question mark, as shown in Figure 13-2.

Figure 13-2. Changing the cursor's icon

This is accomplished with the property cursor.

cursor Values [[<uri>,]* [ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit Initial value auto Applies to all elements Inherited yes Computed value for <uri> values, an absolute value; otherwise, as specified

The default value, auto, simply means that the user agent should determine the cursor icon most appropriate for the current context. This is not the same as default, which forces the icon to be the operating system's default cursor. The default cursor is usually an arrow, but it does not have to be—it depends on the current computing environment.

13.2.1.1 Pointing and selection cursors

The value pointer changes the cursor icon to be the same as when the user moves the cursor over a hyperlink. You can even describe this behavior for HTML documents:

a[href] {cursor: pointer;}

With cursor, any element can be defined to change the icon as though it were a link. This can be very confusing to the user, so I don't recommend doing it often. On the other hand (so to speak), cursor makes it much easier to create interactive, script-driven screen widgets out of non-link elements and then change the icon appropriately, as illustrated by Figure 13-3.

Figure 13-3. Indicating an element's interactivity

Internet Explorer for Windows before IE6 did not recognize pointer, but instead used the value hand to invoke the "pointing hand" icon. IE6 recognizes both values.

The other cursor icon very common to web browsing is the text icon, which appears in situations where the user is able to select text. This is typically an "I-bar" icon, and serves as a visual cue that the user can drag-select the content under the cursor. Figure 13-4 shows a text icon at the end of some text that's already been selected.

Figure 13-4. Selectable text and the text cursor

Another way to indicate interactivity is to use the value crosshair, which changes the cursor icon into, well, a crosshair symbol. This is typically a pair of short lines at a 90-degree angle to each other, one vertical and the other horizontal, looking rather like a plus (+) sign. However, a crosshair could also resemble a multiplication sign (or a lowercase "x") or even an icon resembling the display inside a rifle scope. Crosshairs are usually used with screen-capture programs, and they can be useful in situations where the user is expected to know exactly which pixel is being clicked.

13.2.1.2 Movement cursors

In many circumstances, the value move will yield a result similar to crosshair. move is used in situations where the author needs to indicate that a screen element can be moved, and it is often rendered like a thick crosshair with arrowheads on the ends of the lines. It may also be rendered as a "gripping hand" whose fingers start out open and then curl when the user clicks and holds the mouse button. Two possible move renderings are shown in Figure 13-5.

Figure 13-5. Differing icons for move

Then there are the various cursor values related to move: e-resize, ne-resize, and so on. Windows and most graphical Unix shell users will recognize these as the icons that appear when the mouse cursor is placed over the side or corner edges of a window. For example, placing the cursor over the right side of the window will bring up an e-resize cursor, indicating that the user can drag the right side of the window back and forth to change the window size. Putting the cursor over the lower-left corner invokes the sw-resize cursor icon. There are many different ways to render these icons; Figure 13-6 shows a few of the possibilities.

Figure 13-6. A selection of "resize" cursors

13.2.1.3 Waiting and progressing

Both wait and progress indicate that the program is busy doing something. However, they're not identical: wait means the user should wait until the program isn't as busy, while progress indicates that the user should feel free to continue interacting with the program, even though it's busy. On most operating systems, wait is either a watch (possibly with spinning hands) or an hourglass (possibly turning itself over every so often). progress is typically represented as a spinning "beach ball" or an arrow with a small hourglass off to one side. Figure 13-7 shows some of these icons.

Figure 13-7. Waiting versus progressing

The value progress was introduced in CSS2.1.

13.2.1.4 Providing help

In situations where the author wants to indicate that the user can get some form of help, the value help is the answer. Two very common renderings of help are a question mark and an arrow with a small question mark next to it. help can be very useful if you have classed certain links that point to more information or to information that will help the user understand the web page better. For example:

a.help {cursor: help;}

You can also use help to indicate that an element has "extra" information, such as acronym elements with title attributes. In many user agents, leaving the cursor over a titled acronym will cause the user agent to show the contents of the title attribute in a "tooltip." However, users who move the cursor around quickly, or who have slow computers, may not realize the extra information is there if the cursor didn't change. For such users, the following rule could be useful, and will lead to a result like that shown in Figure 13-8:

acronym[title] {cursor: help; border-bottom: 1px dotted gray;}

Figure 13-8. Showing that help (in the form of more information) is available

13.2.1.5 Graphic cursors

Last, but most intriguing, is the ability to call for a customized cursor. This is done using a URL value:

a.external {cursor: url(globe.cur), pointer;}

With this rule, the user agent is asked to load the file globe.cur and use it as the cursor icon, as illustrated in Figure 13-9.

Figure 13-9. Using a custom graphic cursor

Of course, the user agent has to support the file format used to store globe.cur. If it does not, then it will fall back to the value pointer. Note that in the cursor syntax definition, any URL must be followed by a comma and one of the generic keywords. This is different than the property font-family, where you can call for a specific family and not provide any fallbacks. In effect, cursor requires fallbacks for any graphical cursors you might try to employ.

You can even specify multiple cursor files before the fallback keyword. For example, you might create the same basic cursor in several formats and include them all in a rule, hoping a user agent will support at least one of them:

a.external {cursor: url(globe.svg#globe), url(globe.cur), url(globe.png),
  url(globe.gif), url(globe.xbm), pointer;}

The user agent will go through the different URLs until it finds a file it can use for the cursor icon. If the user agent can't find anything it supports, it will fall back to the keyword.

You can actually implement animated cursors if a user agent supports animated graphic files for cursor replacements. IE6, for example, supports this ability with .ani files.