Jason G. Designs

WordPress Themes, Print-On-Demand Resources and more…

Use A List Apart’s stylesheet switcher? Need to work with IE conditional comments?

11
Sep
2010

Style Switcher collage

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, a JavaScript switcher was implemented as well. 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 style sheets, 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. I will give a rather simple example below, just to give you the gist of how this 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: , ,

14 Comments

  1. Patricia says:

    Hey I know this is off topic but I was wondering if
    you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

    Check out my blog – RYU Coupon Code (Patricia)

    1. Jason Gonzalez says:

      For WordPress.com, I found a Twitter plugin at this address: http://en.support.wordpress.com/twitter/. It might be what you are looking for. As for me, I don’t have a Twitter account (yet), but this seems to be a good option to quickly add this capability to your blog.

  2. Palma Posto says:

    I really like your blog and i really appreciate the excellent quality content you are posting here for free for your online readers. Can you tell us which blog platform you are using?

  3. What we need in CSS is proper semantics for layouts. I wouldn’t even expand the use of divs for this but rather create a new set of tags and linked CSS components to deal with layout that retain explicit standard behaviour that provides us the same stability of tables with the layout usefulness that we need.

  4. Linda Marin says:

    I’ve been creating CSS designs for about five years, and honestly, it’s not that hard. If you manage the procedure from the angle of doing it right the first time, are aware of a few of the biggest browser bugs, and fine-tune for smaller quirks, you will have a much easier time than with table layout.

  5. Cameron says:

    Awesome information! Now I dont have to blog about it xD

  6. 徵信社 says:

    I think AJAX is at its best for two main types of tasks ,Fetching data that needs to be regularly refreshed, without the need for manual reloads or meta refreshing and Submitting forms which don’t need to send you to a 8 new URL

  7. Interest says:

    I really like your website design, did you create this by yourself or find someone else to design it?

    1. jgpws says:

      I designed this website’s theme myself.

  8. I have got my own blog about the similar things. I found a lot of interesting information at your blog and I would like to use them. What do you say? I am inviting to my blog, perhaps you will find also something interesting on my blog.

  9. Free Ebooks says:

    Is your site a custom theme? If so, who’d you have make it for you?

    1. jgpws says:

      This is indeed a custom theme. I designed it myself specifically for the information on this site. More themes that will be available for download will be coming soon.

  10. My family and i were sent here simply because this weblog had been tweeted by a guy I had been following and am very I made it here.

  11. roclafamilia says:

    Helpful blog, bookmarked the website with hopes to read more!

Leave a Reply

Your email address will not be published. Required fields are marked *