Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 04th of December 2016 04:50:56 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 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

DTDs are a simple way to make sure that 2 or more XML documents are of the same "type". Its a very limited approach to making "typed" XML documents shareable across systems. In the future some kind of schema system will be proposed by the W3C that should allow typing, instantiation and inheritance of information (in XML).

XML enables interoperability

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.

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 7-40

Figure 7-40. Value replication and uneven border widths

7.4.2.1. No border at all

So far, we've only talkedabout what happens when you're using a visible border stylesuch as solid or outset. Thingsstart to get interesting, though, when the border style is set to benone:

P {margin: 5px; border-style: none; border-width: 20px;}

As you can see, the order of the actual values doesn't reallymatter. The following three rules will yield exactly the same border,as illustrated in Figure 7-47:

H1 {border-bottom: 3px solid gray;}H2 {border-bottom: solid gray 3px;}H3 {border-bottom: 3px gray solid;}
Figure 7-47

Figure 7-47. Getting the same result in three different ways

You can also leave out some values and have their defaults kick in,like this:element, or even to the browser window itself. The power of thisfeature is both obvious and surprising. It shouldn't be toosurprising to learn that this is the part of CSS2 that user agentsusually first attempt to support. Given that there were some verygood positioning implementations on the horizon as the book was beingcompleted, we felt it worthwhile to give readers a glimpse ofwhat's coming soon -- or, if you're reading this booka year or three after its publication, what can be done.

You may notice that, unlike other chapters, almost none of the<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto; width: 8em; height: 4em;">...</B>

Figure 9-19

Figure 9-19. The effects of absolute positioning

For the most part, the text in both paragraphs looks fairly normal. In the second one, however, the place where the boldface element would have appeared is simply closed up, and the positioned text overlaps the some of the content. There is no way to avoid this, short of positioning the boldfaced text outside of the paragraph (by using a negative value for right) or by specifying a padding for the paragraph that is wide enough to accommodate the of the element.

So far it sounds like we've done the same thing to each bit oftext. This is not quite the case. The inline boxes don'tactually line up, as we can see in Figure 8-50,because the text is all baseline-aligned.

Figure 8-50

Figure 8-50. How the inline boxes (gray) influence the height of the line box

However, it is precisely the inline boxes which determine the heightof the overall line box. The line box is defined to be the distance