Alternative stylesheets
source link: https://adactio.com/journal/19365
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Journal—Alternative stylesheets
Alternative stylesheets
August 16th, 2022
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.
10:36am
Tagged with alternative stylesheets switching rel alternate links html css frontend development styling browsers standards firefox chrome safari
Also on Medium
Have you published a response to this? Let me know the URL:
Responses
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.
Monday, August 16th, 2021 2:46pm
9 years ago I wrote August in America, day thirteen
San Diego, California.
Friday, August 16th, 2013 7:03am
11 years ago I wrote Re-tabulate
Combining responsive design with CSS table layout to rearrange the display of content and navigation.
Tuesday, August 16th, 2011 12:25pm
11 years ago I wrote Re-flex
Putting content first by combining responsive design with the CSS3 flexible box layout module.
Tuesday, August 16th, 2011 12:59am
15 years ago I wrote Wireframework
Frameworks have their place… but that place probably isn’t on the Web.
Thursday, August 16th, 2007 12:31am
16 years ago I wrote API changes
Heads up. Flickr and Del.icio.us have made some changes.
Wednesday, August 16th, 2006 5:44pm
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.
Tuesday, August 16th, 2005 10:20pm
17 years ago I wrote Blogging from Word
In April 2004, Tim Bray wrote:
Tuesday, August 16th, 2005 6:55pm
18 years ago I wrote A gaggle of geeks
This weekend, Brighton was the setting for Geekend 2: Electric Boogaloo.
Monday, August 16th, 2004 1:44pm
19 years ago I wrote Swimming
Swimming is just like riding a bike: life-threateningly dangerous but good exercise.
Saturday, August 16th, 2003 11:27pm
20 years ago I wrote Betrayal
Take a look at the photo in this PR story from the White House.
Friday, August 16th, 2002 12:26pm
More information
© 1998 - 2022 Jeremy Keith.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK