The CSS Corner: Alternate Style Sheets

As publishing and layout standards for web documents, HTML 4.01 and CSS 2.1 define relatively few user experience requirements for browsers. One of them, however, mandates the ability for end users to switch among a set of mutually exclusive document styles defined by the author.  This feature is known as alternate style sheets. Significantly, the end user must also be able to turn off all styling.

Unfortunately, Internet Explorer did not expose this feature in the user interface until IE8 Beta 2.

The Style Menu

If you navigate to the W3C’s alternate style sheets example page, your Page-Style menu will look like the following:

Image of the Page menu showing the Style Submenu. In the Style submenu are many different style choices as well as the choice of No style.

This new menu lets you turn off all CSS in the page through the No Style option, but you can also select any of the styles defined by the author of this page. 

Under The Hood

If we look at the page source, the content of the head element specifies the relationship between the style names in the menu and the URIs of the corresponding external style sheets:

         <link rel="alternate stylesheet" title="Gold (left, fixed) + navbar" href="../../threepart-left-f.css">
         <link rel="alternate stylesheet"title="Gold (right, fixed)" href="../../threepart-nobanner-f.css">
         <link rel="alternate stylesheet"title="Gold (left, fixed)" href="../../threepart-left-nobanner-f.css">

Note that a style name can map to as many style sheets as necessary. The browser will then present the specified style names to the user, allowing him to switch to his preferred style. Markup details for web authors are available in section 14.3.1 of HTML 4.01. The DOM reflects the current user selection through the disabled property of the styleSheet objects in document.styleSheets, while the isAlternate and isPrefAlternate properties reflect the author’s style definitions in the document head.

Supporting User Choice

In part due to IE’s historical lack of user interface for alternate stylesheets, this feature has seen very limited use on the web even as continued interest led to the design of many workarounds, both client-side and server-side. A few corporate sites use it e.g. Citibank Japan to select top-level menu fonts. The standard design itself remains incomplete: for instance, the state and persistence of the user’s style selection as he navigates around a web site is undefined.

While the ability to switch or turn off styling is a logical outcome of the separation of style and content, end-user style control has been in practice limited to those sufficiently CSS-savvy to edit their favorite browser’s user style sheet. With alternate style sheets now supported by all major browsers, web site designers can let users customize their web experience further.

Sylvain Galineau
Program Manager