Alternative stylesheets

My website has different themes you can choose from. I don’t just mean a dark mode. These themes all look very different from one another.

I assume that 99.99% of people just see the default theme, but I keep the others around anyway. Offering different themes was originally intended as a way of showcasing the power of CSS, and specifically the separation of concerns between structure and presentation. I started doing this before the CSS Zen Garden was created. Dave really took it to the next level by showing how the same HTML document could be styled in an infinite number of ways.

Each theme has its own stylesheet. I’ve got a very simple little style switcher on every page of my site. Selecting a different theme triggers a page refresh with the new styles applied and sets a cookie to remember your preference.

I also list out the available stylesheets in the head of every page using link elements that have rel values of alternate and stylesheet together. Each link element also has a title attribute with the name of the theme. That’s the standard way to specify alternative stylesheets.

In Firefox you can switch between the specified stylesheets from the View menu by selecting Page Style (notice that there’s also a No style option—very handy for checking your document structure).

Other browsers like Chrome and Safari don’t do anything with the alternative stylesheets. But they don’t ignore them.

Every browser makes a network request for each alternative stylesheet. The request is non-blocking and seems to be low priority, which is good, but I’m somewhat perplexed by the network request being made at all.

I get why Firefox is requesting those stylesheets. It’s similar to requesting a print stylesheet. Even if the network were to drop, you still want those styles available to the user.

But I can’t think of any reason why Chrome or Safari would download the alternative stylesheets.

Have you published a response to this? :



Re, the reason why Chrome and Safari load alternative stylesheets is probably because they don’t support them, so the “alternate” keyword means nothing to them and the stylesheets are treated as regular stylesheets.

# Posted by Šime on Thursday, December 8th, 2022 at 11:14pm

1 Bookmark

# Bookmarked by Zachary Dunn on Thursday, August 18th, 2022 at 12:09am

Previously on this day

1 year ago I wrote Upgrade paths

If you’re going to deprecate a feature on the web, at least give us an alternative.

9 years ago I wrote August in America, day thirteen

San Diego, California.

11 years ago I wrote Re-tabulate

Combining responsive design with CSS table layout to rearrange the display of content and navigation.

11 years ago I wrote Re-flex

Putting content first by combining responsive design with the CSS3 flexible box layout module.

15 years ago I wrote Wireframework

Frameworks have their place… but that place probably isn’t on the Web.

16 years ago I wrote API changes

Heads up. Flickr and have made some changes.

17 years ago I wrote Joe Clark in the flesh

Ryan Carson, one of the minds behind BD4D, has started putting on some pretty darn excellent one-day workshops in London. He’s already had Eric Meyer over for CSS training. Next week, Cal Henderson will be talking about the building of Flickr.

17 years ago I wrote Blogging from Word

In April 2004, Tim Bray wrote:

18 years ago I wrote A gaggle of geeks

This weekend, Brighton was the setting for Geekend 2: Electric Boogaloo.

19 years ago I wrote Swimming

Swimming is just like riding a bike: life-threateningly dangerous but good exercise.

20 years ago I wrote Betrayal

Take a look at the photo in this PR story from the White House.