{"id":3893,"date":"2011-12-21T01:34:31","date_gmt":"2011-12-21T05:34:31","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=3893"},"modified":"2011-12-21T01:46:29","modified_gmt":"2011-12-21T05:46:29","slug":"cross-browser-css-cursor-images-in-depth","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2011\/12\/21\/cross-browser-css-cursor-images-in-depth\/","title":{"rendered":"Cross Browser CSS cursor<\/code> Images In Depth"},"content":{"rendered":"\r\n\r\n\r\n\r\n
\r\n
\r\n
brush 2<\/div> \r\n
line<\/div> \r\n
rectangle<\/div> \r\n
circle<\/div> \r\n
clear<\/div> \r\n
new<\/div>\r\n <\/div>\r\n<\/canvas>\r\n<\/canvas>\r\n

Paint widget a remix of CanvasPainter<\/a> \u00a9 Rafael Robayna<\/a><\/small><\/p>\r\n<\/div>\r\n

If you are using a desktop browser (except for Opera), play with the paint widget on the left.<\/strong> 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<\/code> property’s url()<\/code> function. When used properly, custom CSS cursors can add a little bit of polish<\/strong> to your web sites and applications. However, doing this in a cross browser way can be a little confusing<\/strong> 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.<\/strong><\/p>\n

When Should I Use Custom Cursors Instead of the Built-in Ones?<\/h2>\n

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<\/code> property to move<\/code>. Mouse over the object draggable object below to see how this works. <\/p>\n

\nDrag me!<\/a>\n<\/div>\n

This is done with the following CSS:<\/p>\n

\n
\r\na[draggable=\"true\"] {\r\n    cursor: move;\r\n}\r\n<\/pre>\n<\/blockquote>\n
The code above ensure that when a user “mouses over” a link with the HTML5 Drag and Drop “draggable” attribute, the move<\/code> 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<\/a>.<\/p>\n
The built-in cursors are great, but there are a few things to keep in mind.<\/p>\n