Cross Browser CSS cursor Images In Depth

If you are using a desktop browser (except for Opera), play with the paint widget on the left. When you select a tool and mouse over the white canvas, your mouse arrow will change to a custom cursor representing that tool (à la Photoshop or The GIMP). This is not done by creating a DOM object and moving it to the mouse’s coordinates — we are using CSS to do it using the cursor property’s url() function. When used properly, custom CSS cursors can add a little bit of polish to your web sites and applications. However, doing this in a cross browser way can be a little confusing unless you know all the gotchas, and this article will go into depth about them. We will also explore issues such as when to use custom cursors, performance, what makes good cursor design, cursor file formats, and cursor size.

When Should I Use Custom Cursors Instead of the Built-in Ones?

In general, CSS cursors (built-in or custom) should be used as a hint to the user as to what action the mouse can perform. Let’s take a look at an example that doesn’t use custom cursors to illustrate a common use-case: drag and drop. To give users a visual cue that an item is draggable, it is common practice to set an object’s CSS cursor property to move. Mouse over the object draggable object below to see how this works.

This is done with the following CSS:

a[draggable="true"] {
    cursor: move;
}

The code above ensure that when a user “mouses over” a link with the HTML5 Drag and Drop “draggable” attribute, the move cursor appears. It is a great way to help the user “figure out” how to use the user interface with minimal instruction. A list of the built-in cross-browser cursor property values can be seen at CSS2 Cursor Style Page.

The built-in cursors are great, but there are a few things to keep in mind.

• Built-in cursors may look different depending on what browser/operating system is being used. For example, some browsers (e.g. Firefox on Windows 7) will show the move cursor as a four-pointed arrow () while others (e.g. Firefox on Mac OS X) will show a hand (). Using custom cursors, you can ensure all applications are using the same cursor for a more consistent expeience. The example below is the same as the one above, except in all browsers, you will see the a hand icon.
  Drag me!
• Not all browsers support all the same “built-in” cursors, and custom cursors allows you to add support for them. For example, while Firefox on Windows doesn’t support context-menu, it seems to be the only browser that supports the zoom-in and -out cursors. Using custom cursors, you can implement all of these in all browsers.
• There may not be a built-in cursor for the use-case you need to solve. A good example is in the paint widget at the beginning of this article — none of those cursors exist natively in any browser.
• It’s nice to design your own cursors, since sometimes the built-in ones may be a little basic looking (If you do this, please keep in mind that users are used to the built in ones, so your custom cursor shouldn’t look too much different than them if you want your application to be easy-to-use).

The CSS of Custom Cursors

Here is some sameple CSS code that will show custom cursor when the user mouses over a div with an id of dragMe. If the browser doesn’t do custom cursors (like Opera), the cursor fallback to the built-in move cursor.

#dragMe {
    cursor: url('customMoveCursor.cur'), move;
}

As long as your cursor is in the same directory as your stylesheet, and as long as it is an uncompressed .CUR file, it’s as simple as that. Note that a .CUR file is just an .ICO file with extra information that allows the developer to define the “host spot” position of the cursor (i.e. the part of the image which points to the position of the mouse). Note that .CUR files support 32-bit color (16.7 million colors plus alpha channel transparency), so designers can create cursors that have semitransparent areas like shadows and anti-aliasing.

How does one create a .CUR file? Not too many graphic tools create .CUR files natively, but there are some easy solutions. If you are a Photoshop user, the ICO (Windows Icon) file format plugin for Photoshop is what you are looking for (I have not used it myself, but it apparently can save .CUR files directly. Any comment on how well this works would be most welcome). If, like me, you use the GIMP, simply save the file as a .ICO file and convert it with this command line tool written in Python by Jan Thor.

The Gotchas of Custom CSS Cursors

There are a few things you need to remember when using CSS cursors

1. You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices. :-)
2. Internet Explorer interprets relative URLs as relative to the HTML document, and not the CSS file like God (and the W3C) intended (Sometimes it seems that IE goes out of its way to make lives difficult for us developers). This is true for all versions of IE, even IE9. To ensure cross-browser compatibility, you must either use an absolute URL:
   

   #dragMe {
       cursor: url('/cursors/customMoveCursor.cur'), move;
   }
   

   or a fallback url for IE:

   /*
    * Assume this the HTML is in a directory above this CSS file
    */
   
   #dragMe {
       cursor: url('../cursors/customMoveCursor.cur'),     /* Modern browsers    */
               url('cursors/customMoveCursor.cur'),        /* Internet Explorer  */
               move;                                       /* Older browsers     */
   }
   

3. It is best that your .CUR files are 32×32 pixels in size. IE9 seems to resize cursors that are smaller than this to 32×32, and IE8 and under cannot show cursors larger than this size. While it is true that you can fit multiple file sizes inside a .CUR file, sticking with one 32×32 image will ensure cross-browser consistency.
4. Although .CUR files can be saved in either a compressed or uncompressed format, not all browsers can read the compressed ones. It is best to save your cursors in uncompressed format. If you are using the GIMP to save to .ICO format first before you convert to .CUR, make sure that the .ICO is saved without compression.

Performance Issues

As mentioned earlier, a lot of browsers (like Firefox or IE6) cannot show compressed .CUR files, but they can show .PNG files. Since we would like to use a compressed version if possible, one could do this:

#dragMe {
    cursor: url('/cursors/customMoveCursor.png'),      /* Modern browsers    */
            url('/cursors/customMoveCursor.cur'),      /* Internet Explorer  */
            move;                                      /* Older browsers     */
}

This works well as long as the cursor hotspot is 0,0. You can define a PNG hotspot using the CSS3 cursor syntax, but it breaks IE:

#dragMe {
    cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15)            */
            url('customMoveCursor.cur'),      /* IE chokes on the above line .. never gets here */       
            move;                             /* Older browsers (IE never gets here either)     */
}  

In order to fix this issue, one must you conditional comments to make a separate IE from everyone else. Let’s use a variation of Paul Irish’s Conditional Comment pattern to do this. Change the html tag to this:

<!--[if (lte IE 9) ]><html class="ie9 oldIE">    <![endif]-->
<!--[if (gt IE 9)  ]><html class="modern">       <![endif]-->
<!--[!(IE)]><!-->    <html class="notIE modern"> <!--<![endif]-->

Now we can use this CSS to ensure .PNG loads in non-IE browsers:

html.modern #dragMe {
  cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15).   */
          move;                             /* Older browsers                         */
}

html.oldIE #dragMe {
  cursor: url('customMoveCursor.cur'),      /* IE .CUR file loads                     */       
          move;                             /* In case IE can't load the above.       */
}  

The extra bytes used to create the conditional comments may or may not be worth the trouble. If you are using conditional comments (like I do all the time), it may be worth it.

A Final Word On Testing in IE

If you edit a .cur file on the web server and reload your page with that cursor in Internet Explorer, you may not see the edited change, since IE has kept the older cursor in cache and has a hard time letting go, kind of like that person you dated in high-school. You will need to clear IE’s cache in order to see the new cursor. This is quite annoying, and it is something you should keep in mind when troubleshooting in IE.

Further Reading

• Cross-browser custom CSS cursors by Adrian Ber