Firefox Tricks - Using alternate stylesheets

Posted Wednesday, May 20th, 2020 

web development

There are many underutilized features in browsers these days but there is one that had been present in Firefox for a long time and is apparently completely unknown to most web developers, they are called page styles and they expose alternative style sheets to the user.

A GIF is worth a thousand words, so let me show it to you first, and then explain how that actually works.

The entries exposed in that View → Page Style menu are coming from the HTML. They are stylesheets that are declared as alternate and given a title.

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" title="sakura css" href="sakura.css">
<link rel="alternate stylesheet" title="sakura css - dark" href="sakura-dark.css">
<link rel="alternate stylesheet" title="sakura css - earthly" href="sakura-earthly.css">
<link rel="alternate stylesheet" title="sakura css - vader" href="sakura-vader.css">
<link rel="alternate stylesheet" title="water.css - dark" href="water.css">

The rules for alternative style sheets are simple:

• If it is not marked as alternate and has no title, then it is always applied.
• If it has a title but it is not marked as alternate, it is the default stylesheet.
• If it has a title and is marked as alternate, then it is available in that menu.

Using the HTML snippet above, the page style menu becomes:

Want to play with it? There is a Live Demo which you can try on Firefox.

When to use this?

This has been present in Firefox since version 3 (the current version I’m running is 78). It also works on Opera but it needs a WebExtension for Chrome. I think that the best use for this is during development — such as when you’re trying to compare two different CSS or themes with your team. You can simply ship both in a dev branch and let the team check them out without requiring any JS or CSS switching on the your webapp code.

Brainstorming: I think it might be the case of offering alternate CSS for your users as a gift or bonus. Use it for easter eggs!

It is not supported across browsers, so you can’t rely on it. It is not a crucial feature that you must use for everyone, but you can make some of your users quite happy with it.