Alternative stylesheets

While looking for information about uses of the title attribute, I learned about the concept of alternative style sheets. Basically, you can name an external stylesheet or a style block in the page with the title attribute and a user can choose that style instead of the default style.

My first test was with a style block on this OpenScholar site with title="Dark Mode". As the only style with a title, the styles were always applied, at least in Firefox (74.0 for Mac). Adding a another style block with a title was sufficient to make the "Dark Mode" styles not be applied, the second style block didn't even contain any styles. Visiting the page in most other browsers, (Mac Safari 13.0.5, iOS Safari 13.3.1, Mac Chrome 80, Windows Edge 80), the "Dark Mode" styles were also not applied. In Internet Explorer 11 (IE11), the "Dark Mode" style block was always applied, regardless of the order the titled style blocks were in.

To choose the named styles in Firefox go to the View menu, Page Styles, choose "Dark Mode." IE11 is the only other browser I've found that provides a user interface for selecting alternate stylesheets (there's an old extension for Chrome but it doesn't seem to work properly anymore). I found the title style block was always applied in IE11 so when is this interface used? IE11 only supports alternate stylesheets, not style blocks. I had to create (and host) two external stylesheets link to them, then the "Dark Mode" stylesheet could be selected from IE's View menu, Styles, Dark Mode (you need to enable menu bar in IE to access the View menu; this is also true of Firefox for Windows).

<link href="[path to default stylesheet]" rel="stylesheet" title="Default">
<link href="[path to Dark Mode stylesheet]" rel="alternate stylesheet" title="Dark Mode">

In addition to the lack of wide browser UI support for selecting alternative stylesheets another limit on the viability of the feature is the user's selection is not retained while browsing a site, even if the stylesheet options are consistent from page-to-page. Nevertheless, alternative stylesheets could be part of a robust way to implement per-user styling preferences; simply including alternate in a stylesheet link's rel attribute seems to reliably prevent it from being applied by default.

Firefox and Internet Explorer's Style menus both always provide a "No Styles" option, a handy built-in feature when evaluating a site's accessibility. "No Styles" removes all author styles (i.e. site styles) and uses browser defaults, I didn't test to see if user stylesheets are still applied.