Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 05th of July 2015 09:44:13 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 the positioned element, up to the point where the clipping rectangle ends.

The syntax of rect(...) is, as you may have already realized, rather unfortunate. It is based on an early draft of the positioning section, which used the top-left-offset scheme. Internet Explorer implemented this before CSS2 was made a full Recommendation, and so came into conflict with a last-minute change that made rect(...) use side-offsets, just like the rest of CSS2. This was done, reasonably 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

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

Figure 6-9

Figure 6-9. Different colors for different elements

Thanks to the inheritability of color, it's theoretically possible toset all of the ordinary text in a document to be a color such as redby declaring BODY {color:red;}. This should cause all text which is not otherwisestyled (such as anchors, which have their own color styles) to bered. This should not affect elements such as horizontal rules (HR ) or images. However, early versions ofExplorer did inherit colors onto HR elements,while they didn't allow the colors to inherit onto form elements. 100px , then the right margin will be set by the user agent to auto:

P {margin-left: 100px; margin-right: 100px; width: 100px;}

It will then evaluate to 200px , as shown in Figure 8-12.

Figure 8-12

Figure 8-12. Overriding the margin-right setting


Note that margin-right is forced to be auto only for left-to-right languages such as You can use the DOM parser to generate the XML for you if you created an object model that is an adapter on top of DOM. Since your object model uses the document object tree, all the information contained in it is actually stored in the tree. The XML parser can take this tree and convert it to XML for you, you can then save this generated XML to a file. So the DOM parser can generate the ApplicationML file for you.

There are advantages and disadvantages to using some of the strategies to import and export XML. The complexity of your application data and available system resources are factors that would determine what strategy should be used.

Client and Server side - Application Servers

be possible to perform percentage-value vertical alignments. The height of the image itself has no relevance when it comes to vertical alignment: the value of line-height is all that matters. Adding box properties

After everything else, applying margins, borders, and padding to inline replaced elements almost



Applies to

all elements

heightIE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-

This is used to set the height of an element. Height is most often applied to images, but can be used on any block-level or replaced element, although support for such behavior is not widespread as of this writing. Negative length values are not permitted.