18 User interface
'cursor'
| Property name: | 'cursor' |
|---|
| Value: | [ [ auto | crosshair | default | pointer | move | e-resize | ne-resize |
nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize|
text | wait | help ] || <uri>? ] | inherit |
|---|
| Initial: | auto |
|---|
| Applies to: | all elements |
|---|
| Inherited: | yes |
|---|
| Percentage values: | N/A |
|---|
| Media groups: | visual |
|---|
This property specifies the type of cursor to be displayed for the
pointing device. Values have the following meanings:
- auto
- The UA determines the cursor to display based on the current
context.
- crosshair
- A simple crosshair (e.g., short line segments resembling a "+" sign).
- default
- The platform-dependent default cursor. Often rendered as an arrow.
- pointer
- The cursor is a pointer that indicates a link.
- move
- Indicates something is to be moved
- *-resize
- Indicates that the edge is to be moved.
- text
- Indicates text that may be selected. Often rendered as an I-bar.
- wait
- A cursor to indicate that the program is busy and the user should
wait. Often rendered as a watch or hourglass.
- help
- Help is available for the object under the cursor. Often rendered
as a question mark or a balloon.
- <uri>
- The user agent should retrieve the cursor from the resource
designated by the URI. It is an error if the resource is
not a proper cursor. User agents may handle this error condition in
different ways.
The following example makes the cursor stored in the
resource mything.cur the "text" cursor.
P { cursor : text url(mything.cur) }
CSS2 does not allow users to specify animated cursors.
In addition to being able to assign pre-defined color values to
text, backgrounds, etc., CSS2 allows authors to specify colors in a
manner that integrates them into the user's graphic environment. For
instance, color-blind users may have their environment configured to
avoid specific colors. Style rules that take into account user
preferences thus offer the following advantages:
- They produce pages that fit the user's defined look and feel.
- They produce pages that may be more accessible as the current user
settings may be related to a disability.
The set of values defined for system colors is intended to be
exhaustive. For systems that do not have a corresponding value, the
specified value should be mapped to the nearest system attribute, or
to a default color.
The following lists additional values for color related CSS
attributes and their general meaning. Any color property (e.g., 'color' or 'background-color') can take
one of the following names:
- activeborder
- Active window border.
- activecaption
- Active window caption.
- appworkspace
- Background color of multiple document interface.
- background
- Desktop background.
- buttonface
- Face color for three-dimensional display elements.
- buttonhighlight
- Dark shadow for three-dimensional display elements (for
edges facing away from the light source).
-
- Shadow color for three-dimensional display elements.
- buttontext
- Text on push buttons.
- captiontext
- Text in caption, size box, and scroll bar arrow box.
- graytext
- Grayed (disabled) text. This color is set to #000 if
the current display driver does not support a solid gray color.
- highlight
- Item(s) selected in a control.
- highlighttext
- Text of item(s) selected in a control.
- inactiveborder
- Inactive window border.
- inactivecaption
- Inactive window caption.
- inactivecaptiontext
- Color of text in an inactive caption.
- infobackground
- Background color for tooltip controls.
- infotext
- Text color for tooltip controls.
- menu
- Menu background.
- menutext
- Text in menus.
- scrollbar
- Scroll bar gray area.
- threeddarkshadow
- Dark shadow for three-dimensional display elements.
- threedface
- Face color for three-dimensional display elements.
- threedhighlight
- Highlight color for three-dimensional display elements.
- threedlightshadow
- Light color for three-dimensional display elements
(for edges facing the light source).
- threedshadow
- Dark shadow for three-dimensional display elements.
- window
- Window background.
- windowframe
- Window frame.
- windowtext
- Text in windows.
For example, to set the foreground and background colors of a paragraph
to the same foreground and background colors of the user's window,
write the following:
P { color: windowtext; background-color: window }
As for colors, authors may specify fonts in a way that makes use of
a user's system resources. Please consult the 'font' property for details.
18.4 Other rendering issues that depend on user agents
18.4.1 Magnification
The CSS working group considers that the magnification of a
document or portions of a document should not be specified through
style sheets. User agents may support such magnification in different ways
(e.g., larger images, louder sounds, etc.)
When magnifying a page, UAs should preserve the relationships
between positioned elements. For example, a comic strip may be
composed of images with overlaid text elements. When magnifying this
page, a user agent should keep the text within the comic strip balloon.