Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 01st of October 2014 02:11:36 PM

10.5. Adapting to the Environment

CSS2 offers the ability to both alter the browser's environment and integrate its look more closely to that of the user's operating system.

10.5.1. Cursors

To achieve the former, we have the cursor property, which lets you declare what shape the browser's cursor will take as it passes over a given element. Want to make a humorous point about download times? Change the cursor to the wait cursor (an hourglass or watch) when the cursor passes over hyperlinks. You can even hook this property up to "cursor files" (which are not defined by the specification), so you could theoretically class your anchors based on where they go and load different icons for each type of link. For example, off-site links could cause the cursor to change into a globe, while links intended to provide help could trigger a question-mark cursor.

10.5.2. Colors

In order to let web pages more closely match the user's desktop environment, there are a whole list of new color keywords like button-highlight, repeating. Let's add to that and actually change theimage's position in the background.

background-position

WARNING

Percentage values refer to a point on both the element and the originimage (see explanation in Section 6.2.3.2, "Percentage values" later in this chapter).

three-d-shadow, and gray-text. These are all intended to use the colors of the user's operating system. In all, there are 27 of these new color keywords. I won't list them all out here, but they're listed in Table 10-1, found at the end of this chapter.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

SELECT {color: rgb(33%,33%,33%);}
Figure 6-11

Figure 6-11. Setting color on form elements

You could also set the foreground color of INPUTelements, although as we can see in Figure 6-12,this would have the effect of setting that color on all inputs, fromtext to radio-button to checkbox inputs:

SELECT {color: rgb(33%,33%,33%);}INPUT {color: gray;}
Figure 6-12

Figure 6-12. Changing form element foregrounds

P {font-size: 14px;}

If all the content of a line is text of the same size, then the linebox is always as tall as the biggest line-heightvalue contained within that line box (since this will coincide withthe height of the tallest inline box in the line), so this works.Furthermore, it only affects those lines in which a hyperlinkappears. However, there is yet another alternative.