Guys,

 

Need some help with an Accessibility Web site I’m developing. I’m struggling to find out how I can create a button that allows the user to disable the CSS style sheet, surely this is possible?

 

I know that most browsers allow the user to disable it but I would actually like to place a button on my page that gives them the option.

 

Thanks,

 

Ashley

You could use javascript "alternative stylesheet" code which would normally apply an alternative from a link, but just have a dead link for the alternative.

 

See http://www.wickham43.net/javascript.php#alternatestylesheets

You see, that's what I initially thought because I already actually have a styleswitcher on the site. So I gave it a go and nothing actually happens, it just keeps the current stylesheet!

Sorry, I've just remembered that alternate stylesheets must be a complete replication of the "preferred" stylesheet, but edited. It's not like a conditional comment where you just include those that need changing. So you would have to have a real aternative stylesheet with all the standard styles, but edited ? to empty styles?

 

Edit: an alternate stylesheet doesn't have to be a complete replication if it's used with a "persistent" main stylesheet, you only need to include the few styles that differ, but it must be a complete stylesheet with edited styles if used to replace a "preferred" stylesheet.

Yeah that's what it looks like, but surely there is a easier way to simply disable the CSS...otherwise I guess that's how I will have to do it.

I'm struggling to see why you need a separate stylesheet... have you tried serving up an empty css file?

I've already tried linking to an empty css file. No change :\

 

However, I did try adding a property changing the background colour to my empty css file and it changed. So what it's doing is overwriting any properties declared by the original css file...so it's not completely disabling the other css file.

 

If that makes sense?

Yes, it's because of the difference between a "persistent" main stylesheet where an alternate stylesheet just changes a few things and "preferred" stylesheet where the alternate disables all the preferred stylesheet and has to have all the styles even though some will be the same.

 

Basically if your main stylesheet does not have title="..." it's persistent (this is the usual situation), if it has title="..." it becomes a preferred stylesheet.

 

http://www.alistapart.com/articles/alternate/

 

So if you make your main stylesheet "preferred" by adding title="main" and then two hyperlinks in the body, one to the preferred and one to the alternate stylesheet and leave the alternate stylesheet COMPLETELY EMPTY it will disable the whole "preferred" stylesheet because it disables the preferred stylesheet then tries to apply its own styles, which are none. Just tested.

 

This was my test:-

<link rel="stylesheet" href="tutorial.css" type="text/css" media="all"
title="main"/> <!--preferred stylesheet with a title-->
<link rel="alternate stylesheet" href="main2.css" title="main2" /> 
<script type="text/javascript" src="styleswitcher.js"></script>     

<p>Change stylesheet: <a href="#" 
onclick="setActiveStyleSheet('main'); return false;">Preferred styles</a> | <a 
href="#" onclick="setActiveStyleSheet('main2'); return false;">alternate styles</a> 

</p>

 

Having said all that, I think there should be another javascript solution but no one has mentioned one.

I have just recalled that alternate stylesheets must be a complete counter of the "preferred" stylesheet, but edited. It's not like a depending on comment where you just let in those that need altering.