Color, Filters, and Other Style Sheet Properties - Alphabetical Property Reference: Cursor

(Page 2 of 4 )

cursor
IE 4 NN n/a Moz all Saf all Op all CSS 2

Inherited: Yes

Sets the shape of the cursor when the screen pointer is atop the element. The precise look of cursors depends on the operating system. Before deploying a modified cursor, be sure you understand the standard ways that the various types of cursors are used within the browser and operating system. Users expect a cursor design to mean the same thing across all applications. Figure 4-3 offers a gallery of cursors for each of the cursor constant settings provided by Internet Explorer for Windows.

Figure 4-3.  Internet Explorer cursor gallery

CSS Syntax

cursor: cursorType || uri

Value

A cursor type is one of the implemented cursor names. The following table shows which cursor types are supported by various browsers and the CSS standard (3* indicates a proposed value for CSS3).

Cursor name	IE/Windows	IE/Mac	Mozilla	Safari	Opera	CSS
alias	n/a	n/a	n/a	n/a	n/a	3*
all-scroll	6	n/a	1.8	n/a	n/a	3*
auto	4	4	all	all	7	2
cell	n/a	n/a	1.8	n/a	n/a	3*
col-resize	6	n/a	1.8	n/a	n/a	3*
context-menu	n/a	n/a	1.8	n/a	n/a	3*
copy	n/a	n/a	1.8	n/a	n/a	3*
count-down	n/a	n/a	n/a	n/a	n/a	n/a
count-up	n/a	n/a	n/a	n/a	n/a	n/a
count-up-down	n/a	n/a	n/a	n/a	n/a	n/a
crosshair	4	4	all	all	7	2
default	4	4	all	all	7	2
e-resize	4	4	all	all	7	2
grab	n/a	n/a	<1	n/a	n/a	n/a

Cursor name	IE/Windows	IE/Mac	Mozilla	Safari	Opera	CSS
grabbing	n/a	n/a	<1	n/a	n/a	n/a
hand	4	4	n/a	all	7	n/a
help	4	4	all	all	7	2
move	4	4	all	all	7	2
n-resize	4	4	all	all	7	2
ne-resize	4	4	all	all	7	2
nesw-resize	n/a	n/a	1.8	n/a	n/a	3*
no-drop	6	n/a	1.8	n/a	n/a	3*
none	n/a	n/a	n/a	n/a	n/a	3*
not-allowed	n/a	n/a	n/a	n/a	n/a	3*
nw-resize	4	4	all	all	7	2
nwse-resize	n/a	n/a	1.8	n/a	n/a	3*
pointer	4	4	all	all	7	2
progress	6	n/a	<1	n/a	9	2.1
row-resize	6	n/a	1.8	n/a	n/a	3*
s-resize	4	4	all	all	7	2
se-resize	4	4	all	all	7	2
spinning	n/a	n/a	all	n/a	n/a	n/a
sw-resize	4	4	all	all	7	2
text	4	4	n/a	n/a	n/a	2
url(uri)	6	n/a	n/a	n/a	n/a	2
vertical-text	6	n/a	1.8	n/a	n/a	3*
w-resize	4	4	all	all	7	2
wait	4	4	all	all	7	2

Notice that IE 6 or later implements downloadable cursors. The IE setting for an external URL requires an address of a cursor file of extension .cur  or .ani (which you create with a graphics utility that creates Windows cursors).

Initial Value         auto

Example              a.helpLink {cursor: help}

Applies To            All elements.

Direction
IE 5 NN n/a Moz all Saf all Op all CSS 2

Inherited: Yes

Sets the direction of the flow of inline portions of content (such as text) and the order in which table cells are filled along a row. Analogous to the dir property of most elements, the direction style property lets you override the browser’s default rendering direction for other languages or special content.

display

CSS Syntax

direction: ltr | rtl

Value

Either of two directional constants. The value ltr stands for left-to-right; rtl stands for right-to-left.

Initial Value         ltr

Applies To               All elements. 

display
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

This is a multipurpose property that determines how a browser treats invisible boxes that surround every element and text node. For example, a block-level item exhibits specific characteristics that are quite distinct from an inline item (at least with respect to how the element renders in relation to surrounding content). The CSS specification provides numerous types of such boxes, because the space they occupy can be influenced differently by such things as borders or even outright rendering rules (e.g., the way a compact style controls definition list items). In practice, you may not see much, if any, difference between some display types because the browser’s built-in style sheet doesn’t specify anything different for the variations (e.g., a table element may render the same way if its display style property is set to block or table ). At the same time, the display style lets you override the default rendering behavior of elements, such as making a block table render as an inline table.

Additionally, display settings can be applied to arbitrary elements (e.g., div s and span s) to give them the rendering powers of the full-fledged elements in the value names. For example, a collection of hierarchical elements (such as the result of an XML query) can be displayed as a table by applying table-related display values to elements corresponding to groups, rows, and cells.

Perhaps the most frequently used aspect of the display style property in DHTML is setting the scripts to toggle between showing and completely hiding the element and its space. When the property is set to none , the element is hidden from view, and all surrounding content cinches up to occupy whatever space the element would normally occupy. This is different from the visibility property, which reserves space for the element while hiding it from view. But to redisplay the item to its default display mode, you can assign one of the common display types ( block and inline ) or the more specific type associated with the element (such as list-item for an li element), if supported by your target browsers.

CSS Syntax

display: displayType

Value

The CSS specification identifies many display types, but browser support is more limited. The following table shows the supported types. Support for the list-item and all table-related values means that the values can be applied successfully to arbitrary containers.

	IE/
Display type	Windows	IE/Mac	NN	Mozilla	Safari	Opera	CSS
block	5	4	4	all	all	7	2
compact	n/a	n/a	n/a	n/a	n/a	n/a	<2.1
inline	5	4	4	all	all	7	2
inline-block	5.5	n/a	n/a	n/a	n/a	n/a	<2.1
inline-table	n/a	5	n/a	n/a	all	7	2
list-item	5	5	n/a	all	all	7	2
marker	n/a	n/a	n/a	n/a	n/a	n/a	<2.1
none	4	4	4	all	all	7	2
run-in	n/a	5	n/a	n/a	n/a	7	2
table	n/a	5	n/a	all	all	7	2
table-caption	n/a	5	n/a	all	all	7	2
table-cell	n/a	5	n/a	all	all	7	2
table-column-group	n/a	5	n/a	n/a	n/a	n/a	2
table-footer-group	5.5	5	n/a	all	all	7	2
table-header-group	5	5	n/a	all	all	7	2
table-row	n/a	5	n/a	all	all	7	2
table-row-group	n/a	5	n/a	n/a	n/a	n/a	2

Initial Value         Element-dependent. 

Example              hidden {display: none}

Applies To            All elements (but some display types are applicable to specific elements).

Object Model Reference

[window.]document.getElementById("elementID").style.display

Next: Alphabetical Property Reference: Elevation >>
 

More DHTML Articles
More By O'Reilly Media

Comments On: Color, Filters, and Other Style Sheet Properties

· This article is an excerpt from the book "Dynamic HTML: The Definitive Reference,...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.