Jason G. Designs

Introduction

While I was trying to implement a way to switch styles for a set of web pages on my local computer, I discovered A List Apart’s style sheet switcher tutorial in the article Alternative Style: Working With Alternate Style Sheets by Paul Sowden. In this article, he explains how to create alternative style sheets, which show up under a Style or Page Style menu in some browsers (this works in Firefox). Since Internet Explorer and Chrome do not support changing a page’s style sheet via a menu item, I came up with a JavaScript switcher for those browsers. Cool so far. A problem comes up if you need to have Internet Explorer (7) compliance via a conditional comment per style sheet.

A Solution

Internet Explorer usually requires one conditional comment to be placed at the top of each page, but each style sheet would have different style requirements, prompting the need to switch conditional comments on the fly. Or, I could just make sure every style had the same basic measurements, limiting creativity.

Since I am no JavaScript guru, I couldn’t figure this one out with my own skill level. After searching Google, I found DOM StyleSheet Object on javascriptkit.com. This nifty little script can be used to access each “external” style sheet through an array. From there, you can add style rules to certain style sheets based on their number in the array. External style sheets in this script are considered linked and embedded, but not inline. For safe measure, I put the javascript into a linked file within a conditional comment so they would not affect my main style sheet.

<!--[if IE 7]>
    <script language="JavaScript" type="text/javascript" src="scripts/DOMStyleSheetObject.js"></script>
<![endif]-->

Implementing DOM Stylesheet Object for our conditional comment

Unlike other hair pulling experiences I’ve had trying to implement JavaScripts on existing web pages, this one was relatively easy to implement. The first step is above, to link to an external script file. By the way, this section assumes you already have a style sheet switcher set up and have at least two different styles to switch. This also assumes that you can view your web page in at least Internet Explorer 7 or below. Here is a simple example below, just to give you the gist of how it works.

First, let’s assume you have three style sheets written as according to the A List Apart tutorial. Let’s say one of the style sheets is embedded. See below:

<link rel="stylesheet" type="text/css" href="styles/style.css">
<style type="text/css">
    some embedded style info...
</style>
<link rel="alternate stylesheet" type="text/css" href="styles/alternative1.css" title="Alternative Style Sheet 1">

*Notice how the default style sheet does not have a title and that the third style sheet listed has the rel name “alternate stylesheet” and title “Alternative Style Sheet 1”.

Anyway, getting back to the subject, DOM Stylesheet Object recognizes each link and style element in an array. For example, if we wanted to access the third style sheet, we would do that from our external JavaScript like this: document.styleSheets[2]. The first stylesheet is indexed by the number 0, with 1, 2, etc. representing the next style sheet in line.

Since this is placed in an IE only conditional comment, only IE can read these added style rules. In addition, DOM Stylesheet Object provides properties specifically for IE. I will give an example below of how to fix two common Internet Explorer issues with this script, overflow float dropping and padding outside the box model (please note, these are examples and not a comprehensive tutorial on IE fixes). Assume that there is an image wider than 720 pixels in the example below, pushing the content below the floated sidebar in IE.

Original CSS code in Alternative Style Sheet 1:

#contentwrapper {
margin-left: 200px;
width: 960px;
}

#sidebar {
float: left;
margin-left: -200px;
width: 160px;
padding: 0 20px 0 20px;
}

#content {
width: 720px;
padding: 20px;
}

Internet Explorer 7 fixes for Alternative Style Sheet 1 in DOM Stylesheet Object:

// [2] = Alternative Style Sheet 1
document.styleSheets[2].addRule("#sidebar", "width: 200px")
document.styleSheets[2].addRule("#sidebar", "overflow: hidden")
document.styleSheets[2].addRule("#content", "overflow: hidden")

Voila! These styles will only be seen by Internet Explorer because the JavaScript which switches them is placed in a conditional comment. And Internet Explorer will only read style rules from which style sheet is active, as denoted by it’s number in the JavaScript array. Try it out for yourself on your A List Apart based style switcher.

Tags for this post: Conditional Comments, CSS, Internet Explorer 7