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:
Reads the class of all divs in a certain section of the page and pushes
to an array
creates empty boxes off screen with only one of the classes applied at a time
Reads the applied
CSS values for each box
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
read the class of all divs in a certain section of the page and push
to an array
Scan the document for links
to style sheets
Ajax grab the stylesheets and traverse looking for matching names
to those in class array
Apply styles as needed
Potential Solution 3
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')
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.
