Everything You Need to Know About the CSS Cursor Rule

While the world’s going bonkers for touch-controlled interfaces, this article will focus on the more traditional input method of the mouse. I’ll suggest an approach of progressive enhancement for handling interaction design; more specifically, an overview of the CSS cursor rule.

Mobile design strategy is becoming more and more important each day. The community’s foray into responsive web design is shaping and defining the design of user interactions and controls as they become increasingly optimized for touch input. However, the well-established, precision input method of the mouse is not going away anytime soon. This fact, in tandem with the universal nature of the web, support that traditional and touch input optimizations should be fully supported in web interface design.

A Cursor’s Purpose: Communicate Function

Most software, from desktop applications to operating systems to simple websites, employ a variety of useful GUI pointers. These pointers aid in UI interaction by suggesting to the user what task they can accomplish at that specific point in the application’s on-screen coordinates.

Want to input or manipulate text? You know you can when you see an “i-beam” cursor. Want to resize a window? You know you can (and in what direction) when you see a resize cursor. In the example above, you can see how the resize cursor visually suggests the possible directions the window can be resized.

By manipulating the cursor graphic in the context of the interface’s control function, you instruct the user as to when, where, and how they may manipulate the software.

An Example

A really great example of leveraging cursor design to communicate function can be found in Adobe’s Creative Suite.

The tool icons in Adobe’s suite graphically reflect their innate functionality. In many cases when a specific tool is selected, the cursor closely resembles or precisely reflects the tool’s icon. This simple UI paradigm is very powerful in visually communicating the purpose and function of each tool in the application’s expansive tool set.

Cursors on the Web

The more well-established input methods such as the mouse, stylus, and keyboard provide an additional form of visual feed back not (yet) available to touch devices: hover. Hover interactions allow users to explore and learn about the application through associated hover UI elements. These elements aid in communicating to the user which objects are interactive and how they can be manipulated.

the nature of the web demands universality and accessibility … this kind of all-inclusive, input-agnostic approach presents a unique design challenge

However, hover interactions (such as tooltips) were designed to solve UI problems specifically for the mouse. They become inoperable when implemented on touchscreen devices. Because the nature of the web demands universality and accessibility, web applications must be designed to work for both touch and non-touch devices. This kind of all-inclusive, input-agnostic approach presents a unique design challenge. User interfaces must account for touch as well as non-touch devices.

There’s that phrase again: Progressive Enhancement

This web-centric design challenge of embracing an array of input methods necessitates an approach of progressive enhancement (which, by the way, has been advocated for some time).

Even though web traffic is increasingly being taken over by mobile devices (and thus touchscreen devices), the CSS cursor rule is far from obsolete. You can design a website or application UI with a input-agnositc approach that will work across a variety of devices. Whether those devices are controlled with a touch screen or mouse, the CSS cursor rule will act as an additional (though not imperative) UI improvement in visual feedback for supported devices.

Implementing Built-in Cursors

As mentioned, CSS cursors can be used to give hints to the user as to what function the mouse can perform. There are a variety of cursor types you can choose from that are built into the browser or operating system of the user’s computer (you can see a list of them on quirksmode.org). The built-in cursors are nice, but you have to remember that they are exclusive to the browser/operating system of the user. Hence, the controls may vary from one computer or browser to another. Here’s an example of how to change the cursor:

.elementClass {
	cursor: move;
}

Implementing Custom Cursors

If you need a cursor that is not included by default, or not supported across all browsers, you have the option to include a custom cursor image. This can be defined similarly to the font-family rule, where you provide fallbacks in case the custom cursor doesn’t load.

.elementClass {
	cursor: url('path/to/cursor.png'), move;
}

You can even define the position of the cursor (the point where clicks are registered). These are X and Y values that are relative to the default spot of ’0, 0′; the top left of your custom cursor image. In the example below, we’ll move the cursor 10 pixels from the left and 5 pixels from the top.

.elementClass {
	cursor: url('path/to/cursor.png') 10 5, move;
}

Cross Browser Cursor Rule

Unfortunately, cross-browser support for custom cursors isn’t as easy as the rules defined above. There are a few hangups for getting cursors to function properly across browsers.

IE Supports .CUR Files Only

Internet Explorer 7 & 8 will only support .CUR files. CUR files are like ICO files, except you can define the cursor’s ‘hotspot’ from the file itself. You have to provide a .CUR file if you plan to support IE 7 & 8.

Creating your own .CUR file is beyond the scope of this article. However, you might try taking a look at this Photoshop plugin as a good start.

IE Interprets Cursor Paths Relative to the Document

All browsers will interpret the custom cursor’s URL as relative to the location of the stylesheet (as per the W3C’s recommendation). However, Internet Explorer (7-9) will interpret the URL relative to the HTML root.

So, let’s say I start a new project. It has the “index.html” in the root, along with folders for images, stylesheets, and any custom cursors. It would look like this:

As you can see, my stylesheets and custom cursors are completely separated from each other.

In this case, I would have to write the cursor rule with fallbacks to support modern browsers with .PNG cursors as well as IE with .CUR files:

.elementClass {
	cursor: 	url(../cursors/cursor.png), /* Modern - relative to the document */
  			url(cursors/cursor.cur), /* IE - relative to the root */
  			default; /* Built-in fallback */
}

Alternatively, you could use absolute paths in the CSS, although you still have to provide fallbacks for any .CUR files:

.elementClass {
	cursor:		url(/cursors/cursor.png), /* Modern */
  			url(/cursors/cursor.cur), /* IE  */
  			default; /* Built-in fallback */
}

To learn more about the in-depth details and hangups of implementing cross-browser CSS cursors, take a look at useragentman.com. Remember, if you’re supporting touch devices, CSS cursors can be a progressive enhancement feature. That means it doesn’t necessarily demand support for IE (because users on touch screens won’t see the custom cursor either).

Cursor Examples Across Browsers and Platforms

If you’re implementing CSS cursors as an aspect of progressive enhancement, it might be useful to see exactly how each built-in cursor will appear across browsers and platforms. This will enable you to make informed decisions about how to design your interface. Here you’ll find a good reference for seeing how the cursors look in across operating systems:

Windows 7

Browsers Tested

• IE9
• IE8
• Chrome
• Safari 5.1.7
• Firefox
• Opera

Windows XP

Browsers Tested

• IE8
• IE7
• Chrome
• Safari 5.1.7
• Firefox
• Opera

OSX 10.8

Browsers Tested

• Chrome 22.0
• Safari 6.0
• Firefox 15.0
• Opera 12.02

As you can see, there are various subtle differences which may or may not affect the design of your interface. Take a look at the complete chart to compare cursors across browsers and platforms.

Conclusion

As you can see, the cursor rule in CSS is an additional tool you can employ in aiding user interaction with your website or application. However, you’ve probably noticed how different and varied each cursor can be, depending on the user’s browser and operating system.

These notable differences in cursors, in addition to the increasing use of touch screen devices, have relegated the cursor rule to a supplementary role in aiding UI interaction, but that doesn’t make it obsolete. It is much better to prudently use the cursor as a feature of progressive enhancement than it is to completely disregard it. And now that you know how to use it, go and create something awesome!