A better Javascript - CSS Style Sheet Switcher

I am [or was depending on when you see it] redesigning my website, and I wanted to stop using tables, as an old table happy coder, it was a tough decision to make, and tougher to implement as I had to come out of the table mode of thought. I found excellent references to how to go about doing this. But soon found that I also wanted to showcase my designs to my friends (who use IE6) to get their opinions before going ahead with a mass change of my website. I decided to implement a style switcher, and since I don't have PHP on my hosting (I am a cheap *** ** ** * ****[insert colorful descriptive] lets leave it at that), I went for the JavaScript TM option.

I found the one on ala to be good but it had its problems especially in the javascript, it did not work well when I did a major change or tried to add a text only CSS, it did tend to add the CSS to the default CSS.

The workaround for that was to enable the default CSS by JavaScript and disable the rest.

I found another similar script when I was searching for disabling CSS on quirksmode.org. At the time of writing this I have/had IE6 and Firefox on Windows XP SP2, IE6 defaults to disabling JavaScript by default. When it did that I saw that IE was merging all my CSS and coming up with a jumbled version. The tutorial on quirksmode.org depends on JavaScript to disable the non-default CSS files.

I did not like being dependent on JavaScript to render my page correctly, and I was not ready on giving up on switching styles using JavaScript.

With minor modifications to both tutorials and combining them I came up with a style switcher that I could be comfortable with. Sample page with style switcher implemented.

Create your style sheets. It does not matter if they are similar or not, preferably not. Put them into your head tag

For your alternate stylesheet:

<link rel="alternate stylesheet" href="css/plainTxt.css"
type="text/css" title="LargePlain" />

[Optional] second alternate stylesheet

<link rel="alternate stylesheet" href="css/d7_alt1.css"
type="text/css" media="screen" title="Alt1"/>

By setting the rel attribute to alternate stylesheet, Mozilla Firefox will take it as an alternate stylesheet and will let you choose it from the view menu, and IE6 currently ignores it.

Note: if you do not provide the title attribute when you specify alternate stylesheet then Firefox 1.0 PR will ignore them and will not consider them as stylesheets and will not apply them to your page, IE as always jumps to quirks mode.

For your default stylesheet:

<link rel="stylesheet" href="css/design7.css"
type="text/css" media="screen"/>

This combination helps us in switching the stylesheets via JavaScript while allowing both browsers to render my default stylesheet without the need of JavaScript correctly.

Now that we have created and linked our stylesheet to our page, we can go ahead and create the script to change them. The script was copied in its entirety from quirksmode.org as mentioned above. If possible place the script immediately below the CSS links, cause the first step we do is to disable the non default stylesheets [as a precaution]. It is done by the first ‘if’ statement.

A » indicates that the same statement has been wrapped to a new line for display

if (document.getElementsByTagName){
  document.getElementsByTagName »
     ('link')[0].disabled = true;
  //[Optional]
  document.getElementsByTagName »
     ('link')[1].disabled = true;
}

function changeCSS(nr)
{
  if (document.getElementsByTagName)
     x = document.getElementsByTagName('link');
  else if (document.all)
     x = document.all.tags('link');
  else
  {
     alert('This script does not »
	   work in your browser');
     return;
  }
  nr--;
  for (var i=0;i<x.length;i++)
  {
     dis = !(i == nr);
     x[i].disabled = dis;
  }
}

And called

<a href="javascript:changeCSS(0)">Use no style sheet</A>
<a href="javascript:changeCSS(1)">text version large fonts</a>
[Optional]<a href="javascript:changeCSS(2)">Use new stylesheet</a>
<a href="javascript:changeCSS(3)">default stylesheet</a>

The number handed to changeCSS() reflects the position of the LINK tag: the first LINK tag is enabled by changeCSS(1), the second one by changeCSS(2) etc. When you want to disable all style sheets, use changeCSS(0).

nr--;

Is done because, JavaScript as a language uses Zero based array index, that is to say our first stylesheet is actually referred to as link[0] and not as link[1]. So that way we can go through the links in the for loop with a zero based counter.

dis = !(i == nr);

Is just a clever way of saying if the counter i not equal to nr then set dis to true else set it to false. We check if the style sheet should be enabled. This is only the case if i is equal to nr. If that's so we should set it to false and disable it

x[i].disabled = dis;

Now we have a complete style switcher, which works in both IE6 and Firefox 1.0 with no side effects when JavaScript is disabled.