HTML Dog

Skip to navigation

Dr. Strangeswitcher or: How I Learned to Stop Scripting and Love CSS

Don't use JavaScript! Don't use PHP! You can make a style switcher purely with CSS!

"Well, I've been to one world fair, a picnic, and a rodeo, and that's the stupidest thing I ever read on a web site. You sure you got today's code?"

Style switching, whereby a user can switch to an alternative style sheet by selecting a link on a page to aid accessibility, or just to generally show off, is nothing new.

There are two common techniques that are used to achieve this - the first is to use a back-end scripting language, reloading a page with a different CSS file attached, for example, and the second is to use JavaScript to dynamically switch CSS styles.

Dr. Strangeswitcher is something a bit newer, much quicker, kinda interesting, a little dubious, and tad lazy. The approach is to stuff scripting and just use some simple CSS.

That's right. In theory, you can do it all with CSS. Whether you should or not is a different matter. And we'll see that in practice we might need a bit of scripting help after all, but it's still an interesting little twist.

Target Practice

The trick is all down to the use of the :target pseudo-class, which can be used to style targeted anchors.

Let's say we have some HTML thank looks like this:


<ul>
	<li><a href="#strangelove">Dr. Strangelove</a></li>
	<li><a href="#mandrake">Lionel Mandrake</a></li>
	<li><a href="#muffley">Merkin Muffley</a></li>
</ul>

<!-- a whole load of content -->

<h2 id=\"strangelove\">Dr. Strangelove</h2>
<!-- more content -->

<h2 id=\"mandrake\">Lionel Mandrake</h2>
<!-- even more content -->

<h2 id=\"muffley\">Merkin Muffley</h2>
<!-- yet more content -->

Now, when you select one of the links, the page will jump to the element with the corresponding id. Basic stuff.

Now try applying this CSS:


h2:target { background: orange }

In more modern browsers (as in those that aren't Internet Explorer), not only will the page jump to the required heading, that heading will also be highlighted by the CSS. Try it. It's funky.

One Big Page Anchor

Now what we're going to do to construct the style switcher is to actually make the whole page an anchor and then style it when it is targeted.

So we just need to apply an ID to the opening body tag...


<body id=\"strangelove_style\">
	<!-- all of your content -->
</body>

...and then somewhere inside the page you'll want the links to activate the style switcher:


<ul>
	<li><a href=\"#strangelove_style\">Switch to alternative style</a></li>
	<li><a href=\"#\">Switch to default style</a></li>
</ul>

Now all that's needed is to specify what the alternative styles do in your CSS:


#strangelove_style:target { font-size: 1.5em; }

#strangelove_style:target h2 { background: orange; }

So now, when the "Switch to alternative style" link is selected, the above styles will be applied to the page. And when the "Switch to default style" link is selected, these styles are switched back off. Magic.

Because the style name becomes part of the URL (cos it's bolted on with on o' them "#" jobbos) , the preferred style can be e-mailed, instant messaged or bookmarked without need for cookies. And you could apply more than one alternative by wrapping the contents of your body in div elements with different id's.

It's quite a simple concept, really. It's a cleverly effective one though.

Start Scripting Again...

The most obvious downside to this is that it doesn't work in Internet Explorer, which is fair enough really, considering the :target pseudo class is part of CSS 3. This needn't make it completely impractical though. You can still "patch" this inability with JavaScript, using Suckerfish :target, for example, which obviously does then rely on scripting, but only 21 lines of it.

In fact, you could extend the functionality as far as you want, with cookies, bells and whistles, if you so desire, with as much JavaScript as you like. Personally, I'm a fan of skinny code.

Disclaimer

In an attempt to head off some criticisms, it might be wise to make a few brief points:

Finally, the author would like to state that he's not a JavaScript hater and the title of this article is just a bit of fun.