Home arrow Style Sheets arrow Page 2 - Customizing styles: User-Controlled Style Sheets - Part II
STYLE SHEETS

Customizing styles: User-Controlled Style Sheets - Part II


In this second article of a three-part series, you will learn how to allow visitors to your website to view an entirely different, more visually accessible style sheet from the "default" one. Normally, providing more than one style sheet causes browser conflict issues -- but with a little bit of JavaScript, we will solve this problem.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
April 13, 2005
TABLE OF CONTENTS:
  1. · Customizing styles: User-Controlled Style Sheets - Part II
  2. · Changing entire style sheets: the first basic approach
  3. · Listing full source code
  4. · Summary and further reading

print this article
SEARCH DEVARTICLES

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!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials