Chaining CSS classes in IE6 - Trying to find a jQuery solution?

Question

tl;dr = "Anyone know how to apply chained classes for IE6 using jQuery or similar?"

Right,

perhaps I ask the impossible? I consider myself fairly new to Javscript and jQuery, but that being said, I have written some fairly complex code recently so I am definitely getting there... however I am now possed with a rather interesting issue at my current freelance contract.

The previous web coder has taken a Grid-960 approach to the HTML and as a result has used chained classes to style many of the elements. The example below is typical of what can be found in the code:

<div class='blocks four-col-1 orange highlight'>Some content</div>

And in the css there will be different declarations for: (not actual css... but close enough)

.blocks {margin-right:10px;}
.orange {background-image:url(someimage.jpg);}
.highlight {font-weight:bold;}
.four-col-1 {width:300px;}

and to make matters worse... this is in the CSS:

.blocks.orange.highlight {background-colour:#dd00ff;}

Anyone not familiar with this particular bug can read more on it here: http://www.ryanbrill.com/archives/multiple-classes-in-ie/ it is very real and very annoying.

Without wanting to go into the merrits of not chaining classes (I told them this, but it is no longer feasible to change their approach... 100 hand coded pages into a 150 page website, no CMS... sigh) and without the luxury of being able to change the way these blocks are styled... can anyone advise me on the complexity and benefits between any of my below proposed approaches or possible other options that would adequately solve this problem.

Potential Solution 1

Using conditional comments I am considering loading a jquery script only for IE6 that:

1. Reads the class of all divs in a certain section of the page and pushes to an array
2. creates empty boxes off screen with only one of the classes applied at a time
3. Reads the applied CSS values for each box
4. Re-applies these styles to the individual box, somehow bearing in mind the order in which they are called and overwriting conflicting instructions as required

Potential Solution 2

1. read the class of all divs in a certain section of the page and push to an array
2. Scan the document for links to style sheets
3. Ajax grab the stylesheets and traverse looking for matching names to those in class array
4. Apply styles as needed

Potential Solution 3

1. Create an IE6 only stylesheet containing the exact style to be applied as a unique name (ie: class='blocks orange highlight' becomes class='blocks-orange-highlight')
2. Traverse the document in IE6 and convert all spaces in class declarations to hyphens and reapply classes based on new style name

Summary:

Solution 1 allows the people at this company to apply any styles in the future and the script will adjust as needed. However it does not allow for the chained style to be added, only the individual style... it is also processor intensive and time consuming, but also the most likely to be converted into a plugin that could be used the world over

Solution 2 is a potential nightmare to code. But again will allow for an endless number of updates without breaking

Solution 3 will require someone at the companty to hardcode the new styles every time they make a change, and if they don't, IE6 will break.

Ironically the site, whilst needing to conform to IE6 in a limited manner, does not need to run wihtout javascript (they've made the call... have JS or go away), so consider all jQuery and JS solutions to be 'game on'.

Did I mention how much i hate IE6?

Anyway... any thoughts or comments would be appreciated.

I will continue to develop my own solution and if I discover one that can be turned into a jQuery plugin I will post it here in the comments.

Regards,

Mike.

edit: added tl;dr to the top.

Answer 1

Here's a combination solution: http://code.google.com/p/ie7-js/

Fixes the multiple class bug and some other selector issues you may encounter.

Answer 2

I believe that if you look closely at how IE6 handles class chaining, and if the order of the class names are consistent, then you can avoid some of the IE6 issues with careful class coding.

First have a look at your provided HTML example:

<div class='blocks four-col-1 orange highlight'>Some content</div>

IE6 will apply the CSS in the order of the class names, starting with 'blocks' and continue through to 'highlight'.

Now look at your initial group of classes:

.blocks {margin-right:10px;}
.orange {background-image:url(someimage.jpg);}
.highlight {font-weight:bold;}
.four-col-1 {width:300px;}

These would be applied without any problems as each applies different properties. However, if you should, say, apply a different background with 'highlight' you should see that it will override the one set with 'orange'.

Using this same logic approach, let's have a look at the last class you defined:

.blocks.orange.highlight {background-colour:#dd00ff;}

This class should only apply to objects that have all three class names applied. What happens in IE6 is the first two class names are ignored and only the last class name is used to apply the styling. This means that any object that has the class 'highlight' will receive the new background property. (PS: the CSS property should be background-color, no 'u')

However, if you use other selector methods you can possibly avoid the limitations by applying nested ids/classes [#section .blocks] and/or object associations [form input.highlight]. This complicates the process I know, but at some point we simply need to stop trying to fully support out dated software.

Note: IE6 has not received any updates for two years and the browser itself is nine years old. The browser has two successors and a third is already in development. There should be some cutoff where an acceptable loss of presentation is allowed.