The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

CSS - Switch Style Sheets Dynamically

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Style Sheet Switching ...

This is an advanced tutorial and working demonstration that shows how you can 'enable your users' by allowing them to switch stylesheets dynamically to suit their own preferences. This means that they could select a color scheme that best suits them or change styles in a variety of other ways that could display different ambiences on your website.

Noun: Ambience  A particular environment or surrounding influence -OR- The atmosphere of an environment.

Try switching stylesheets yourself by selecting the different radio buttons in the Switch Themes menu to the right. At the present time, the different stylesheets are very much 'under development' and none of the color schemes have been thought out or coordinated. However, they do give an indication of how the script works technically and as the system stands, it should it should work in all Microsoft browsers (v4 onwards) and all Firefox/Mozilla/Netscape browsers that use the Gecko engine. This accounts for about 97% of the current browser market. Incidentally, at the present time, Option 6 on the Switch Themes menu switches the colors stylesheet off altogether so you might get thrown bt the different appearance until you switch back to a previous theme. For the system to operate correctly you need to have scripting, cookies and styles enabled on your browser. The system uses HTML, CSS and JavaScript and there is no server-side programming involved.

The process of switching stylesheets on a website is called 'skinning' and the individual stylesheets are called skins or themes. The idea has been around for quite some time but it seems to have fallen out of fashion, mainly I believe, because it has never been properly implemented. I personally have never seen a Website where skinning works satisfactorily, let alone works as well as the system we have developed here and I would be very interested to learn of any Websites that use skinning successfully.

In spite of this lack of skinned Websites there are compelling reasons why Websites should offer different color schemes and this is to 'enable' the large number of potential users who are partially color blind and the even larger number of potential users who have a dyslexic learning style. Both these groups would benefit from special color schemes and it is worth noting that approximately 10% of males of Western European origin suffer from partial color blindness and approximately 15% of males of Western European origin have a dyslexic learning style. I will be writing a separate page on this subject as justification for our incorporating this system onto every page on the Web-Wise-Wizard site.

Noun: Dyslexia  A condition in which an individual with normal vision is unable to properly comprehend written words -OR- An impaired ability to read.

Web Page Setup ...

The first thing you have to do when implementing this style sheet switching routine is to setup your LINK Tags in a similar manner to the examples displayed below. Previously, we placed our LINK Tags at the very bottom of the HEAD section on our pages but this implementation requires that these LINK Tags are placed above the JavaScript section/s and immediately below the META Tags. This is because the LINK Tags need to be in place before the JavaScript section is loaded and executed for the first time. You can have other style sheets following on from these but their LINK Tags must not contain Title Attributes or they could be included in the switching process. We have included an example of such a LINK Tag at the bottom of this list.

<link rel="stylesheet" type="text/css" href="../css/color-theme-1.css" title="skin1">
<link rel="alternate stylesheet" type="text/css" href="../css/color-theme-2.css" title="skin2">
<link rel="alternate stylesheet" type="text/css" href="../css/color-theme-3.css" title="skin3">
<link rel="alternate stylesheet" type="text/css" href="../css/color-theme-4.css" title="skin4">
<link rel="alternate stylesheet" type="text/css" href="../css/color-theme-5.css" title="skin5">
<link rel="stylesheet" type="text/css" href="../css/other-styles.css">

In the context of this implementation of style switching, browsers can be divided into three categories. These are Microsoft browsers (v4 onwards), the Mozilla family including all equivalent Mozilla, Firefox and Netscape (v5 onwards) and finally, all other browsers which are classified as non-supporting (Netscape 4, Opera, Safari, etc.). In percentage terms, this means that this style switching system should operate in over 97% of browsers, always providing that the user has not switched off scripting, cookies or styles.

Microsoft Browsers

Microsoft browsers only use the first and last 'stylesheet' LINK Tags because in Microsoft browsers, the script uses JavaScript's 'document.styleSheets' to dynamically change the Href Attribute of the first LINK Tag. However, the three 'alternate stylesheet' Tags do serve a purpose in Microsoft browsers because they preload the alternate stylesheets which is very useful indeed. Preloading ensures slick transitions when stylesheets are switched.

It is worth noting that Microsoft browsers do support the CSS method outlined below for Mozilla Family Browsers but the operation is 'flaky' and the Internet Explorer v6 browser we used to test the switch stylesheet routines kept dropping stylesheets. Because of this we opted to use the method outlined on the MSDN Website for Microsoft browsers and this worked exactly as we wanted it to.

This Microsoft only script is based on a script from the MSDN Website ...

function switchStyleSheetMicrosoft(toNum) {

	if (document.styleSheets[0].href != null) {
		document.styleSheets[0].href = "../css/color-theme-" + toNum + ".css";
	}
}

Mozilla Family Browsers

Mozilla family browsers use all the LINK Tags that contain Title Attributes for style sheet switching. Again, the 'alternate stylesheet' LINK Tags preload the alternate stylesheets and JavaScript's 'document.getElementsByTagName' is then used to enable or disable the different stylesheets.

This script is based on using the W3C DOM and should work in all compliant browsers ...

function switchStyleSheetGecko(toNum) {

	var linkTag, linkTitle = "skin" + toNum;
	var linksArray = document.getElementsByTagName("link");

	for(var linkNum=0; linkNum<linksArray.length; linkNum++) {
		linkTag = linksArray[linkNum];
		if(linkTag.getAttribute("rel").match(/^sty|^alt/i)) {

			if (linkTag.getAttribute("title") == linkTitle) {
				linkTag.disabled = false;
			} else if (linkTag.getAttribute("title")) {
				linkTag.disabled = true;
			}

		}
	}
}

If you are not familiar with JavaScript regular expressions then study the comparison below ...

	--- This line uses regular expressions ---

if(linkTag.getAttribute("rel").match(/^sty|^alt/i)) {

	--- and does the same job as ---

if(linkTag.getAttribute("rel").indexOf("sty")==0 || linkTag.getAttribute("rel").indexOf("alt")==0) {

	--- I know which one I prefer ---

Non-Supporting Browsers

Non-supporting browsers that support CSS stylesheets will use the first and last Link Tags and will typically ignore the 'alternate stylesheet' tags so this method of switching stylesheets should not affect their operation at all. In the final production version we will be creating the 'Switch Colors Menu Box' displayed above using JavaScript and if the script is loaded into a non-supporting browser then the Menu Box will not be displayed. What the eye does not see the heart cannot grieve about. This also means that users who have disabled scripting in their browsers will not see the menu box displayed either.

 
  1. Red is stimulating and aggressive.
  2. Blue is peaceful and tranquil.
  3. Green is calm and refreshing.
  4. Yellow grabs peoples attention.
  5. Purple is wealthy and luxurious.
  6. Brown is solid and reliable.
  7. Orange is bright and optimistic.
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Switching CSS Style Sheets Users have different needs and this advanced tutorial and working demo shows how you can 'enable your users' by allowing them to select a color scheme or theme that best suits their own requirements.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Switching Style Sheets Links
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England