Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 24th of February 2017 01:53:10 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, 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

All of the advantages of XML outlined so far all make interoperability possible. This is one of the most important requirements for XML, to enable disparate systems to be able to share information easily.

By taking the lowest common denominator approach, by being web enabled, protocol independent, network independent, platform independent and extensible, XML makes it possible for new systems and old systems (that are all different) to communicate with each other. Encoding information in plain text with tags is better than using propietary and platform dependent binary formats.


XML provides solutions for problems that have existed for the past 20 years. With most applications and software services using the Internet as a target platform for deployment, XML could not have come at a better time. With the web becoming so popular, a new paradigm of computing has emerged for which XML supplies one of the most important pieces, platform, vendor and application neutral data. Regardless of the programming language used to process XML, it will enable this new networked computing world.

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

FONT tags, and hopefully the other style tags aswell (like <B> and<U>). Since the entirety of the sidebar usesthe font Verdana, we can add that to our style sheet:

.sidebar {background: green; font-family: Verdana,sans-serif;}

We use font-family here because we don'twant to specify a font-size for the sidebar, so wecan't use the shorthand font.

Here's a rather obscure Navigatorbug which is utterly baffling when encountered. Under whatevercircumstances trigger the bug (frames seem to be a major cause),resizing the browser window can cause all of the styles to go away,leaving plain text in their wake.

Reloading the page will get the styles back, but that's hardlya satisfactory solution. Slightly better is the inclusion of a smallbit of JavaScript that will fix the problem for you. This widgetshould cause any

H1 {color: gray;}   /* This CSS comment is several lines
H2 {color: silver;}   long, but since it is not wrapped
P {color: white;}   in comment markers, the last three
PRE {color: gray;}   styles are part of the comment. */

In this example, only the first rule (H1 {color: gray;}) will be applied to the document. The rest of the rules, as part of the comment, are ignored by the browser's rendering engine.

Moving on with our example, we see some more CSS information actually