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.
