Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 05th of August 2015 01:55:11 AM

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 explain what's going on here. Since the border doesn't exist, it can't have any width, so the width is automatically set to 0 (zero). This may seem completely backward, but it actually makes a great deal of sense. After all, if a drinking glass is empty, you can't really describe it as being half-full of nothing. You can only discuss the depth of a glass's contents if it has actual contents. In the same way, talking about the width of a border only makes sense in the context of borders that have some existence.

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, 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.

10.5.3. Outlines

While you're moving your cursor around, you might want to show where the focus is set. For example, it might be nice to define a button so that it gets a red box around it when the cursor moves over it. Well, there a number of outline properties, including outline, outline-color, outline-style, and outline-width. To use the example of a red box, you might declare:

IMG.button:hover {outline: solid red 1px;}

This should have the effect described. The outline styles could also be used to set a visible outline for regions in a client-side image map.



Library Navigation Links

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

Figure 9-6

Figure 9-6. Defining a height by using an explicit bottom

In this case, the height of the element must be90% the height of the containing block, since 100% -- 10% = 90%. This assumes, of course, that there have been nomargins, borders, or padding set for the positioned element;otherwise, the effective height would bedecreased, although the entire element (content, padding, borders,and margins) would still be 90% as tall as the containing block.

Similarly, if we specifically declare a height but leave </STYLE>

Because Explorer will read in both style sheets, it will use thecascade to determine which rules should actually be applied. Ifyou've ordered things correctly, and the imported style sheetcomes after the linked style sheet, its rules will win out over therules in the linked style sheet.

Therefore, Explorer will use the styles fromimport-styles.css. Navigator, on the other hand,won't even read the styles that are supposed to be imported, so declared overflow-clip: auto.

On the other hand, it might be okay to go beyond the bottom and rightedges, but not the top or left. Figure 9-13 showsthe results of these styles (and remember, the dashed lines are onlyfor illustrative purposes):

DIV#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;overflow: hidden; overflow-clip: rect(0, 6em, 9em, 0);}
Figure 9-13

Figure 9-13. Expanding the clipping region