CSS Disabling

Disabling style sheets does not work in iCab, Escape and Ice Browser, so in these browsers you'll see an ugly mixture of the two style sheets.

Disabling works in Netscape 4 and Omniweb but you cannot dynamically change the enabling/disabling.

On this page I treat the possibility of disabling style sheets in the various browsers. You could use this to let your users choose which style sheet they like best. Link to them both and disable the one the user doesn't want.

Brace yourself for some browser bugginess, this script has to steer through a veritable field of browser strangeness to get the desired result.

Example

I want the users to first see the page with the 'recommended', newest style sheet. After that the user can choose between the new style sheet, the old style sheet and no style sheets at all. Try it:

Use no style sheet
Use old style sheet
Use new style sheet

After the user has thus chosen his preferred style sheet, you could set this preference in a cookie so that it is available on his next visit.

HTML

I placed the following two LINK tags in the HTML of this page. The second one is the standard one that I use throughout this site, the first one links to the old style sheet I used until November 2000. As you see, I put DISABLED in the first one. This is supposed to mean that the style sheet is disabled.

<link rel="stylesheet" href="oldstyles.css" disabled id>
<link rel="stylesheet" href="../quirksmode.css">

Supposed to mean, I say, because as you'll understand the various browsers interpret this command differently.

First of all, you cannot disable style sheets in Explorer 3, Opera, Konqueror, iCab, Escape and Ice Browser. To get them as close to the default style sheet as possible I put the link to the default style sheet last in the page. This means that the default style sheet overrules all the previous ones and the final style should be close to the default. Unfortunately it's not enough in this example because the two style sheets are very different, so the page becomes pretty ugly. However, it's the best we can do.

Second, Netscape 4 is weirder than ever. I discovered that Netscape 4 does not understand DISABLED, but that it disables a style sheet if I put an ID in it, even if the ID is empty. Strange but true, and it doesn't hurt other browsers. So by adding the ID to the first LINK I disabled the style sheet for Netscape 4. It gets the default view, and there's nothing more we can do for it.

Third, Mozilla doesn't understand DISABLED either, but here we can disable a style sheet nonetheless by using JavaScript. To make Mozilla disable the first style sheet and thus get the default view, we do

if (document.getElementsByTagName)
	document.getElementsByTagName('link')[0].disabled = true;

as quickly as we can (ie. directly below the LINK tags). We take the array of LINK tags in the document (document.getElementsByTagName('link')), then take the first of those ([0]) and set its disabled property to true (.disabled = true;). This, too, doesn't hurt other browsers.

Only Explorer 4-6 recognize DISABLED and disable the non-default style sheet.

The script

This is the script:

if (document.getElementsByTagName)
	document.getElementsByTagName('link')[0].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;
	}
}

It is called like this:

<A HREF="javascript:changeCSS(0)">Use no style sheet</A><BR>
<A HREF="javascript:changeCSS(1)">Use old style sheet</A><BR>
<A HREF="javascript:changeCSS(2)">Use new style sheet</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).

Explanation

I already explained the first two lines of the script above.

The actual function is quite simple. First we hand it the number of the style sheet to be enabled, which is stored in nr:

function changeCSS(nr)
{

Then we get the array of LINK tags in the document, first for the Level 1 DOM, then for Explorer 4's document.all. We check if document.getElementsByTagName is supported because this is the method we need (and it doesn't work in Opera, so it would give error messages there).

	if (document.getElementsByTagName)
		x = document.getElementsByTagName('link');
	else if (document.all)
		x = document.all.tags('link');

If the browser supports neither, give an alert and end the function:

	else
	{
		alert('This script does not work in your browser');
		return;
	}

Then we subtract 1 from nr. This is because the first style sheet in the page, disabled by changeCSS(1) is in fact LINK[0].

	nr--;

Then we go through the array with the LINK tags:

	for (var i=0;i<x.length;i++)
	{

We check if the style sheet should be enabled. This is only the case if i (the current LINK tag) is equal to nr (the desired LINK tag). If that's so we should set it to false (disabled is NOT true, so it's enabled). That's why we say NOT (i == nr):

		dis = !(i == nr);

Finally, set the disabled property of the current LINK tag to the calculated value:

		x[i].disabled = dis;
	}
}

That's it. The users of your page can now use the style sheet they like best.