Notes on a stylesheet selection UI in Mozilla

A good system for selection of alternate and user stylesheets has not yet appeared in a web browser. The only browser that supports any part of such a system is Opera, and the features are very limited. Here I present a few ideas on what I think such a system would be.

Todd Fahrner has some notes on many other issues relating to the UI of a CSS-based browser.


Alternate and user stylesheets give control to the user and make web browsing a much more pleasant experience. A good interface would allow users to easily switch between user stylesheets and between author stylesheets, and to easily disable either. They also encourage web page authors to maintain accessibility.

Alternate stylesheets allow authors to present a web page in different ways using the same content. This can be used to present the same page in different layouts or for different audiences. The different sheets could be targeted towards different types of audiences (within a company, outside it) or just to people with different preferences.

User stylesheets are an important accessibility feature. They are already supported in a very simplistic way by MSIE (since version 4, or maybe earlier) and by Opera. However, the simple interfaces they provide make user stylesheets almost unusable because the state of the web today requires turning off user stylesheets for many poorly designed pages. Thus a more comprehensive interface is needed. Furthermore, a user may want to switch easily between his own stylesheets for reasons of taste or usability.

What features

Alternate stylesheet selection

A good alternate stylesheet user interface will allow users to switch between alternate stylesheets provided by the author. It will also allow the user to choose that none of the preferred or alternate stylesheets is applied (however, persistent stylesheets would still be applied - see later in this section). This latter choice is what I call "No Optional Styles" in the menus below. These features are already implemented internally in Mozilla; they only need to be exposed in the UI. Peter Linss wrote in an email message to me (quoted with permission):

I added some utility methods to nsIPresShell a while back to make
connecting this UI simple (this is what the extra cheesy viewer code
  NS_IMETHOD GetActiveAlternateStyleSheet(nsString& aSheetTitle) = 0;
  NS_IMETHOD SelectAlternateStyleSheet(const nsString& aSheetTitle) = 0;
  NS_IMETHOD ListAlternateStyleSheets(nsStringArray& aTitleList) = 0;

To access the title of the default sheet you use the Get/SetHeaderData api
on nsIDocument under the "Default-Style" header field. This is initialized
to the preferred sheet title, selecting a different alternate doesn't
effect it. You can also pass "" as the title to turn off all but persistent

Ian Hickson has written some notes that may be useful in using these functions. They may be especially relevant for internationalization issues.

No optional styles means that no author preferred or alternate stylesheets will be used, but persistent stylesheets will (see HTML 4.0 for explanation of these terms). It should thus be one of the mutually exclusive choices for preferred/alternate styles, which is what the choices in the first part of Page Styles are.

Disabling author CSS

If a page becomes unusable because of bad styles (possibly bad style that works in buggy browsers), the user should be able to turn off all author styles (including persistent linked stylesheets, style elements, and style attributes). This should be an option on the same menu as those listed above. See my examples below for how I would distinguish it from the above choices. I don't think this is implemented yet, but it could be very useful. (Note that user styles and UA styles would still apply.)

In contrast to No optional styles, the disable author styles menuitem used below will disable all author stylesheets (including STYLE elements and STYLE attributes).

Author stylesheet selection permanence (and memory)

Should there be some sort of a style memory that remembers the combination of remember until and the selection, and stores, say, the previous 200 (configurable) pages visited, and goes by the most recent thing that applies to a given page? If there is a memory, then "Remember until" and "Disable until" should become (as they did in some of the examples below) "Remember for" and "Disable for."

The different permanence options that I use below are the following:

Selected Style
Remember this choice of stylesheet (while / when) this is one of the choices the author gives.
This List of Styles (default)
Remember this choice of stylesheet (while / when) this list of stylesheets is the one the author gives.
This Page
Remember this choice of stylesheet (while / when) user is looking at this page.

User stylesheet selection and disabling

User stylesheets are an exciting feature of CSS. They allow the user to specify the default rendering of a document either at a level between the UA's defaults and the author, or at a level that overrides the author. They are almost a necessity for users with some disabilities who are prevented from using the web. They are also a neat feature for general (well, maybe geeky, but they're the types who design web pages) users.

Unfortunately, many pages around today are designed badly, and thus interact badly with user stylesheets. Therefore, a good UI for user stylesheets would allow the user to disable the user stylesheet when it conflicts with pages (using the same memory options I give above for selection of author stylesheets). It would also allow the user to switch between a group of user-configurable stylesheets so he could view the page in a different style depending on his mood.

The example

As an example, I will use my homepage. It has one persistent stylesheet, one preferred stylesheet, Forest, and four alternate stylesheets, Plain, Ultramarine, Steely, and Oldstyle.

Furthermore, for user stylesheets, I will assume that the eight W3C Core Styles are set up as user stylesheets. (They would need to be modified a bit, but that's besides the point for now.)

Probably the most logical place for such an interface is on the View menu. Images of these menus as top-level menus are available below.

If "Always Disable" is checked, "Disable Page Styles" should probably be grayed and checked.

Should the author styles menu disappear if there are no stylesheets (linked, STYLE elements, or STYLE attributes)? I'm not sure...

Valid HTML 4.0!

(Back to CSS, David Baron)

LDB,, 1999-05-18