Web Cursor: The Forgotten Property

Web Cursor: The Forgotten Property

There are many aspects of CSS that we regularly talk about such as positioning, color, media queries, and typography. Yet one part of a humble CSS specification rarely gets a mention and it plays a huge part in the way we interact with sites. It can be affected by the hardware we use, the OS we pick and if coded correctly, can be as powerful as a call to action.

I’m of course talking about the cursor. This article is dedicated to this mischievous little character and how the right choices can improve your website’s usability considerably, and the wrong choice can leave visitors in a state of virtual paralysis!

Web Cursor: The Forgotten Property

Code Defaults and Compatibility

We all know how cursors work online; you basically point and click to navigate pages on a site. Yet by default, the cursor we experience can differ greatly. If you use a touch screen device (for instance), the CSS property and the cursor itself are rightfully ignored as your finger acts as the negotiator.

As you can imagine, with no cursor on the screen, it’s critical that you can differentiate between click or non-click regions visually as the cursor can’t help you out. But when it comes to devices that do use and support a cursor, users can easily be fooled by the feedback it provides upon hovering over data.

Visual Identification of Links

Figure 1: The visual identification of links is important for non-cursor suitable interfaces.

If you hover over an ordinary section of the page, we expect an arrow pointer. When we hover over some text we expect that to have it’s own cursor. When hovering over a hyperlink, we expect a hand to appear in place of whatever else might exist.

It’s even become a general best practice to use the help cursor which is rarely used by default in non-linked hover materials like abbreviations. Each OS styles cursors in a unique way, but this isn’t the issue; the problem is that we can change them into unrecognisable images, alter their meaning, and thereby confuse the visitor beyond recognition.

Various Cursor States

Figure 2: Above you’ll see various cursor states which users associate with different events.

The mark-up for defining a cursor is pretty straightforward. You have a property called cursor (so no surprises there!) and a series of potential values representing cursor states in the operating system. Because it’s one of the few CSS properties that integrate so closely with the OS, it’s often neglected as a bit of a quirky feature, with little on-page relevance even though that’s not true.

When you do use a custom cursor (a non-pre-defined value), we need to ensure that for the sake of compatibility they must be offered in two formats. You’ll need one to appease modern browsers (like GIF format), and the other for IE (which like Favicons, has its own proprietary format using the CUR extension).

content { cursor: url(cursor.cur), url(cursor.gif), pointer; }

Below you’ll find a handy table with the default cursor combinations, including those that have been added to the CSS3 specification, or equally importantly, those at risk of being removed. For the sake of implementation, it’s worth noting that cursors are inherited in CSS, and that you can (like fonts) select a custom value with a fallback via comma separation.

We utilize font stacks frequently, so the idea that we can have something in place for if a custom cursor isn’t usable is a sensible practice, though if no fallback is provided, the browser should default back to whatever its behavior dictates.

Cursor Value Purpose Version Potential Issues
alias Used for identifying shortcut creation. CSS3 Browser support.
all-scroll Bi-directional scrolling available on object. CSS3 Legacy support.
auto Whatever the browser decides is right. CSS2 N/A
cell Selecting tabular data (like a spreadsheet). CSS3 Browser support.
col-resize Resizing a column in a table or layout. CSS3 Legacy support.
context-menu Identifies dropdown or right click features. CSS3 Browser support.
copy For content to be copied (to the clipboard). CSS3 Browser support.
crosshair Pinpoint selection (like in graphics apps). CSS2 N/A
default The browsers default. Usually an arrow. CSS2 N/A
e-resize Resizing a window or object in a direction. CSS2 N/A
ew-resize Resizing a window or object in a direction. CSS3 W3C “At risk” status.
help Help available for object (like tooltips). CSS2 N/A
move Moving content (say via drag and drop). CSS2 N/A
n-resize Resizing a window or object in a direction. CSS2 N/A
ne-resize Resizing a window or object in a direction. CSS2 N/A
nesw-resize Resizing a window or object in a direction. CSS3 W3C “At risk” status.
no-drop The content cannot be dropped here. CSS3 Browser support.
not-allowed Requested action can’t be carried out. CSS3 Browser support.
none Hides the cursor from the element entirely. CSS3 Bad for Usability!
ns-resize Resizing a window or object in a direction. CSS3 W3C “At risk” status.
nw-resize Resizing a window or object in a direction. CSS2 N/A
nwse-resize Resizing a window or object in a direction. CSS3 W3C “At risk” status.
pointer Used to identify links or clickable content. CSS2 Early IE uses “hand”.
progress Waiting for an action to be performed. CSS2 Mistaken identity.
row-resize Resizing a row in a table or layout. CSS3 Legacy support.
s-resize Resizing a window or object in a direction. CSS2 N/A
se-resize Resizing a window or object in a direction. CSS2 N/A

