CSS Bits: The Mouse Cursor

Graphical appearance helps us in transferring the classical desktop experience in web applications. As such, we have to have a deep knowledge of how to transform the browser interface into the one of an application.

While Flash was usually the platform of choice for this goal in the past, we are all now adopting open standards like HTML 5 and CSS 3. With this pilot of a CSS bits series, we will redesign one of the omnipresent elements in the GUI of desktop application: the mouse cursor.

The cursor property

When applied to a body element, the cursor CSS property specifies a new cursor for the current page:

body {
    cursor: move;
}

Of course, it can be applied to (both block and inline) elements, and behave as an inherited property that is also applied to any element contained in the specified ones.

div#map
{
    cursor: move;
}

The values this property can assume belong to different kinds:

• generic: auto (pointer chosen depending on the element's type, or the presence of text), default (the classical pointer), inherit (see the parent's element).
• specific symbols: move (usually implemented as an hand), text (the I selector), wait (an hourglass, or probably a beach ball), help (question mark) and more.
• URL values like url('file.cur'). As for all urls the paths are relative to where the CSS file or CSS embedded code resides. The file types to use are images (png and gifs) but also .cur files which add metadata such as the position of the pointer in the image.

To allow a fallback in case an image cannot be displayed or is not supported by a browser, cursor accepts a comma-separated list of values (like font-family).

Evolution

The CSS 2.1 spec sets the standard for the cursor property, and lists all the supported values. CSS2 was finished in 1998 - so you can trust that browsers have had time to implement everything in it.

In this demo you can see how the CSS2 property values are implemented in your browser.

CSS3 defines new out-of-the-box cursors (for example, not-allowed which should render as a forbidding roadsign.

Moreover, the CSS 3 version allows an hot spot to be specified on images:

cursor: url('file.png') 4 5;

defining where in the image (as usual, with left/top coordinates) the "tip of the arrow" position. By default this would be considered the upper left corner of the image (values 0 0), but overriding it can place it in the center of the image, for example in the case of an hand or a sight.

Support

Quirksmode tells us where we can expect full support and for which solutions we should specify more fallbacks due to browser differences.

Basically, support for CSS2 values is everywhere: you shouldn't worry about IE 5.5 anymore (and I hope also about IE 6 soon).

The only issue is the lack of support for a generic image (like a PNG one) in all Internet Explorer versions, in every version up to 10.x. At the same time, any type of file-based cursor (a .cur file or an image) won't work in Opera, although its market share should worry you.

Since only in a few cases (unusual interfaces like Google Maps) a cursor should be needed for the application to guarantee the right experience to the user, I suggest to avoid complex solutions like inserting a cursor image with JavaScript: the standard cursor values should be enoughin the majority of cases.

If you want to go the next mile, there are many Windows programs to create .cur files, or a icoutils package in Debian-based Linux distributions that can convert images. Until IE starts to support generic images, using a .cur file is your best bet for a non-standard value.