CSS Cursors - How To Use Them by Nicole Hernandez
One thing that CSS allows us to use for screen presentation are alternate
cursors. This is not the idea of downloading or forcing a download of a cursor,
as was done in the past (though that is possible as well), but instead, we use
several built in concept cursors.
Each of these cursors you can use to enhance useability of your website. For
instance, if you want to define that something has context help, you could use
the help cursor.
The CSS2 standard gives us 17 options for cursors, plus the option to use an
external cursor from a URI. For two of the cursor options, there could have
been slightly better phrasing, because it is a touch confusing for some people
to remember. Two of the options are auto and default. Now, auto
is actually the default value if you don't explicitly set a cursor to be
applied. To the W3C, I imagine this wasn't a concern because they use the
wording 'initial' value, instead of 'default' value. Unfortunately, in
practice, most people tend to say 'default' value, instead of 'initial.' So,
just keep in mind that the 'default' value for a cursor is actually 'auto'
and not 'default'
.
This should help it make a bit more sense:
1. auto - Initial value. Lets the browser choose.
2. default - Displays the basic cursor (usually an arrow).
3. crosshair - A '+' shaped cursor.
4. pointer - A pointer (usally displayed for links).
5. move - Indicates a moveable element (often a 4-way arrow)
6. text - Text can be selected. (often an I-beam)
7. wait - Asks the user to wait (often an hourglass).
8. help - Indicates help is available (often a question mark).
9. progress - Similar to wait but shows that a process is working.
10. e-resize - Indicates a resizeable element. Double-arrows display direction
to size.
11. ne-resize - Same as e-resize.
12. nw-resize - Same as e-resize.
13. n-resize - Same as e-resize.
14. se-resize - Same as e-resize.
15. sw-resize - Same as e-resize.
16. s-resize - Same as e-resize.
17. w-resize - Same as e-resize.
I mentioned that there is also the option to use the cursor for an call to a
remote cursor. So, let's say that you have a cursor you would like the browser
to use, and you have it stored at a specific location. You could do the
following:
<p style="cursor: url(preferredcursor.cur)">Text
Now, the problem is that not all browsers may be able to load or use that
cursor. Let me give an example of one that browsers might have a hard time
viewing, and the way you can still set an alternative.
In CSS or Inline: acroynm { cursor: url(1.svg), url(2.cur), help }
The first one (1.svg) is the preferred cursor and if the browser can handle
loading and displaying and SVG file, it will do that one. If not, it moves to
the second, and tries to load the 2.cur file as the cursor. If it cannot, it
will instead display the built-in help
cursor.
That is the nice aspect of CSS cursors - they degrade gracefully. If a browser
cannot support them, they don't show, and it does not cause display problems.
So, feel free to use the CSS cursors. Not all will show for everyone, but due
to the smooth degradation for browsers without support - it is a perfect use of
CSS.
Note: You can test whether or not your browser can view each of the 17
cursors by going to the test section
here at the bottom of the original article post.
About the Author
Nicole Hernandez is a web developer with a specialty in web standards and
accessibility. She is the owner of Website
Style and publishes technical articles on her blog called
Beyond Caffeine.
|
