User:Bartlett/23
23.HTML
Hour 23. User Interface and Generated Content
What You'll Learn in This Hour:
The properties defined in the Cascading Style Sheets specification allow you to do more than simply place and present content. Specific properties also enable you to shape the user's experience directly through interaction with the operating system and browser; other properties let you add to the content of the page to build an appropriate presentation for the user. |
./ ADD NAME=CH23LEV1SEC1.HTML
User Interface Properties
The user interface (UI) of a computer program is the part that interacts with the person using the program. This interaction includes not only the visual output, but also the method of providing information to the program via mouse, keyboard, or other input device.
When talking about web content, you're dealing with several layers of user interface. The operating systembe it various versions of Windows, Mac OS, or Linux running XWindowsprovides a basic graphical user interface (GUI) layer, which creates the windows, menus, and boxes onscreen. The browser's user interface is built upon the operating system's UI and generally is designed to mesh with the operating system while adding appropriate controls for web surfing. A third layer of user interface is created by the content itself; a web page can be thought of as a UI for the information contained in the markup.
CSS Level 2.1 has several user interface properties examined in this part of the hour. These are not enough to fully control all interactions with the user, but they do enable you to alter some UI components and use information provided by the operating system to style the page.
Changing the Cursor Appearance
A key part of the web-user experience is showing what part of the GUI is currently being pointed to by a pointing device, such as a mouse. The mouse cursor could be controlled by a mouse or by another tool, such as a track-ball, a joystick, or a virtual mouse via the keyboard, for people who can't operate a normal mouse. For users with severe disabilities, mouse control can be approximated by pointer wands attached to the head, or even by eye-tracking sensors.
A mouse cursor is applicable only in certain contexts; in print or Braille, for example, there is no mouse cursor. The mouse cursor is disabled or ignored by screen readers for blind users, and it's also inapplicable for kiosk systems with touch panels or for small devices with touch screens, such as Palm or Pocket PC organizers.
It's important to keep in mind that a mouse cursor is just an indicator of potential action and not necessarily a choice that's been acted on; the cursor's location corresponds to the :hover pseudo-class in CSS, not to the :active or :focus pseudo-classes.
The CSS property cursor can be used to change the appearance of the mouse cursor; this change occurs whenever the mouse cursor is over the part of the page display corresponding to the display rule's selector. Because :hover is implied, it's not necessary to use that pseudo-class with the selector.
A cursor rule is written like this:
selector { cursor: cursor-type; }
The values that can be assigned to the cursor property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23table01 Table 23.1]. The default value is auto, and if this value is set on a containing box, it is inherited by that box's children elements.
| Value | Effect |
| auto | Lets the browser decide the shape of the cursor |
| crosshair | Displays a crosshair cursor |
| default | Displays the default cursor (usually an arrow) |
| e-resize | Indicates that the object can be resized eastward |
| help | Displays a help-available cursor (usually a question mark) |
| move | Indicates a movable object's cursor (usually crossed arrows) |
| n-resize | Indicates that the object can be resized northward |
| ne-resize | Indicates that the object can be diagonally resized to the northeast |
| nw-resize | Indicates that the object can be diagonally resized to the northwest |
| pointer | Displays a link pointer cursor (usually a pointing hand) |
| s-resize | Indicates that the object can be resized southward |
| se-resize | Indicates that the object can be diagonally resized to the southeast |
| sw-resize | Indicates that the object can be diagonally resized to the southwest |
| text | Displays a text editing cursor (usually an I-shaped bar) |
| wait | Displays a waiting cursor (usually an hourglass) |
| w-resize | Indicates the object can be resized westward |
| url(address) | Displays a cursor image from a given URL |
| inherit | Uses the cursor value for the containing box |
Many of the values listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23table01 Table 23.1] refer to compass directions. These cursors are intended to be used with client-side programming techniques such as JavaScript and AJAX to mark objects that are resizable when clicked and dragged. The compass directions are a bit misleading "north" simply means up, toward the top of the screen; "west" means left; "south" means down; and "east" means to toward the right. Therefore, a cursor with the value of se-resize indicates the object is resizable in a lower-right direction.
The url() value is written in a special format; you can write as many url() values as you like, and the browser displays the first one it is able to load and understand. After the last url() value, you should provide a "generic" cursor value from the list in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23table01 Table 23.1], in case the url() cursors can't be displayed; for example, if the file format isn't understood by the browser. The concept of a generic default is similar to that of the font-family property and so should be familiar to you.
Because there is not a universal format for cursor files, you should use multiple url() values to provide cursor images in several file formats. For example, give a version of the cursor in SVG, .tiff, .cur, and .gif formats, in addition to supplying a generic value. Cursor images should usually be smallno more than around 40 by 40 pixels, and usually around 16 by 16.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex01 Listing 23.1] is an HTML file that demonstrates the various cursors available in CSS. You can test these out yourself and see how your operating system and browser display each cursor type.
Listing 23.1. The Different Styles of Cursors
<!-- cursors-23.1.html --><br /><html><br /><head><br /><title>Changing Cursors</title><br /><style type="text/css"><br />table { border-spacing: 0.5em;<br />width: 100%; margin: 0;<br />empty-cells: hide; }<br />#a td { width: 25%; } #b td { width: 33%; }<br />td { padding: 1.5em 1em; text-align: center;<br />font-family: Verdana, sans-serif;<br />border: 3px solid silver;<br />text-align: right; }<br />td:first-child { text-align: left; }<br /></style><br /></head><br /><body><br /><table id="a"><br /><tr><td style="cursor: crosshair;">crosshair</td><br /><td style="cursor: default;">default</td><br /><td style="cursor: help;">help</td><br /><td style="cursor: pointer;">pointer</td></tr><br /><tr><td style="cursor: progress;">progress</td><br /><td style="cursor: text;">text</td><br /><td style="cursor: wait;">wait</td><br /><td style="cursor: url('k-small.cur'),<br />url('k-small.tiff'),<br />url('k-small.gif'),<br />auto;">url()</td></tr><br /></table><br /><table id="b"><br /><tr><td style="cursor: nw-resize;">nw-resize</td><br /><td style="cursor: n-resize;">n-resize</td><br /><td style="cursor: ne-resize;">ne-resize</td></tr><br /><tr><td style="cursor: w-resize;">w-resize</td><br /><td style="cursor: move;">move</p></td><br /><td style="cursor: e-resize;">e-resize</td></tr><br /><tr><td style="cursor: sw-resize;">sw-resize</td><br /><td style="cursor: s-resize;">s-resize</td><br /><td style="cursor: se-resize;">se-resize</td></tr><br /></table><br /></body><br /> |
The screenshot in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23fig01 Figure 23.1] is actually a composite of several screenshots; obviously, only one cursor can usually be displayed at a time, so I've combined images together to show you how one browser displays these cursors.
Creating Outlines
An outline is a visual line surrounding an element. This sounds similar to a border, doesn't it? Unlike a border, an outline doesn't actually take up any space in the box model. Instead, it's laid over other elements. The outline is placed just outside of the border, and thus it will be displayed over the margin or even over other content if the margin is small and the outline is wide.
The appearance of the outline is set with the outline-width, outline-style, and outline-color properties, or the outline shorthand property that sets them all at once. The outline-width property can take the same types of values as the border-width property; the outline-style can accept border-style properties. Unlike the border properties (which are covered in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16], "Borders and Boxes"), there are not outline properties for each side of a box; the outline must be consistently the same color, width, and style on all sides.
The outline-color value can be any normal color value, or invert, which means the outline is displayed in the opposite colors of the margins (or other content) over which it lies. Unlike borders, there is only one outline; you can't set separate outlines for different sides of the outlined element.
An outline is most useful for indicating focus or hover, although you can use it without the :focus or :hover pseudo-classes to simply draw an outline around anything. For example:
a:focus, a:hover { outline-width: medium;
outline-style: dotted;
outline-color: invert; }
h2 { outline: green 1px solid; }
Outlines can be very useful if you are debugging your style sheets. Because an outline doesn't affect the width of the box model, this means that your outlines don't change the way the page is laid out. You can use outlines to highlight specific boxes and watch how they react with each other.
Using the System Colors and Fonts
The CSS language enables you to access certain qualities of the system or browser user interface and use these for color or font values. You can do this by using special keywords that correspond to the current system settings.
The system color keywords can be used with any CSS property that can be set to a specific color valuecolor, background-color, border-color, and so on. These are listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23table02 Table 23.2]. These keywords are traditionally written in mixed case, with capital letters at the beginning of words for greater legibility. However, CSS is not case sensitive for color values, so if you write activeborder or ACTIVEBORDER, it means the same thing as ActiveBorder.
| Value | Effect |
| ActiveBorder | The border color around the active window |
| ActiveCaption | The background color of the caption on the active window |
| AppWorkspace | The background color within the application's main window |
| Background | The background color of the desktop |
| ButtonFace | The background color of a three-dimensional button |
| ButtonHighlight | The border color for the dark edge of a three-dimensional button |
| ButtonShadow | The shadow color of a three-dimensional button |
| ButtonText | The text color for a three-dimensional button |
| CaptionText | The text color in a caption |
| GrayText | The text color for disabled options (grayed out) |
| Highlight | The background color for selected items |
| HighlightText | The text color for selected items |
| InactiveBorder | The border color around an inactive window |
| InactiveCaption | The background color of the caption on an inactive window |
| InactiveCaptionText | The text color of the caption on an inactive window |
| InfoBackground | The background color for tooltips |
| InfoText | The text color for tooltips |
| Menu | The background color for menu items |
| MenuText | The text color for menu items |
| Scrollbar | The color of the scrollbar |
| ThreeDDarkShadow | The dark shadow for a three-dimensional element |
| THReeDFace | The background color for a three-dimensional element |
| THReeDHighlight | The highlight color for a three-dimensional element |
| ThreeDLightShadow | The border color for the light edge of a three-dimensional element |
| ThreeDShadow | The shadow color for a three-dimensional element |
| Window | The background color of a window |
| WindowFrame | The border color of the frame around a window |
| WindowText | The text color within a window |
For each of the values in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23table02 Table 23.2], a descriptive adjective such as highlight, border, background, or text is given before the word color. These describe how the colors are used within the system user interface, but you don't have to use them for only those purposes in your style sheet. For example, you could set the text color to Window, and the background-color to WindowText; the AppWorkspace value could be used to set a box's border. Here are examples of how to use these values:
.showthis { color: window;
background-color: windowText;
border: 2px solid AppWorkspace; }
You can also use the system font settings for various types of text within your style sheet. You do so by setting the font shorthand property to one of the system values shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23table03 Table 23.3]. For example, to make a
| Value | Effect |
| caption | Uses the same font values as system captions |
| icon | Uses the same font values as system icons |
| menu | Uses the same font values as system menus |
| message-box | Uses the same font values as system message boxes |
| small-caption | Uses the same font values as small system captions |
| status-bar | Uses the same font values as the status bar |
div { font: message-box; }
Each use of font in this manner sets the font-size, font-style, font-weight, font-variant, and font-family to the same values as the specified kind of system text. Subsequent rules can change those values, as shown here:
div { font: message-box;
font-weight: bold;
font-size: larger;
color: window;
background-color: windowText;
border: 2px solid AppWorkspace; }
Why would you want to use system colors and fonts? Usually you wouldn't, actually. Websites have good reason to express their own individuality and style, and utilizing the user's system appearance doesn't mesh well with that. However, there are some cases, such as alert boxes, where you may very well want to mimic the effects of an operating system prompt.
There is a potential accessibility benefit: In general, you can be sure that system colors will be usable by someone with visual impairments because otherwise she couldn't operate her computer at all. Most users with special needs set their computers to high contrast, large fonts, and any other required properties.
However, the accessibility benefit of system styles is small compared with the negative effects of "sameness" and bland design; even users with poor vision can benefit from an attractive website design. User style sheets and alternate style sheets provide better accessibility options for all users in the long run.
./ ADD NAME=CH23LEV1SEC2.HTML
Creating Content
wax ka badalIn CSS terminology, generated content consists of text or images that aren't present in the HTML markup but are added through CSS rules. The ability to generate content allows for even more flexibility in designing style sheets and alternate style sheets that effectively convey the information on the page to the user.
In overview, generating content depends on using the :before and :after pseudo-classes as selectors for rules with content property declarations. Text, attribute values, images, quotation marks, and numbered counters can all be added to HTML using CSS content generation.
The :before and :after Pseudo-Classes
To generate content, you must use the :before and :after pseudo-classes. These pseudo-classes define the point where you place additional material. Content can be added at the beginning or the end of an element.
To add content at the beginning of an element, you would write a rule like this:
element:before { declarations; }
To insert the content after the element, the rule looks like this:
element:after { declarations; }
You can combine this with any other CSS selectors, such as class, id, attribute, relationship, or pseudo-class selectors. You can't write a single rule that has both :before and :after selectors, but you can write one rule putting content before the element and another adding content after it.
The content Property
The material generated at the insertion point (either before or after the selector) is defined by the content property. This CSS property can be used only within a rule with a :before or :after pseudo-class selector. The values for content are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23table04 Table 23.4].
| Value | Effect |
| "quoted-text" | Inserts the specified text |
| attr(attribute) | Inserts the value of the specified attribute |
| close-quote | Inserts an appropriate closing quote mark |
| counter(name) | Inserts a counter's value |
| counter(name, marker-style) | Inserts a counter's value |
| counters(name, string) | Inserts a counter's value and a string |
| counters(name, string, marker-style) | Inserts a counter's value and a string no-close-quote Suppresses the printing of a closing quote mark |
| no-open-quote | Suppresses the printing of an opening quote mark |
| open-quote | Inserts an appropriate opening quote mark |
| url(address) | Inserts the contents of the specified URL |
The content property allows for multiple values, separated by spaces. Here is an example of a complex content rule:
.note:before { content: url('note.gif') "Note "
counter(notes) ": (" attr(title) ")"; }
The content inserted consists of an image, quoted text, a counter reference, another bit of quoted text, an attribute value, and a final snippet of quoted text.
The specified content is added at the designated insertion point and becomes a virtual child element. Although the generated content inherits all appropriate properties from the element into which it was inserted, it can also be styled separately, as well.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex02 Listing 23.2] and is a brief (and deliberately incomplete) list of books by J.R.R. Tolkien, which will be used to demonstrate how content generation can be used.
Listing 23.2. A Simple HTML File Listing Some Works of Tolkien
<!-- generated-23.2.html --><br /><html><br /><head><br /><title>Author Data: J.R.R. Tolkien</title><br /><style type="text/css"><br />/* Insert style rules here */<br /></style><br /></head><br /><body><br /><h3>J.R.R. Tolkien</h3><br /><ul id="works"><br /><li class="book">The Hobbit</div><br /><li class="series" ><br /><ul title="Lord of the Rings"><br /><li class="book">The Fellowship of the Ring</li><br /><li class="book">The Two Towers</li><br /><li class="book">Return of the King</li><br /></ul><br /></li><br /><li class="book">The Silmarillion</li><br /></ul><br /></body><br /></html><br /> |
- tags. There is no styling information provided, so the list appears plain and straightforward, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23fig02 Figure 23.2]. Note that the series title Lord of the Rings isn't shown because it is an attribute value and not text content.
File:23fig02.jpg
Adding Text and Images
You can insert text into a page by giving a quoted text value to the content property. The quotes around the value can be either double quotes (") or single quotes ('); they have to match. You can use double quotes to surround single quotes (or apostrophes), or single quotes to surround double quotes. For example:
h1:before { content: "Kynn's Headline: "; }
h2:before, h2:after { content: '"'; }
You can also insert text by using an attribute's value via the attr() function, which inserts the value of a specific attribute on the element. Here is an example combining quoted text with an attribute value to make the alternative text of an image visible, which is useful for testing your web pages:
img:after { content: " [ALT: " attr(alt) "]"; }
If you want to insert an image before or after an element, you give a url() value. This is similar to providing a bullet image with the list-style-image property, although it can be done with any element.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex03 Listing 23.3] is a style sheet that adds explanatory text, as well as a small graphic, to the HTML file's presentation. The most important rules here are the content rules, listed first after each selector.
Listing 23.3. Style Sheet Generating Text for Book List
/* generated-23.3.css */<br /><br />body { font-family: Verdana, sans-serif; }<br />h3:before<br />{ content: "BookBase: ";<br />font-size: small;<br />font-family: cursive, sans-serif;<br />color: white; background-color: black; }<br />h3:after<br />{ content: " (author index)";<br />font-weight: normal; font-size: small; }<br />.series ul:before<br />{ content: "Series: " attr(title)<br />" " url('series_l.gif');<br />font-weight: bold; }<br />.book:after<br />{ content: " " url('book_l.gif'); }<br />.series .book:after<br />{ content: " "url('bookinseries_l.gif'); }<br />li { list-style-type: square; }<br />li.series { list-style-type: none; }<br />.series ul li:first-child { margin-top: 0.5em; }<br />.series ul { margin-bottom: 0.5em; }<br />.series li { margin-left: 1em; }<br /> |
Not all browsers support generated content, but Firefox, Opera, and Safari do. The results of applying the style sheet to the Tolkien listing are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23fig03 Figure 23.3]. You'll notice that separate books are followed by one icon, the name of a series with another icon, and books within a series by a third icon. The word series has also been added to further identify books within a particular series.
Generating Quotation Marks
You can use CSS to add quotation marks to your web page. This is most useful when you're dealing with multiple languages on the same site, where different languages have different quotation symbols. It's also applicable if you use the HTML element to mark up your quotations.
To add quotations, first you must define which quotation marks should be used by using the quotes property. The values for quotes are pairs of symbols enclosed in double quotes themselves (or single quotes if they contain double-quote characters). The first pair is considered the outer pair of quotation symbols; inner quotes use the next pair in, and so on. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex04 Listing 23.4] gives an example, using doubled left-ticks and right-ticks for some quotes and square brackets for others. Your values for quotes don't have to be actual quotation marks; you can use any symbols or text.
Listing 23.4. Style Sheet That Adds Quotes to the Book List
/* generated-23.4.css */<br /><br />/* Set values for quotes */<br />ul { quotes: "[" "]"; }<br />ul li { quotes: "`" "'"; }<br />.series ul:before<br />{ content: "Series: " open-quote attr(title)<br />close-quote " " url('series_l.gif');<br />font-weight: bold; }<br />.book:before<br />{ content: open-quote; }<br />.book:after<br />{ content: close-quote " " url('book_l.gif'); }<br />.series .book:after<br />{ content: close-quote " " url('bookinseries_l.gif'); }<br /> |
As shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex04 Listing 23.4], the open-quote or close-quote values for content designate the types of the quote marks to be generated. You can see the effect of these rules in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23fig04 Figure 23.4], which applies the updated style sheet to the HTML file from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex02 Listing 23.2].
File:23fig04.jpg
Counters and Numbering
Generated content can also consist of counter values. A CSS counter is like a very simple variable from a programming language. Each counter is identified by a name and holds a numeric integer value, such as 1, 2, 335, or -5. The counter can be set to a specific value, increased or decreased by a certain amount, or displayed as part of a content rule.
You set a counter to a specific value by using the counter-reset property; whenever a CSS rule containing counter-reset is applied to a selector, the counter is reset to the specified value, or to zero if no value is given. The name of the counter must be specified in the counter-reset declaration. The counter increases whenever a counter-increment property is applied that designates a counter of the same name. The general syntax for counter-reset and counter-increment looks like this:
selector { counter-reset: name amount name amount ... ; }
selector { counter-increment: name amount name amount ...; }
The amount can be omitted; for counter-reset this resets the counter to zero, and for counter-increment this increases the counter by one. You can reset or increment multiple counters by giving name-amount pairs (or just multiple counter names if you want to use the default amount values).
To display the counter value, use the function counter() or counters() within a content declaration. Each counter has a scope over which the counter applies, which consists of the element in which it was declared and its children; you can have multiple counters with the same name. The value of the current counter with a given name is specified by counter(name); the values of all counters with that name within the scope are given by counters(name, delimiter). The delimiter option specifies a string to be displayed between values. This lets you create nested lists with proper numbering.
An additional option can be supplied to the counter() and counters() functions, which selects a list style to be applied to the display of the counter. This can be any list-style-type value as covered in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12], "Styling Links."
An example of counters in a style sheet can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex05 Listing 23.5]. This example counts books within a series and the total numbers of books from the HTML Tolkien book list.
Listing 23.5. Style Sheet for Adding Counters to the Book List
/* generated-23.5.css */<br /><br />#works { counter-reset: Total; }<br />.series { counter-reset: BooksInSeries; }<br />.book { counter-increment: BooksInSeries Total; }<br />.series:after { content: "Books in Series: "<br />counter(BooksInSeries, decimal);<br />margin-left: 2em;<br />text-decoration: overline;<br />display: block; }<br />#works:after { content: "Total books in index: "<br />counter(Total);<br />margin-top: 1em; display: block;<br />font-weight: bold; }<br /> |
Some browsers do not support counters; Opera and Firefox display counters, whereas Safari and Internet Explorer (as of version 6.0) do not. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23fig05 Figure 23.5] shows how Firefox displays the HTML file from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex02 Listing 23.2] with the styles from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex05 Listing 23.5] sheet applied.
File:23fig05.jpg
Generating Text Shadows
The original CSS Level 2 specification included a property, text-shadow, that allowed drop shadows to be generated around text, giving a three-dimensional look. Only one browser, Safari, supports text-shadow, and so the property was removed in CSS 2.1.
However, you can use generated content to create your own text shadows around certain text elements. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23ex06 Listing 23.6] has the code that creates text shadows; the explanation follows after.
Listing 23.6. Adding Shadows to Text
<!-- text-shadow-23.6.html --><br /><html><br /><head><br /><title>Text Shadows</title><br /><style type="text/css"><br />body {font-family: Verdana, sans-serif; }<br /><br />.shadow:before { color: gray; }<br /><br />.shadow[title] {<br />line-height: 2em;<br />margin: 0; }<br /><br />.shadow[title]:before {<br />display: block;<br />margin: 0 0 -2.10em 0.20em;<br />content: attr(title); }<br /><br />h1.shadow { color: white; }<br />h1.shadow:before { color: black; }<br /></style><br /></head><br /><body style="text-align: center;" ><br /><h1 class="shadow" title="Announcing..."><br />Announcing...</h1><br /><h2 class="shadow"<br />title="Teach Yourself CSS in 24 Hours!"><br />Teach Yourself CSS in 24 Hours!</h2><br /><p>Want to learn Cascading Style Sheets the easy way?<br />Read this book! It's fun! Give it a try!</p><br /><p class="shadow" title="Tell all your friends!"><br />Tell all your friends!</p><br /></body><br /></html><br /> |
So what's going on here? Look carefully at the HTMLeach element that is to receive a text shadow has a class of shadow, as well as a title attribute that repeats the text of that element. This is then used in the content rule for the .shadow[title]:before selector in an attr() rule. That produces a copy of the text to be shadowed. Thanks to the .shadow:before rule, the color of this text will be gray.
Because the .shadow[title]:before rule sets the display to block, we end up with a repeat of the text on two linesone line in black (default) text, one in gray text. The margin rule of the .shadow[title]:before selector moves the gray text behind the black text, and the line-height rule on the .shadow[title] text is there to ensure there's enough room to do that.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23fig06 Figure 23.6] shows exactly how these rules come together and display a text shadow in a browser.
File:23fig06.jpg
text shadows, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23fig06 Figure 23.6]. This method for text shadows works well as long as your text is all on one line. If it wraps around, everything is thrown off. You can insert a white-space: nowrap rule to prevent text wrapping. If this method of creating text shadows seems arcane, don't feel too badit is quite complicated, and is an example of the type of hoops that web designers are often willing to jump through to gain a specific effect. You'll learn more about the types of accommodations necessary for browser quirks and bugs in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch24.html#ch24 Hour 24], "Troubleshooting and Browser Hacks." ./ ADD NAME=CH23LEV1SEC3.HTML Summary Cascading Style Sheets enable your web designs to incorporate elements of the user interface into the presentation. Through CSS, you can change the cursor with the cursor property or draw highlights around certain items with the outline properties. Colors and fonts can be tuned to fit the operating system or the user's browser preferences if you employ special keywords for the color, background-color, border, and font properties. Additional information can be added to the HTML by style sheets using content generation. Quoted text, attribute values, images, quotation marks, and counters can be included via the content property. The quotes property specifies the styles of quotes to be used, and the counter-reset and counter-increment properties manage the values of the counters. As with many advanced CSS features, content generation may be supported sporadically by the browsers. If the primary content of the site is supported or explained only by generated content, users without access to the style sheet are left out, so care should be taken whenever using these techniques. ./ ADD NAME=CH23LEV1SEC4.HTML Workshop The workshop contains a Q&A section, quiz questions, and exercises to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions. Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa1q1a1 Q.] | Can I use content generation to insert HTML tags before and after an element? That would be really cool. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa1q1 A.] | It would indeed be cool, but the answer is no, you can't. Quoted text is inserted directly as text, not as markup, which means that if you wrap HTML tags around something, they won't be interpreted by the browser. Instead you'll just see those tags, in angle brackets, when viewing the page. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa1q2a2 Q.] | Generating content doesn't sound reliable. It would be easier to just add the content to the HTML, and that works in Internet Explorer and every other browser! Why would I ever use generated content? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa1q2 A.] | Content generation is useful and powerful, but as you say, it can be unreliable. In general, you're right; if you need to include some text in your output, you should put it in the HTML. There are a few cases where generated content is particularly useful, though, including sites where you may not have access to the content but can style it; alternate style sheets for specific presentations, such as a screen reader style sheet for visually impaired users; and XML files that don't inherently contain explanatory text. For more on XML and generated markup, see Bonus Web [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], "CSS and XML" (available on this book's website). |
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa2q1a1 1.] | Which of these options is not a valid declaration for the cursor property?
#
cursor: hourglass;
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa2q2a2 2.] | Your HTML contains <a> links of the class button3d that you want to style to look like three-dimensional buttons. How do you make members of this class appear as such, using the system color and font properties? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa2q3a3 3.] | What does each of the following content rules accomplish?
#
a[href]:after { content: "[LINK: " attr(href) "]"; }
|
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa2q1 1.] | (a). hourglass is not a proper value for cursor; to display an hourglass or timer cursor, use the value wait. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa2q2 2.] | Here is one way to write the appropriate style rules:
a.button3d:link {<br />display: block;<br />font: menu; color: ButtonText;<br />background-color: ButtonFace;<br />border-width: medium; border-type: outset;<br />border-color: ButtonHighlight; }<br /> |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch23qa2q3 3.] | The rules generate the following types of content:
#
All links are followed by an indication of their link target. This is a very handy rule if you are printing out documents.
|
Exercises
Here are some projects that will help you get practice using the properties from this hour:
- Using the :active pseudo-class, extend the style rules from Quiz question 2 to create three-dimensional buttons that appear to depress when clicked.
- Use content generation to add notes to a web page explaining the function of each element. Style these notes in a different color or with a border around them.