STYLE SHEETS

Customizing styles: User-Controlled Style Sheets – Part III

In this third part and final part of our article series about user-controlled style sheets, we will learn how to make switching between style sheets both reversible and persistent across all pages of your website for your visitors.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 11

April 20, 2005

TABLE OF CONTENTS:

<html>
<head>
<title>CHANGING STYLES BY STYLE SHEET EXPANDED</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="default.css" id="default" />
<link rel="alternate" type="text/css" href="accessible.css" id="accessible" />
<script language="javascript">
// disable default style sheet
var accessibleSheet=document.getElementById('accessible');
accessibleSheet.disabled=true;
changeStyle=function(){
     var switcher=document.getElementById('switcher');
     switcher.onclick=function(){
          // get style sheets
          var defaultSheet=document.getElementById('default');
          if(!defaultSheet){return;}
          var newSheet=document.getElementById('accessible');
          if(!newSheet){return;}
          // exchange style sheets
          if(newSheet.disabled){
                // disable previous active style sheet
                defaultSheet.disabled=true;
                newSheet.disabled=false;
          }
          else {
                // enable new style sheet
                newSheet.disabled=true;
                defaultSheet.disabled=false;
          }
          return false;
     }
}
// execute code when page is loaded
window.onload=function(){
     if(document.getElementById){
          changeStyle();
     }
}
</script>
</head>
<body>
<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>
</body>
</html>

And here are the style sheets, "default.css" and "accessible.css," including some CSS rules to be applied to the HTML elements. First, the rules for "default":

.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;
}

And second, the CSS rules for "accesible":

.content {
     font: 300% "Arial", Helvetica, sans-serif;
     color: #ff0;
     background: #000;
     margin-bottom: 10px;
}
h1 {
     font: bold 24px "Arial", Helvetica, sans-serif;
     color: #00f;
}

At this point, we can rest assured that we have a working script to easily swap style sheets, right? Well, not so fast. You may have noticed the significant limitation of this method. While we’ve provided it with nice reversing capabilities, the style change is still stateless. What if the user (hopefully) tries to visit another page of our site? Clearly, we run into serious difficulties.

Style changes must be persistent, allowing visitors to keep their preferred style during the session. We don’t want them to be upset by changing fonts and colors every time they take a look at a different document, right? So, to make style changes persistent, we’re going to set a cookie to indicate what style sheet the user has selected. Besides this, we’ll be giving to visitors the choice to select among several style sheets, not limited to only two. Isn’t it too much? I don’t think so. Let’s get ready to make the big change.

Next: Making the big change: multiple style sheets and persistence >>