CSS Properties
| < Day Day Up > |
CSS2 introduces numerous properties ”the most important of these are related to positioning. Let's begin the section with a discussion of the properties well-supported by browsers. As the section progresses, we'll move on to the less commonly supported properties, so be careful.
Positioning and Sizing of Regions
Positioning originally was developed as a separate specification called CSS-P, which has now been incorporated into the CSS2 specification. Even before finalization of CSS2, the major browsers supported style sheet - based positioning. When combined with elements such as <div> , the functionality of Netscape's proprietary layer element can be achieved with style sheets.
The first and most important property to discuss is the position property, which has the following values:
-
static Places elements according to the natural order in which they occur in a document (the default).
-
absolute Places elements at an absolute position away from an enclosing element. Typically, absolute positioning uses the upper-left corner of the browser as the origin, but if positioned objects are within positioned regions themselves , their origin is the top-left most coordinate of their container.
-
relative Makes the element's position relative to its natural position in document flow. This can be confusing, so most designers tend to use absolute values.
-
fixed Acts like absolute , but does not allow the object to move offscreen . This value allows the designer to peg an object's position similar to using a frame.
-
inherit Sets the positioning relative to the enclosing parent.
Generally , after you specify how to position the region ( absolute , relative, or fixed ), the actual location of positioned elements should be specified by using their top-left corner. The position usually is set with the left and top style properties. The coordinate system for positioned elements uses the upper-left corner of the enclosing object as the origin point, 0, 0. Often, if the tag is directly enclosed in the <body> , the origin will be the upper-left-hand portion of the screen, but it might not necessarily be if you consider positioned elements that contain other positioned elements. Values for the x coordinate increase to the right; y values increase going down from a positioned origin. A value such as 10,100 would be 10 units to the right and 100 units down from the origin. Values can be specified as a length in a valid CSS measurement (such as pixels) or as a percentage of the containing object's (parent's) dimension. You may find that elements contain other elements, so 0,0 isn't always the upper-left corner of the browser. Note that it also is possible to set the bottom and right values for an object, but that not all positioning-aware browsers, notably Netscape 4. x , support these properties; thus, it is best to stick to top and left for describing an object's location. After you position the region, you may want to set its size . By default, the height and width of the positioned region are set to fit the enclosed content, but the height and width properties, as discussed early in the chapter, can be used to specify the region's size.
The following example uses an inline style to set a <div> tag to be 120 pixels from the left and 50 pixels down from the top-left corner of the browser, assuming it is not enclosed in any other positioned elements:
<div style="position:absolute; left: 120px; top: 50px; height: 100px; width: 150px; background-color: yellow;"> At last, absolute positioning! </div>
Before you rush off and position elements all over the screen, be aware of the nuances of nested items. For example, look at the following markup. Notice how the position of the second area is relative to the first. If you read the coordinate values numerically , the inner area should be positioned to the left and above where it shows onscreen. Remember, the coordinates are relative to the containing box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Positioning Items </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- #outer {position: absolute; left: 100px; top: 50px; height: 400px; width: 150px; background-color: yellow;} #inner {position: absolute; left: 75px; top: 50px; height: 30px; width: 40px; background-color: #FFA500;} #outer2 {position: absolute; left: 90%; height: 100px; width: 10%; background-color: green; color: white;} #outer3 {position: absolute; bottom: 10px; right: 150px; height: 100px; width: 100px; background-color: purple; color: white;} --> </style> </head> <body> <div id="outer"> This is the outer part of the nest. <span id="inner"> This is the inner part of the nest. </span> </div> <div id="outer2"> Way to the far right at the top </div> <div id="outer3"> Using the bottom and right properties </div> </body> </html> The rendering of this example is shown in Figure 11-1.
Figure 11-1: Rendering of positioned objects under Internet Explorer
Setting the fixed value for the position property is similar to the previous positioning example. Consider the following markup:
<div style="position: fixed; top: 0px; left: 0px; background-color: blue; color: yellow;"> DemoCompany, Inc. </div>
In a browser that supported the fixed property, this header text would stay in the upper-left corner of the screen regardless of scrolling at all times. We could use this property to keep navigation pegged onscreen without employing HTML's much maligned frame . Unfortunately, this feature is not supported in Internet Explorer even as of the 6.0 release.
The last value for the position property is relative . This value is used when you want to position an object relative to its current position in the document flow. This is best illustrated by example; consider the markup here:
<p style="background-color: #FFA500;">This is a test of <span style="position: relative; top: 10px; left: 20px; background-color: yellow;"> relative positioning. </span> This is only a test. </p>
The <span> tag in this example surrounds text that is dropped down 10 pixels from the top and 20 pixels from the left of the point at which the text normally would fall, as shown here:
Notice that in this example text overlaps other text, showing that objects can stack on top of one another, and revealing the z-index property available to us.
z-index
Absolute and relative positioning allow elements' content to overlap. By default, overlapping elements stack in the order in which they are defined in a document. The most recent elements go on top. This default order can be redefined by using an element's z-index property. Absolute- or relative-positioned elements define a z-index context for the elements that they contain. The containing element has an index of 0; the index increases with higher numbers stacked on top of lower numbers . The following example forces all images inside a container to overlap. Notice how the elements stack in the specified order set by z-index rather than in the order defined by the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Z-index Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- div.S1 {position: absolute; top: 20px; left: 20px; height: 50px; width: 50px; color: white; background-color: blue; z-index: 2;} div.S2 {position: absolute; top: 30px; left: 30px; height: 25px; width: 100px; background-color: #FFA500; z-index: 1;} div.S3 {position: absolute; top: 40px; left: 40px; height: 25px; width: 25px; background-color: yellow; z-index: 3;} --> </style> </head> <body> <div class="S1"> This is section one. </div> <div class="S2"> This is section two. </div> <div class="S3"> This is section three. </div> </body> </html> The rendering of this example is shown in Figure 11-2.
Figure 11-2: Rendering of z-index example
| Tip | It is a good idea not to number z-index values contiguously. Consider using gaps of 5 between layered regions, which allows you to easily insert objects in between later. |
visibility Property
The visibility property determines whether an element is visible. The values for the property are hidden , visible , or inherit . The inherit value means that a property inherits its visibility state from the element that contains it. If an element is hidden , it still occupies the full canvas space, but is rendered as transparent. This simple example shows how the item is made invisible, but is not removed:
<p> This is a <em style="visibility: hidden;"> test </em> of the visibility property. </p>
The rendering here shows how the word "test" still takes up space, but isn't visible.
You can of course hide any region, positioned or not. Although the contents might take up canvas space, if you place the object under other objects using the z-index , the viewer will be none the wiser. When combined with scripting, it is possible to hide and reveal regions easily for an interesting dynamic effect. This effect and others are possible using the powerful combination of HTML, CSS, and JavaScript, often dubbed Dynamic HTML, as discussed in Chapter 14.
Content Overflow Properties
An important issue to consider with positioned objects is what to do when the element's content is greater than the space allocated for it. Most browsers allocate space for content, unless size is set explicitly or a clipping region is set. The overflow property determines how an element should handle the situation when content doesn't fit. A value of hidden for the property clips content to the size defined for the container. The scroll value allows content to scroll using a browser-dependent mechanism such as scrollbars. The default value is none , which does nothing and might clip the content, although generally the browser makes the region larger instead. The following example, which mimics the functionality of a floating frame, creates a positioned region that allows scrolling if content goes beyond its defined size:
<div style=" position:absolute; left:20px; top:20px; border-style: solid; border-width: 1px; width:100px; height:100px; overflow: scroll;"> This <br /> is <br /> a <br /> case <br /> of <br /> lines <br /> going <br /> outside <br /> the <br /> box, which may be clipped. </div>
Try setting the value of the overflow property in the preceding example to hidden and notice that the content is truncated. The following shows the likely rendering of both cases.
Max and Min Height and Width
As boxes are expanded and contracted, their sizes often become too large or too small to be useful for the content they are containing. CSS2 adds properties to set boundaries on the size of boxes. These properties are particularly useful when a region's height and width are set to a relative unit such as % where dimensions may change radically with content and window sizing.
The max-width and max-height properties can be set to indicate how large a region can grow when the browser is resized. The min-width and min-height are used to limit how far down a region can shrink. The min-width and max-width values tend to be the most useful in Web design. Unfortunately, browsers are somewhat inconsistent in their support for these very useful properties. The following example should give you a test of what to expect if your browser does support them:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Max-Min Height and Width </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- #div1 {width: 50%; max-width: 300px; min-width: 150px; height: 50%; max-height: 500px; min-height: 100px; background-color: yellow; border-style: solid; border-width: 1px; overflow: hidden;} h1 {text-align: center;} --> </style> </head> <body> <div id="div1"> <h1> Div 1 </h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque placerat mauris sit amet quam. Nam semper, massa ac fringilla dignissim, erat erat venenatis felis, nec facilisis diam lorem eu diam. Vestibulum ultrices turpis at ante. Sed ultricies leo in enim. Nullam purus elit, luctus et, vulputate sit amet, pellentesque at, tellus. Integer in nunc eget elit commodo placerat. Etiam justo nisl, consectetuer non, blandit varius, aliquet et, velit. Etiam at quam in eros rhoncus blandit. Sed scelerisque scelerisque erat. Proin vitae felis eget lectus mattis sagittis. Morbi et risus. Aenean at nisl. Proin posuere, elit id commodo tincidunt, tortor est tristique magna, nec ornare tortor tortor ut velit. Cras laoreet mi a lectus. </p> </div> </body> </html> Clipping Regions
Sometimes it may be desirable to clip content. For elements whose position type is absolute , a clipping rectangle defines the subset of the content rectangle that actually is shown. The property clip can be used to set the coordinates of the clipping rectangle that houses the content. The form of the property is
clip: rect( top right bottom left )
where top , right , bottom , and left are the coordinate values that set the clipping region:
<div style="background-color: green; height: 140px; width: 140px; position: absolute; left: 10px;"> <div style="position:absolute; background-color: #FFA500; left:20px; top:20px; width:140px; height:140px; border-style: solid; border-width: 1px; clip: rect(10px 90px 90px 10px);" > With clipping </div> </div>
The clipping region is obvious when compared with the same example without the clipping rectangle, as shown here:
Now that you've seen the most commonly used aspect of CSS2, let's turn our attention to the other features that the specification introduces. Unfortunately, many of these features are not yet supported by Internet Explorer.
CSS2 Text and Font Improvements
CSS2 introduces a variety of font properties. For example, font-stretch is used to stretch or condense a font and takes values of ultra -condensed , extra-condensed , condensed , semi-condensed , normal , semi-expanded , expanded , extra-expanded , and ultra-expanded . The property also can take a relative value of wider or narrower to modify the appearance of text relative to a parent font. A few examples of its use are shown here:
.narrow {font-stretch: narrower;} #arialstretch {font-family: Arial; font-stretch: ultra-expanded;} CSS2 also introduces the font-size-adjust property. This property is used for scaled fonts to make sure that text takes up the same amount of room regardless of the availability of a particular font or not. The use of this property so far is not supported by any browsers and its exact usage is not well-defined .
The last interesting text change made in CSS2 is to support shadows on text using the text-shadow property. To specify a shadow for text, you must define the offset of the shadow, vertically as well as horizontally, and optionally set the blur radius and the color of the shadow. Positive horizontal offsets mean the offset is to the right, and negative values indicate the shadow falls to the left. Positive vertical offsets mean the offset is below, and negative above the text. A simple example setting the shadow for h1 elements is shown here:
h1 {color: #CC0000; text-shadow: 0.2em 0.2em blue;} Of course, at the time of this writing no browser yet supports this property. However, readers are warned that the shadows are fast approaching and ready to storm Web page design quicker than a <blink> tag. In short: when this property works, please don't abuse it.
CSS2 List Changes
A minor change made by CSS2 is the support of new values for the list-style-type property. Now the property supports a value of decimal-leading-zero , which creates numbers that are padded with zeros to be equivalent to the largest number in the list. For example, when using a value of decimal-leading-zero for the list-style-type property, the first item in a list between 10 and 99 would be 01, in a list from 100 to 999 would be 001, and so on. Other values include lower-greek and upper-greek , which count an ordered list in lowercase and uppercase Greek symbols, respectively, and lower-latin and upper-latin , which are the same as the normal lower and upper alphabetical. A variety of values to indicate foreign language counting systems also are supported under CSS2: hebrew , armenian , georgian , cjk-ideographic , katakana , hiragana -iroha , and katakana-iroha .
Automatic Numbering of Objects
CSS2 returns HTML elements such as lists and headings to their true logical nature with the introduction of automatic numbering. Using the counter , counter-increment , and counter-reset properties you can automatically number sections of an HTML document using a CSS2 rule. For example, we could number all <h1> tags with a counter using the :before pseudo-element, like so:
h1:before {content: "Section" counter(section); counter-increment: section;} It would be possible to run multiple counters at once to create an outline numbering style and even create lists that count in steps or backward. This simple example shows the application of counters for a document numbering:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> CSS2 Counter Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- p {counter-increment: par-num;} h1 {counter-reset: par-num;} p:before {content: counter(par-num, upper-roman) ". ";} --> </style> </head> <body> <!-- currently only works in Opera 7 --> <h1> Heading </h1> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <h1> Heading </h1> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html> At the time of this edition's writing, the only browser supporting this property was Opera 7. A rendering is provided to give an idea of its probable look in other browsers once implemented.
Display Property Changes
Under CSS2, the display property supports a variety of values. For example, a display property value of compact is used to position enclosed text in the margin of a following block element. A value of run-in also is supported for the display property. This should allow a block-level element such as a heading to be run in or combined with the next block-level element. For example, consider the markup here,
<h1 style="display: run-in;"> Heading 1 </h1> <p> This paragraph should have the heading run right into its first line. </p>
which should result in the large <h1> text appearing as part of the first line of the paragraph. Using display , it is also possible to set an item as the type marker. A marker indicates that the contents should be treated like a list marker. For example, you can use a bullet, picture, or other form of indication to bring attention to some content. You can control the position of the marker used by setting the marker-offset value. Note that the marker value for display is not limited to list items; it can be used to indicate a marker for anything. For example, if you wanted to indicate a particular paragraph as a new piece of text using a GIF image, you might use a rule such as the following:
#new:before {display: marker; content: url(/books/4/324/1/html/2/new.gif); marker-offset: 1.5em;} CSS2 also supports a variety of display properties to make content act like a table and to control the display and formatting of tables in general. Once again, because the major browser does not appear to even be close to supporting these values at the time of this writing, significant discussion is left for a future edition of this book. Interested readers are directed to the CSS2 specification for further details on the display property.
Media Types
A significant goal of CSS2 is to support other output media forms beyond the computer screen. The CSS2 specification defines numerous media types, listed in Table 11-1. Today, primarily the values all , screen , and print are used, so until browser vendors or developers of other user agents begin to support these media types, these definitions might have no meaning outside of the specification.
Media-Dependent Style Sheets
Under the CSS2 specification, certain style sheet properties are supported only by specific media types. In other cases, more than one media type supports a property, but might call for different values, such as when font-related properties are used for both computer display and for printing, two different media that might require different font styles or sizes. CSS2 provides two main ways to define media types for style sheets. The first method simply uses the media attribute for the < link > tag to define the media type. This attribute enables the page designer to define one style for computer screens, one for print, and perhaps one for personal digital assistants (PDAs). For example, a document could include two links, one for screen and one for print, as shown here:
| Media Type | Definition |
|---|---|
| all | For use with all devices |
| aural | For use with speech synthesizers |
| Braille | For use with tactile Braille devices |
| embossed | For use with Braille printers |
| handheld | For use with handheld devices |
| | For use with printed material and documents viewed onscreen in print preview mode |
| projection | For use with projected media (direct computer-to-projector presentations), or printing transparencies for projection |
| screen | For use with color computer screens |
| tty | For use with low-resolution teletypes, terminals, or other devices with limited display capabilities |
| tv | For use with television-type devices |
<link rel="stylesheet" href="screenstyle.css" media="screen" type="text/css" /> <link rel="stylesheet" href="printstyle.css" media="print" type="text/css" />
Multiple values also can be set for the attribute. These should be separated by commas, to show that the style can apply to many media forms; for example, media="screen, print" . The default value for media is all and is applied if the attribute is not used. Currently, the main use of this attribute is to specify one style sheet for printing and one for viewing onscreen, as demonstrated here:
Most of the browsers now support this, which should render the concept of a special "print format" link obsolete someday.
The @import rule has already been discussed in the previous chapter (refer to "Embedding and Importing Style Sheets"). Defining a media type under CSS2 simply requires the addition of an appropriate media type after defining the URL with the @import rule, as shown in this code fragment:
@import url("Braille.css") Braille; The @media rule is used to define style rules for multiple media types in a single style sheet. For example, you might want to have a document display in a large sans serif font when viewed on a monitor, but display in a smaller serif font when printed. Multiple media types should be separated by commas, as shown in the following code fragment:
<style type="text/css"> <!-- @media screen {body {font-family: sans-serif; font-size: 18 pt;} } @media print {body {font-family: serif; font-size: 9 pt;} } @media screen, print {body {line-height: 150%;} } --> </style> If implemented by a browser or another user agent, this code would cause the body of the document to display in an 18-point sans serif font on a computer monitor, to print out as a 9-point serif font, and to have a line height of 150 percent in both media.
Printer Specific CSS
As shown by the CSS2 specification, in the future, style sheets certainly will be extended to support more printing capabilities. Most of the browsers have begun to support printer style sheets and Microsoft has provided the page-break-before property and page-break-after property since Internet Explorer 4. These properties can be used to set a page break on the printer. By using these properties, you can set the printer to go to a new page before or after a particular element. The default value for either of the properties is auto . Other possible values include always , left , and right . Most likely, the value always will be used to tell the printer to always insert a page break. Imagine a rule such as this:
br.newpage {page-break-after: always;} Adding this rule would always cause a page break wherever the rule is inserted into a document.
Alternative Styles and User Styles
The opportunity to have different looks for different situations is an aspect often mentioned about CSS but rarely seen. The easiest way to see this is through alternative style sheets. In supporting browsers, it is possible to then change the look of a page by selecting an alternative style. To insert different styles, use the <link> tag and set the rel attribute equal to " alternate stylesheet ." You will also need to set the title attribute for the tag so the browser can present a choice for the user. Three examples are shown here.
<link rel="stylesheet" href="standard.css" title="standard" /> <link rel="alternate stylesheet" href="orange.css" title="halloween" /> <link rel="alternate stylesheet" href="greenandred.css" title="xmas" />
A browser that supports the selection of alternative style sheets, such as Mozilla, would then present the possibility of choosing a different look to the user, as shown under the menu selection here:
The looks created with alternative style sheets might be radically different, as shown in Figure 11-3.
Figure 11-3: Drastic look changes per style sheet
It is also possible for the user to set his or her own style sheet to use. Most often, this is done to create a look that is easier for the user to read. Under Internet Explorer, users have the option of setting their own style sheet, as shown here:
Given the need to provide different styles for special users, the Opera browser even includes built-in user styles that can easily be selected.
Opera's user styles can be applied to arbitrary Web pages to improve usability or to inspect site construction. For example, consider Google in a "text only" mode under Opera, as shown here:
While user styles let the user be in control of the viewing experience, many designers are uncomfortable with this. Some try to use fixed sizes and positioning or even resort to !important overrides to make sure their designs stay the same. The Web is not print, however, and forcing strict designs on users will not always meet with success. Furthermore, forcing appearance may not be in the best interest of usability. For example, if you force a particular layout of font size, what happens to the user with poor eyesight who really needs to adjust fonts in order to read the page?
User Interface Changes
The CSS2 specification also promises more options for user interfaces, enabling page designers to implement various contextual display options for cursors , colors, and fonts, many of which can be set to match the end user's system settings.
cursor
The cursor property determines how the cursor displays when passed over the affected element. The auto value leaves the display to be determined by the user agent, so the cursor will display according to either the browser default settings or the user settings. The crosshair value renders the cursor as a simple cross, whereas default displays the system's default cursor (usually an arrow). Various other values listed in the CSS2 specification can indicate that something is a link ( pointer ), that text can be selected ( text ), that something can be resized in various directions ( e-resize , ne-resize , nw-resize , n-resize , se-resize , sw-resize , s-resize , w-resize ), or that the user must wait while a program is busy ( wait ). Table 11-2 details the cursors supported in CSS2.
In addition to the built-in cursor forms, one value, uri , can be used to reference a cursor source; multiple cursor sources can be listed, as shown in this example from the CSS2 specification:
p { cursor:url("mything.cur"), url("second.cur"), text; } | CSS Cursor | Description | Typical Rendering |
|---|---|---|
| auto | The browser determines the cursor to display based on the current context. | N/A |
| crosshair | A simple crosshair generally resembles a plus symbol. | |
| default | The browser's default cursor is generally an arrow. | |
| hand | A hand pointer (nonstandard but commonly supported). | |
| move | This indicates something is to be moved; usually rendered as four arrows together. | |
| e-resize | This indicates resizing as a double arrow pointing east-west (left-right). | |
| ne-resize | This indicates resizing as a double arrow pointing northeast-southwest. | |
| nw-resize | This indicates resizing as a double arrow pointing northwest- southeast . | |
| n-resize | This indicates resizing as a double arrow pointing north-south. | |
| pointer | Sets the cursor as the pointer, typically a hand. | |
| se-resize | This indicates resizing as a double arrow pointing southeast-northwest. | |
| sw-resize | This indicates resizing as a double arrow pointing southwest-northeast. | |
| s-resize | This indicates resizing as a double arrow pointing north-south. | |
| w-resize | This indicates resizing as a double arrow pointing west-east. | |
| text | This indicates text that may be selected or entered; generally rendered as an I-bar. | |
| wait | This indicates that the page is busy; generally rendered as an hourglass. | |
| help | This indicates that Help is available; the cursor is generally rendered as an arrow and a question mark. | |
As with fonts, the user agent should attempt to render the first cursor listed, try the second one if necessary, and ultimately default to the generic cursor value listed last. Internet Explorer 6 started custom cursor support, but even though it has not been widely implemented, a variety of JavaScript tricks are often employed to imitate this CSS2 property.
Integrating Colors with User Preferences
Under CSS2, authors will be able to provide color values that match pre-existing settings on the end user's system. This can be particularly useful in providing pages that are set to accommodate a user's visual impairment or other disability. These values can be used with any CSS color properties ( color , background-color , and so on). The CSS2 specification recommends using the mixed-case format of the values shown in Table 11-3, even though they are not, in fact, casesensitive.
| Color Value | Intended Rendering |
|---|---|
| ActiveBorder | Color of user's active window border setting |
| ActiveCaption | Color of user's active window caption setting |
| AppWorkspace | Background color of user's multiple document interface setting |
| Background | Color of user's desktop background setting |
| ButtonFace | Face color of user's 3-D display elements setting |
| ButtonHighlight | Highlight color of user's 3-D display elements setting |
| ButtonShadow | Shadow color of user's 3-D display elements setting |
| ButtonText | Color of user's push-button text setting |
| CaptionText | Color of user's text settings for captions, size box, and scrollbar |
| GrayText | Color of user's disabled text setting; if system doesn't display gray, defaults to black |
| Highlight | Background color of user's control-selected items setting |
| HighlightText | Text color of user's control-selected items setting |
| InactiveBorder | Color of user's inactive window border setting |
| InactiveCaption | Color of user's inactive window caption setting |
| InactiveCaptionText | Text color of user's inactive caption setting |
| InfoBackground | Background color of user's Tooltip control setting |
| InfoText | Text color of user's Tooltip control setting |
| Menu | Color of user's menu background setting |
| MenuText | Text color of user's menus setting |
| Scrollbar | Color of user's scrollbar setting (gray area) |
| ThreeDDarkShadow | Dark-shadow color of user's setting for edges of 3-D display elements |
| ThreeDFace | Face color of user's for 3-D display elements setting |
| ThreeDHighlight | Highlight color of user's 3-D display elements setting |
| ThreeDLightShadow | Light-shadow color of user's setting for edges of 3-D display elements |
| ThreeDShadow | Dark-shadow color of user's setting for 3-D display elements |
| Window | Background color of user's window setting |
| WindowFrame | Frame color of user's window setting |
| WindowText | Text color of user's window setting |
The following code fragment shows how these values could be used to make a paragraph display with the same foreground and background colors as the user's system:
p { color: WindowText; background-color: Window;} Integrating Fonts with User Preferences
Under CSS2, designers will have the option of coordinating fonts with the fonts defined by the end user's system. According to specification, these system font values can be used only with the shorthand font property ¾ not with font-family . However, browser implementation might be more flexible. Table 11-4 lists these values and their related system font values.
| Font Value | System Font Referenced |
|---|---|
| caption | System font used to caption buttons and other controls |
| icon | System font used to label icons |
| menu | System font used for drop-down menus and menu lists |
| message-box | System font used in dialog boxes |
| small-caption | System font used for labeling small controls |
| status-bar | System font used in window status bars |
Thus, to make level-three headers in a document display in the same font as a user's system uses to display window status bars, you would use the following code fragment in a style sheet:
h3 {font: status-bar;} Outline Properties
Outlines are a new CSS2 feature that resemble borders but take up no additional space, and can be set to a shape different from that of the image, form field, or other element to which they are applied. Outlines are drawn over an item, rather than around it, thus causing no reflow . Outlines can be used dynamically, to indicate what element in a page has focus. Outline properties include outline-width , outline-style , outline-color , and the shorthand property outline . Table 11-5 lists the values associated with these properties.
| Outline Property | Values Accepted |
|---|---|
| outline-width | Same values as border-width |
| outline-style | Same values as border-style , except hidden |
| outline-color | All color values, including invert |
| outline | Sets all three values |
Consider the following rule that would outline paragraphs with a dashed line when they are hovered over:
p:hover {outline-style: dashed;} According to the specification, unlike the border property, outlined elements do not necessarily draw as a box. However, under Opera 7, which is the only browser that currently supports outlines, the rendering seems no different from a border. CSS2 has also incorporated support for audio renderings of pages but as exciting as it may sound, it can be very difficult to describe and demonstrate .
CSS2 Aural Improvements
The CSS2 specification contains numerous properties designed to provide aural rendering of Web documents. Although not widely implemented, these properties represent one of the most forward-looking aspects of CSS2, targeted primarily for the sight-impaired, but offering expanded media possibilities for the Web, as well. While the use of a speech-based interface might seem like science fiction to some readers, the advances made in both speech synthesis and speech recognition suggest that practical use of this technology is not really that far away. This is a brief summary of the aural properties defined in CSS2. Again, these properties haven't been broadly implemented, so any references to them in the present tense are based on their definition within the CSS2 specification, not on their actual use.
Basically, aural style sheets allow synthetic speech sources to be associated with paragraphs and other elements. Timing and the spatial relationships between sounds also will be subject to control by style sheets. Presumably, various synthetic voices will function in a way analogous to fonts on a computer screen; different "voices" can be assigned to different elements or classes of elements, or the qualities of any given voice can be altered to suit an element (more emphasis for headers, and so forth).
speech-rate
The speech-rate property is used to determine the rate of speech. Values include numeric values, x-slow , slow , medium , fast , x-fast , faster , slower , and inherit . Numeric values determine the number of words spoken per minute (wpm). Speeds range from 80 wpm for the value x-slow , to 500 wpm for the value x-fast . The relative value faster increases the speech rate by 40 wpm, while slower reduces it by 40 wpm. The default value is medium . The value inherit also can be used with this property.
voice-family
The voice-family property works much like the font-family property insofar as it can be
set to reference a specific voice "font," generic voice "fonts," or a combination thereof, using a comma-separated list. A sample might look like this:
p.voiceone {voice-family: "bill gates", executive, male;} p.voicetwo {voice-family: "jewel", singer, female;} In this hypothetical example, the first voice name is a specific voice based on a public figure, the second is a specific voice meant to suggest a similar character, and the final voice is a generic voice. According to the CSS2 specification, names can be quoted, and should be quoted if they contain white space. The value inherit also can be used with this property.
pitch
The pitch property defines the average pitch of a voice. Values include numeric values, which determine the voice's frequency in hertz, as well as x-low , low , medium , high , and inherit . The default value is medium . The values x-low through high are dependent on the pitch of the voice family in use (as determined by the voice-family property). The value inherit also can be used with this property.
pitch-range
The pitch-range property determines the range of pitch variation of a voice's average pitch, as defined through the voice-family and pitch properties. Values are either inherited ( inherit ) or defined by a numeric value between and 100 . The value produces no pitch variation; 50 approximates normal pitch variation, and 100 produces an exaggerated pitch range. The value inherit also can be used with this property.
stress
The stress property assigns stress, or peaks, in a voice's intonation . Used in conjunction with pitch-range , this might allow the creation of more detailed vocal ranges. The rendering of numeric values might be dependent on the voice's gender and the language spoken. Values are numeric, ranging from to 100; the default value is 50 . The value inherit also can be used with this property.
richness
The richness property determines the richness of a voice. Numeric values range from to 100 , with a default value of 50 . The higher the number, the more the voice carries. The value inherit also can be used with this property.
volume
The volume property determines the average volume of a voice. Numeric values range from to 100 . A value of produces the lowest audible volume, and 100 the loudest comfortable volume. Values also can be set to a percentage of the inherited volume. Other values include silent (no sound), x-soft (equivalent to ), soft (equivalent to 25 ), medium (equivalent to 50 ), loud (equivalent to 75 ), and x-loud (equivalent to 100 ). The only other value is inherit . These values will depend largely on the speech-rendering system used, and on user settings such as speaker volume.
speak
The speak property determines whether text is spoken, and how. The value none prevents text from being spoken. The default value normal renders text in a "normal" speaking voice, as determined by other properties and the user agent. The value spell-out causes the user agent to speak text as individual letters , useful when dealing with acronyms. The only other value is inherit .
pause-before
The pause-before property defines a pause to take place before an element's content is spoken. Values can be expressed as time, measured in seconds (default) or milliseconds ( ms ), or as a percentage. Percentages define pause length in relation to the average length of a word, as determined by the speech-rate property. (For a speech-rate of 100wpm , each word takes an average time of 600 milliseconds; a pause-before value of 100% creates a pause of 600 ms, while a value of 50% creates a pause of 300 ms.) The CSS2 specification recommends the use of relative (percentage) units. This property is not inherited.
pause-after
The pause-after property defines a pause to take place before an element's content is spoken. Values can be expressed as time, measured in seconds (default) or milliseconds ( ms ), or as a percentage. Percentages define pause length in relation to the average length of a word, as determined by the speech-rate property. (For a speech-rate of 100wpm , each word takes an average time of 600 milliseconds; a pause-after value of 100% creates a pause of 600 ms, and a value of 50% creates a 300 ms pause.) The CSS2 specification recommends the use of relative (percentage) units. This property is not inherited.
pause
The pause property is a shorthand notation for the pause-before and pause-after properties just discussed. A style rule of
p {pause: 12ms;} creates a 12-second pause before and after rendering an element; a style rule of
p {pause: 12ms 20ms;} creates a 12-second pause before the element and a 20-second pause after it.
cue-before
The cue-before property sets an "audio icon" to be played before an element. One example might be a musical tone at the start of a paragraph, or a voice stating "begin paragraph." In some sense, this might be similar to the page-turning noise that often is used in children's books with an accompanying tape, record, or CD; this would serve as an attention cue for the listener. The value can be set to the URL of an audio file, as shown here:
p {cue-before: url("ding.wav");} This would play the sound file ding.wav just before speaking the contents of the paragraph. The value of the property also can be set to none . If a URL is used that doesn't reference a viable audio file, the property renders as if the value were none . The CSS2 specification recommends that user agents reference a default sound file if the file referenced is not valid. This property is not inherited, but the value can be set to inherit from a parent element.
cue-after
The cue-after property sets an "audio icon" to be played after an element. Values are the same as for cue-before :
p {cue-after: url("ding.wav");} cue
The cue property provides shorthand notation for cue-before and cue-after . A single value sets both properties to the same value; the properties also can be set separately:
p {cue: url("ding.wav");} play-during
The play-during property allows a background sound (music, sound effects, and such) to play while an element is being rendered. The sound is determined by the URI of an audio file. Additional values include the following:
-
mix Causes the sound set by a parent element's play-during property to continue playing while the child element is being spoken; otherwise , the sound determined by the child element's play-during property plays.
-
repeat Causes the sound to repeat if its duration is less than the time needed to render the element's content; if the rendering time of content is shorter than the sound file's duration, the sound is clipped.
-
auto Causes the parent element's sound to keep on playing.
-
none Terminates the parent element's background sound until the child element is finished rendering, at which time it should resume. The play-during property is not inherited unless the value is set to inherit .
-
inherit Causes the parent element's background sound to start over for the child element, rather than continue to play as determined by the mix and auto values.
azimuth
The azimuth property determines the horizontal location of a sound. How this renders will depend largely on the user agent and the audio system used with it. Values can be set to specific angles based on the concept of 360-degree surround sound. A value of 0deg places a sound dead center, as if originating directly in front of the listener. A value of 180deg places a sound directly behind a listener; 90deg indicates dead right, while 270deg or -90deg indicates dead left. Named values include left-side (270 degrees); far-left , left , center-left , center (0 degrees); center-right , right , far-right , and right-side (90 degrees). The default value is center . The relative value leftward moves the sound 20 degrees counterclockwise, and rightward moves it 20 degrees clockwise. The CSS2 specification notes that these values indicate a desired result, but how this will work must be determined by user agents. The azimuth property is inherited.
elevation
The elevation property determines the vertical location of a sound relative to the listener. Angle values range from 90deg (directly above) to -90deg (directly below). A value of 0deg locates the sound on the same level as the listener. Named values include above (90 degrees), level (0 degrees), and below (-90 degrees). The relative value higher adds 10 degrees of elevation, whereas lower subtracts 10 degrees. The elevation property is inherited.
speak-punctuation
The speak-punctuation property gives the option of having punctuation rendered as speech. The value code causes punctuation to render as literal speech (in other words, "," is spoken as "comma," "?" as "question mark," and so forth). A value of none (default) prevents punctuation from being spoken, presumably to be rendered as it would be in ordinary speech (short and long pause, proper inflection of questions, and so on). The only other value is inherit . The speak-punctuation property is inherited.
speak-numeral
The speak-numeral property provides two options for the rendering of numbers. The value digits causes numbers to render as a sequence of digits ( 1001 renders as one, zero, zero, one). A value of continuous (default) causes numbers to render as complete numbers ( 1001 renders as one thousand and one). The only other value is inherit . The speak-numeral property is inherited.
speak-header
The speak-header property provides options for speech rendering of table headers relative to table data. Values include once , always , and inherit . The value once causes the content of a table header to be spoken once before the content of all associated table cells is rendered ("Animal: dog, cat, cow "). The value always causes the table header content to render before each associated table cell is rendered ("Animal: dog; Animal: cat; Animal: cow "). The speak-header property is inherited.
This is just a brief overview of many of the defined aural properties under CSS2. Although the exact syntax is well-defined in the CSS2 specification, at the time of this writing, so few browsers actually support this technology for testing purposes that the actual syntax might vary once finally implemented.
| < Day Day Up > |
EAN: 2147483647
Pages: 252