Customizing styles: User-Controlled Style Sheets - Part II - Changing entire style sheets: the first basic approach
(Page 2 of 4 )
The final method for customizing Web page styles is to allow users to switch between alternative style sheets. While the previous analyzed methods rely on changing styles either for individual or multiple page elements, this approach points directly to replacing the entire style sheet.
Even this technique doesn't provide the same flexibility as that given in changing individual elements, but it's quite simple to implement, and is generally well supported by modern browsers, except for Netscape 4.
In order to properly illustrate this method, I'm going to define two different external style sheets. Let us suppose that I want to give users with impaired sight the possibility to choose between a "default" style sheet and an "accessible" style sheet, which defines larger fonts, high-contrast background colors, and more style properties, for greater accessibility. You get the idea. Indeed, this is something that is not present very often in many big websites.
To do so, I usually need to declare both style sheets in the <head> section of the Web document, in the following way:
<link rel="stylesheet" type="text/css" href="default.css" id="default" />
<link rel="stylesheet" type="text/css" href="accessible.css" id="accessible" />
An explanation is in order here. Defining two or more external style sheets implies a potential CSS conflict for the browser, which, showing a completely egotistical attitude, will always accept only one style sheet. This conflict situation is managed in different ways, according to the browser used. Internet Explorer will accept the first style sheet listed, while Netscape or Mozilla will solve this problem by accepting the last style sheet listed in the code. Also, in Netscape, it's possible to choose alternate style sheets using the "Use stylesheet" option from the View menu.
The point is the following: how do I solve this strong browser incompatibility? One handy technique to allow consistency across browsers consists of deactivating one of the style sheets, in our example it would be "accessible.css", to give the browser just a single sheet for parsing. Maybe it's not an elegant solution, but it works nicely. To do this, I need to include the following JavaScript code in the <head> section of the document:
var accessibleSheet=document.getElementById('accessible');
accessibleSheet.disabled=true;
Good! With this two-liner I've deactivated our "accessible" style sheet, only keeping "default.css" alive. What's more, the above statement might be reduced to just a single line:
document.getElementById('accessible').disabled=true;
However, I think that the previous set of statements is clearer and more intuitive. Anyway, whatever approach you decide to take, the browser is now dealing happily with just one style sheet. Now, if I want to implement an easy way to enable the "accesible" style sheet, all that I have to do is build a JavaScript function that disables "default.css" and enables "accessible.css" by using a regular link. This is getting really interesting! So, let's create the JavaScript "changeStyle()" function that performs the style sheet change:
changeStyle=function(){
var switcher=document.getElementById('switcher');
switcher.onclick=function(){
var defaultSheet=document.getElementById('default');
if(!defaultSheet){return;}
// disable default style sheet
defaultSheet.disabled=true;
var newSheet=document.getElementById('accessible');
if(!newSheet){return;}
// enable accessible style sheet
newSheet.disabled=false;
return false;
}
}
// excute function when page is loaded
window.onload=function(){
if(document.getElementById){
changeStyle();
}
}
The next step is to define the HTML markup in the following manner:
<h1>Page Name</h1>
<p><a href="#" title="Change Style" id="switcher">Change style</a></p>
<div class="content">
<p>Content for div1 goes here...Content for div1 goes here...Content for div1 goes here...</p>
</div>
<div class="content">
<p>Content for div2 goes here...Content for div2 goes here...Content for div2 goes here...</p>
</div>
<div class="content">
<p>Content for div3 goes here...Content for div3 goes here...Content for div3 goes here...</p>
</div>
Finally, the corresponding "default.css" external sheet may be basically defined as follows:
.content {
font: normal 12px "Arial", Helvetica, sans-serif;
color: #000;
background: #fff;
margin-bottom: 10px;
}
h1 {
font: bold 24px "Arial", Helvetica, sans-serif;
color: #000;
}
Its counterpart, "accessible.css", may be defined like this:
.content {
font: 300% "Arial", Helvetica, sans-serif;
color: #ff0;
background: #000;
margin-bottom: 10px;
}
h1 {
font: bold 24px "Arial", Helvetica, sans-serif;
color: #00f;
}
By this point, you may notice that if the user clicks on the switcher link above defined, it obeys, firing up the process that first disables "default.css" and second enables "accessible.css". The JavaScript function grabs the "default" style sheet using its ID attribute and deactivates it, assigning it a value of "true" for its disabled property:
var defaultSheet=document.getElementById('default');
if(!defaultSheet){return;}
// disable default style sheet
defaultSheet.disabled=true;
In a similar fashion, the "accessible" style sheet is activated, assigning a value of "false" for the disabled property. The process is shown in the code listed below:
var newSheet=document.getElementById('accessible');
if(!newSheet){return;}
// enable accessible style sheet
newSheet.disabled=false;
As you can see, the disabling-enabling sequence is fairly easy to understand. With a simple click, the user is changing entire style sheets. Not bad, eh? Finally, the whole function should be executed when the page is loaded:
window.onload=function(){
if(document.getElementById){
changeStyle();
}
}
So far, I've created a function that allows users to change style sheets in a very easy manner, resolving in a decent way the potential conflict that such a situation may present to several browsers. But, for the sake of clarity, the full code for this first style sheet change implementation should be properly listed. That's what I'm going to do it in the lines below. Keep reading!
Next: Listing full source code >>
More Style Sheets Articles
More By Alejandro Gervasio
