Extra Credit | Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)

< Day Day Up >

For extra credit, let's dive a little deeper into the style sheet world to look closely at alternate style sheets (multiple styles for the same markup) and how we can give users more control over what styles they may select.

Alternate Styles

Previously in this chapter, we've talked about four different ways to apply CSS to a document, while showing the advantages of linking or importing our styles in an external style sheet. We can take this a step further and reference alternate style sheets where the user could potentially choose larger text sizes, various color themes, or even alternate layouts.

We can do this by referencing multiple style sheets with the <link> element (much like Method B from the first part of this chapter), but adding the value "alternate stylesheet" for the rel attribute.

For instance, if we wanted to give users the choice between two additional text sizes, we would link the main style sheet normally, and then the alternate style sheets would follow:

 <head>   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <title>Applying CSS</title>   <link rel="stylesheet" type="text/css" href="default.css" title="default"/>   <link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />   <link rel="alternate stylesheet" type="text/css" href="largertext.css" title="larger"/> </head>

You'll notice that, along with the "alternate stylesheet" value for the rel attribute on the last two <link> elements, we've added a title attribute to each, naming each style sheet so that they may be selected later.

The "default" style sheet will always be on and activated by the browser. large.css and larger.css will be downloaded, but not used unless activated by other means (which we'll talk about later). The presence of the "alternate stylesheet" value in the rel attribute is what prevents that style sheet from being "on" by default when the page loads.

If we wish to hide the alternate styles from older browsers, such as Netscape 4.x, we need not use the @import method. Netscape 4.x doesn't support the "alternate stylesheet" value for the rel attribute; therefore those styles will never be applied.

Three Font Sizes

Let's talk a little more about what would be contained in those alternate style sheets. If, for instance, we'd like to give the user the option of enlarging the font size on the page, we could specify a larger size in each of the alternate style sheets that, when activated, would override the rules found in default.css.

This would be especially handy if we chose to specify our font sizes in pixels—where some browsers don't allow the user to increase the font size. If we chose to set the base font size at a pixel amount that was hard to read for low-vision users, we can use alternate style sheets to give them larger options.

So, in default.css, we may have set a base font size for the site:

 body {   font-size: 12px;   }

And in large.css, we'd override that rule with a slightly larger font size:

 body {   font-size: 16px;   }

And similarly in larger.css, we'll boost it up another notch:

 body {   font-size: 20px;   }

When activated (and I promise we'll get to that in a minute), the large.css and larger.css style sheets will override the default rule, increasing the font size for the page.

Still Cascading

It's important to note that the cascade effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work.

Getting Alternate Styles to Work

Great. So we have these alternate style sheets sitting there, waiting to be used. How does the user activate them? Unfortunately, very few browsers have a built-in mechanism for choosing alternate style sheets; however, Mozilla is one that does.

If alternate style sheets are present, a small icon appears in the bottom-left corner of the browser window. Mozilla users can click this icon and choose to activate an alternate style from a menu (see Figure 10-3).

Figure 10-3: Mozilla's alternate style sheet selection menu

Hopefully more browser makers will implement similar mechanisms as time goes on, but until then, there is another way to toggle alternate style sheets on or off—even saving the user's choice, through the magic of cookies.

Paul Sowden has written an indispensable tutorial at A List Apart, titled "Alternative Style: Working With Alternate Style Sheets" (www.alistapart.com/articles/alternate/). In it, he explains a set of JavaScript functions that can be used to activate and deactivate alternate style sheets in modern browsers.

The toggling is handled by a hyperlink on the page, effectively switching between any one of the style sheets by its title attribute. The JavaScript remembers the user's last selection by storing a cookie so that the next time the user visits the page, the correct alternate styles will be activated in addition to any default style sheets.

As an example, at the time of this writing I offer three different color schemes on my personal website. Each scheme is activated by clicking the appropriate icon, which in turn refers to Paul Sowden's script. The first icon is the default, while the second and third activate two additional alternate style sheets for different color schemes. See Figure 10-4 for an illustration.

Figure 10-4: Alternate style sheet being activated by the clicking of an icon

Because the JavaScript used is client-side based, the switching happens instantly, without the need for refreshing the entire page. It's very fast.

The complete JavaScript code is available for download in Paul Sowden's article at A List Apart (www.alistapart.com/articles/alternate/).

More Than Just Font Sizing

In addition to the popular "text sizer," as it's sometimes referred to, there are endless possibilities as to the style switching that can be done. Some sites allow the user to choose from a rainbow variety of color themes, while others offer the choice between fonts, font sizes, or even different layouts of the page.

By experimenting with the cascade—overriding certain default rules and placing them in alternate style sheets—some really interesting and interactive things can start happening on your websites. All with a simple script and a few CSS rules. Low bandwidth, high impact.

Courtesy of DOM

We can thank another W3C standard for the ability to use scripting to access alternate style sheets. The DOM, or Document Object Model is, well . . . let's hear what the W3C has to say about it:

"The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web."

Sounds familiar, doesn't it? That is exactly what we're doing with the style sheet switcher script—dynamically accessing and updating the style of documents. We can do this if we follow W3C standards, allowing developers to author scripts that can access predictable elements in our markup. If we strive toward standards-based markup, we can ensure that more DOM-based scripts can be written in the future, enhancing the user's experience of the pages we build.

The style switcher scratches the surface of the possibilities for DOM-based scripting. But it's yet another example of the benefits gained when building a site with standards.

< Day Day Up >