Home arrow DHTML arrow Page 2 - Color, Filters, and Other Style Sheet Properties
DHTML

Color, Filters, and Other Style Sheet Properties


Continuing with our multi-part series on style sheet properties, this fourth part of the series covers color, filters, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
September 20, 2007
TABLE OF CONTENTS:
  1. · Color, Filters, and Other Style Sheet Properties
  2. · Alphabetical Property Reference: Cursor
  3. · Alphabetical Property Reference: Elevation
  4. · Alphabetical Property Reference: Filters

print this article
SEARCH DEVARTICLES

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


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials