Cheatsheets: CSS UI Values

There are some special CSS2 values that enable you to create a(n element on your) page in colors, fonts and cursors taken from a visitor's UI. We're not sure on their support (anyone on a Mac (?), they seem very Windows based); any somewhat modern browser on Windows displays them fine.

Color values

These are the color values. These can be used anywhere where a color is allowed in css. Here they're applied as background color, so you should see your system colors displayed.

≡ Colorname Description ≡ Colorname Description
activeborder Active window border activecaption Active window caption
appworkspace Background of multiple document interface background Desktop background
buttonface Button face buttonhighlight Button highlight
buttonshadow Button shadow buttontext Button text
captiontext Caption text graytext Gray text
highlight Highlight highlighttext Highlight text
inactiveborder Inactive window border inactivecaption Inactive window caption
inactivecaptiontext Inactive caption text infobackground Tooltip backgroundcolor
infotext Tooltip text menu Menu background
menutext Menu text scrollbar Scrollbar background
threeddarkshadow Dark shadow for 3D elements threedface Face color for 3D elements
threedhighlight Highlight color for 3D elements threedlightshadow Light color for 3D elements
threedshadow Shadow for 3D display elements window Window background
windowframe Window frame windowtext Window text
Font values

These values can be used for the (shorthand) font property. These don't show up properly in some browsers on Windows; we'd like to see some reports from other platforms.

Font name Description
caption Font used for captioned controls (e.g. buttons, drop-downs, etc.)
icon Font used to label icons
menu Font used in menus
messagebox Font used in dialogs, etc.
smallcaption Font used for labeling small controls
statusbar Font used in the status bar.
Example
Notification
Cursor values

These values are to be used with the cursor property. Hover their names/description to see cursor changing. This first set is full CSS 2.1 recommendation. Not sure on cross-platform support, but any recent browser on Windows supports full recommendation, except for external cursor files:

Cursor name Description
auto Browser decides which cursor to display based on where it is.
default Your default pointer (regular arrow).
pointer Hand pointer, the one normally shown when hovering a link. Older IE versions used 'cursor: hand;', not recommended.
crosshair Simple cross, aka aiming cross.
move Cross with arrows, giving the impression of a draggable area.
progress Indicates you can continue working, but work is being done (arrow with hourglass).
text A text caret, should be the one you see when hovering text.
wait Cursor indicating need to wait proceeding, on Windows an hourglass (without arrow, as opposed to 'progress').
help Question mark, your regular 'help' cursor.

Additionally, there's the resize cursors. IE5.5 and below on Windows display an arrow poiting in wanted direction. IE6 and other browsers on Windows show the regular window resizing cursors (hence 'n-resize' and 's-resize' and others duplicating - these are all bi-directional). The CSS3 recommendation indicates this was not intended - these should point in only one direction, and the recommendation adds some extra bi-directional cursors:

n-resize s-resize e-resize w-resize ne-resize nw-resize se-resize sw-resize

Note that you can also use an external cursor file, done like this: "p {cursor: url(custom.cur), pointer;}". A second, text-based cursor is declared in case browser can't retrieve the cursor file. It seems only IE6 is currently supporting this (hover this paragraph), and supports .cur and .ani files only, but format could be anything (example by W3C shows .csr (?)).

Then there's a set of CSS3 cursors, not widely supported yet. IE6 supports a couple, NS7 and Mozilla 1.5+ some others (but only with '-moz-' prefix). Firefox, on the other hand, doesn't do those (1.0 as of writing)...

Cursor name Description
alias (-moz-alias) Cursor indicating you can create a shortcut/alias (arrow with shortcut overlay on Windows).
all-scroll (IE6) Cursor indcating scrolling in all directions is possible.
cell (-moz-cell) Office kinda cursor (bold outlined '+' sign), as seen in Word and Excel when a table cell is selected.
col-resize (IE6) Cursor indicating resizable columns (double vertical lign with arrows).
row-resize (IE6) Cursor indicating resizable rows (double horizontal lign with arrows).
ns-resize Bi-directional cursor, pointing north & south.
ew-resize Bi-directional cursor, pointing east & west.
nesw-resize Bi-directional cursor, pointing northeast & southwest.
nwse-resize Bi-directional cursor, pointing northwest & southeast.
context-menu Cursor indicating an available context-menu (arrow with rightclick menu like graphic representation).
copy (-moz-copy) Cursor indicating object can be copied (arrow with '+' sign).
no-drop (IE6) Cursor indicating dragged object can't be dropped here (regular handwith stop sign on Windows).
not-allowed (IE6) Cursor indicating a not allowed action (stop sign).
vertical-text (IE6) Text caret for vertical text.

NS7 (some earlier versions too, not checked) and Mozilla 1.5+ have some more propietary options. A lot more than displayed here, but only these seem to work somewhat consistent. Again, ofcourse you can ignore IE, yet, again, Firefox (1.0) only does two of these.

Cursor name Description
-moz-grab Hand cursor (regular Mac hand, or used to be (?)), indicating a possible grab of object.
-moz-grabbing Version of same hand, (indicating and) having grabbed an object.
-moz-zoom-in (FF) Cursor indicating a possible zoom-in (magnifying glass with '+' sign).
-moz-zoom-out (FF) Cursor indicating a possible zoom-out (magnifying glass with '-' sign).

Credits, more references and information: