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 usability 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 (usually 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 resizable 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: acronym { 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. |
|
|
|
|
Create
PDF eBooks Instantly!
Still No PDF Download
Option For Your Customers Because Your Brain Just Shrivels
Up When You Try To Buy/Use Adobe Acrobat software?
Now, You Can Point And Click Your
Way To Instant, Hassle-Free PDF Publishing ... Using One
of The 33 Free To Nearly Free Tools!
Order Now and Receive Master
Resell Rights, Keep 100% of The Profits!
(This Offer May End At Any Time)
|
|
|
|
Easy
PDF Publisher's Toolkit
Create
PDF Files From Any Printable Document in a Few Simple
Clicks!
"Finally
There's an EASY Way To
Publish Stunning PDF Files,
Without Wasting a Lot of Time and Money"
|
|
|
|
|
 |
Translate
Page!
    |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Newsletter |
|
Sign-Up for The Business
Junction Newsletter and Get "FREE" Newsletter Sign-Up Software, Specials Updates, Product
Updates and MUCH MORE!  |
|
|
|
|
|