sw-resize Resizing a window or object in a direction. CSS2 N/A
text Default for identifying selectable text. CSS2 N/A
vertical-text Selectable text on a horizontal axis. CSS3 Browser support.
w-resize Resizing a window or object in a direction. CSS2 N/A
wait User should avoid doing anything and wait. CSS2 Mistaken identity.

Note:

All new CSS3 properties listed as Legacy support is due to old browser considerations rather than general compatibility, as denoted by Browser support, and cases of mistaken identity refer to a potential for wrongful presumption of the cursor action, such as thinking that the browser has crashed or frozen as a result of seeing the cursor in that state (thereby a misappropriation of it).

Native Windows and Mac Variants

Figure 3: Examples of each cursor and their native Windows and Mac variants are shown above.

Two extra notes on compatibility: Opera in particular lacks complete support for the default cursor states sanctioned in the W3C specs, and it’s also one of the few not to support custom ones either though many vendors don’t support animated cursors, which is probably a blessing in disguise.

It therefore makes sense to be cautious and test your work before relying upon cursor states. As for good ole Internet Explorer (always doing its own thing, even if it’s not a good idea), it has an issue in which early versions demand using “hand” as a value instead of pointer. This issue exists right until IE8 so you’ll definitely want to address the quirk. The code required to fix this issue is shown below.

content { cursor: pointer, hand; }

Cases for Cursor Implementation

On the surface, it might seem a good idea if browser vendors blocked cursor alterations, however, it does actually serve a useful and important purpose. Take for example the common use of JavaScript to instigate behavior (such as altering the visibility state of content).

Without changing the cursor, it would be impossible to make users believe that clicking on an object modified the page in the same way that clicking on an anchor moves them to another location, and as we all know, JavaScript can do magical things to content not bound in an anchor reference. And as we’ve mentioned before, the help icon can serve as a useful call to action to notify users that something will happen if they hover.

Clear Improvement Over the Default

Figure 4: The below code is showcased in the screenshot, a clear improvement over the default.

These are just a couple of cases in which the cursor property should be used, and by doing so you can improve usability as tooltips can be recognised before loading, and active non-linked content can appear linked.

As an example, I’ve included some HTML (below) to represent an abbreviation (which upon hovering will disclose it’s meaning for those who aren’t aware of it). And in an attempt to alert users to this useful information, I’ve added some stylistic flourishes (via CSS) to increase its visibility (a dotted rather than a flat link underline) – the most relevant here being the “help” cursor. A visual underline may alert users to the text, but the cursor reinforces the “expectation” behavior.

The HTML is shown below:

<abbr title=”World Wide Web Consortium”>W3C</abbr>

The CSS is shown below:

	
dfn, abbr, acronym { border-bottom: #333333 1px dotted; cursor: help; }

The Curse of Cursor Customization

So far, we’ve shown cases of the cursor property being used for good another example is using the “wait” or “progress” cursor when a user submits a form or an app processes data, however, as with much of CSS, the cursor property is open to misinterpretation and abuse.

Using the “pointer” cursor on something that can’t be clicked or interacted with isn’t smart, neither is using the “wait” cursor on the whole page users may think the browser has frozen, but when we introduce custom or even animated cursors into the mix, things can really go wrong. For the sake of consistency and your users’ sanity, I’d state that as a general rule, no situations exist where a custom built cursor is beneficial.

Animated Cursors

Figure 5: Some custom cursors are just bad news and animated ones are equally annoying too!

I’ve seen many examples of bad cursor customization, like those annoying festive ones that 90’s sites enjoyed such as snowflakes which aren’t as precise as an arrow, but some in particular really show the dangers involved.

Consider a deliberately empty cursor a transparent GIF, empty CUR file, or the use of cursor: none; within the site’s body, or an animated cursor that flashes or disappears at random for no good reason! That would leave your users with no logical way to identify where their mouse or trackpad is hovering on the page, and the site would become impossible to use! Granted, few would be silly enough to go to those lengths, but I’ve still seen many cases of customized cursors using colors of such low contrasts that it ends up camouflaged by content, and thereby inaccessible.

Mentioned above, the below is probably one of the worst things you can do in CSS:

* { cursor: none; }

The Values of Visual Association

The cursor is one of the most easily recognisable and customizable members of the user interface, and yet for all of the power we’ve bestowed upon designers, it’s one of the most dangerous bits of the specification. Customizing the cursor for the right reason can fix browser inconsistencies, bring attention to necessary objects, and make life easier for the user. But we must remain vigilant, not to use it inappropriately.

If you go against the convention, distract users, or simply prevent the cursor doing its job (in terms of visibility), usability will inevitably suffer. As such, when you begin to utilize this underappreciated CSS property, remember “form follows function” should remain the priority.

Below are some useful resources

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.