Introducing UDASSS!

Okay. What’s that mean?

Unobtrusive Degradable Ajax Style Sheet Switcher!

Boy are you in for treat today ‘cause we’re gonna have a whole lotta Ajaxifida Unobtrucitosity CSS swappin’ Fun!

Okay are you really kidding? Nope. I’ve even impressed myself on this one. Unfortunately, I don’t have much time to tell you the ins and outs of what I actually did to get this to work. We’re talking JavaScript, CSS, PHP…Ajax. But don’t worry about that. I’ve always believed that a good A.P.I. is an invisible A.P.I… and this I felt I achieved. The only thing you need to know is how it works and what to do.

A Quick Introduction Anyway…

First of all, the idea is very simple. I wanted something just like what Paul Sowden put together in
Alternative Style: Working With Alternate Style Sheets from Alistapart Magazine EXCEPT a few minor (not-so-minor actually) differences which I’ve listed briefly below:

• Allow users to switch styles without JavaScript enabled (degradable)
• Preventing the F.O.U.C. before the window ‘load’ when getting preferred styles
• Keep the JavaScript entirely off our markup (no onclick’s or onload’s)
• Make it very very easy to implement (ok, Paul did that too)

What I did to achieve this was used server-side cookies instead of JavaScript cookies. Hence, PHP. However this isn’t a “PHP style switcher” – which is where Ajax comes in. For the extreme technical folks, no, there is no xml involved here, or even a callback response. I only say Ajax because everyone knows what ‘it’ means. With that said, it’s the Ajax that sets the cookies ‘on the fly’. Got it? Awesome!

What you need

Luckily, I’ve done the work for you. It’s all packaged up in a nice zip file (at the end…keep reading for now) – so from here on out,
just follow these instructions

As I’ve mentioned, one of the things we’ll be working with is PHP. So, first things first, open up a file called index and save it with a ‘.php’ extension.

Next, place the following text at the top of your document (even above your DOCTYPE)

<?php
 require_once('utils/style-switcher.php');
 // style sheet path[, media, title, bool(set as alternate)]
 $styleSheet = new AlternateStyles();
 $styleSheet->add('css/global.css','screen,projection'); // [Global Styles]
 $styleSheet->add('css/preferred.css','screen,projection','Wog Standard'); // [Preferred Styles]
 $styleSheet->add('css/alternate.css','screen,projection','Tiny Fonts',true); // [Alternate Styles]
 $styleSheet->add('css/alternate2.css','screen,projection','Big O Fonts',true); // // [Alternate Styles]
 $styleSheet->getPreferredStyles();
 ?>

The way this works is REALLY EASY. Pay attention closely.

Notice in the first line we’ve included our style-switcher.php file.

Next we instantiate a PHP class called AlternateStyles() which will allow us to configure our style sheets.
So for kicks, let’s just call our object $styleSheet

As part of the AlternateStyles object, there lies a public method called add. So naturally with our $styleSheet object, we can call it to (da – da-da-da!) Add Style Sheets!

How the add() method works

The add method takes in a possible four arguments, only one is required. However, you’ll want to add some… since the whole point is working with alternate style sheets.

$path can simply be a uri, absolute, or relative path to your style sheet. $media adds a media attribute to your style sheets. $title gives a name to your style sheets (via title attribute).$alternate (which shows boolean) simply tells us that these are the alternate style sheets.

add() Tips

For all global style sheets (meaning the ones that will always be seen and will not be swapped out), simply use the add method as shown next to // [Global Styles].

To add preferred styles, do the same, but add a ‘title’.

To add the alternate styles, do the same as what we’ve done to add preferred styles, but add the extra boolean and set it to true.

Note following when adding style sheets

• Multiple global style sheets are allowed
• You can only have one preferred style sheet (That’s a browser rule)
• Feel free to add as many alternate style sheets as you like

Moving on

Simply add the following snippet to the <head> of your web document:

<script type="text/javascript" src="js/prototype.js"></script>
 <script type="text/javascript" src="js/common.js"></script>
 <script type="text/javascript" src="js/alternateStyles.js"></script>
 <?php
 $styleSheet->drop();
 ?>

Nothing much to explain here. Just use your copy & paste powers.

How to Switch Styles

Whether you knew it or not, this baby already has the built in ‘ubobtrusive’ functionality that lets you switch styles by the drop of any link with a class name of ‘altCss‘. Just drop them where ever you like in your document as follows:

<a class="altCss" href="index.php?css=Bog_Standard">Bog Standard</a>
 <a class="altCss" href="index.php?css=Really_Small_Fonts">Small Fonts</a>
 <a class="altCss" href="index.php?css=Large_Fonts">Large Fonts</a>

Take special note where the file is linking to. Yep. Just linking right back to the page we’re on. The only extra parameters we pass in is a variable called ‘css’ – and within that we append the names of our style sheets.

Also take very special note on the names of the style sheets have an under_score to take place of any spaces we might have.

Go ahead… play around and change the style sheet on the example page. Try disabling JavaScript and refreshing your browser. Still works!

Cool eh?

Well, I put this together in one night so it’s still a work in progress and very beta. If you’d like to hear more about it and its future development, be sure stop on by my site where I’ll definitely be maintaining it.

Download the beta anyway

Well this wouldn’t be fun if there was nothing to download. So we’re hooking you up so you don’t go home (or logoff) unhappy

Download U.D.A.S.S.S | V0.8

Merry Christmas!

Thanks for listening and I hope U.D.A.S.S.S. has been well worth your time and will bring many years of Ajaxy Style Switchin’ Fun!

Many Blessings, Merry Christmas and have a great new year!