CSS class chain in IE6 - Trying to find a jQuery solution?

Question

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

Right

Perhaps I ask for the impossible? I consider myself completely new to Javscript and jQuery, but as they say, I recently wrote quite complex code, so I definitely got there ... however, now I have a rather interesting problem in my current freelance contract.

The previous web coder adopted the Grid-960 approach to HTML and, as a result, used class chains to style many 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 css there will be different declarations for: (not the 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 make matters worse ... this is in CSS:

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

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

Not wanting to go to merrits not a chain of classes (I told them this, but it is no longer possible to change their approach ... 100 manual coded pages to 150 pages of a site, without CMS ... sigh) and without luxury be able to change the way you create of these blocks ... can anyone advise me on the complexity and advantages of any of my approaches suggested below or possible other options that could adequately solve this problem.

Potential Solution 1

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

• Reads the class of all divs in a specific section of the page and clicks on an array
• creates empty fields from the screen with only one of the classes applied at a time
• Reads applied CSS values ​​for each window.
• Reapplies these styles to a separate box, somehow taking into account the order in which they are called and rewriting conflicting instructions as necessary

Potential Solution 2

• read the class of all divs in a specific section of the page and click on the array
• Scan a document for style sheet references
• Ajax captures style sheets and moves around looking for matching names with names in an array of classes
• Apply styles if necessary

Potential Solution 3

• Create only an IE6 stylesheet containing the exact style that will be used as a unique name (that is: class = "blocks orange highlighting" becomes class = "blocks-orange-highlight ')
• Move the document to IE6 and convert all spaces into class declarations into hyphens and reapply classes based on the new style name

Summary:

Solution 1 allows the people of this company to apply any styles in the future, and the script will be customized as needed. However, it doesn’t allow you to add an added style, only an individual style ... it is also an intensive and time-consuming process, but it will also most likely be converted into a plugin that can be used all over the world

Solution 2 is a potential coding nightmare. But again will allow an infinite number of updates without breaking

Solution 3 will require the commanding officer to hard-code new styles every time they make changes, and if they don't, IE6 will break.

Ironically, the site, although it should comply with IE6 in a limited way, does not need to run javascript (they made a call ... with JS or left), so consider all jQuery and JS solutions for "play on."

Did I mention how much I hate IE6?

In any case ... any thoughts or comments would be appreciated.

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

Hi,

Mike.

edit: added tl; dr up.

Answer 1

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

Fixes a multiple class error and some other selector problems that may occur.

Answer 2

I believe that if you carefully look at how IE6 handles the class chain and if the order of the class names is consistent, you can avoid some IE6 problems with careful class coding.

First, consider the HTML example you presented:

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

IE6 will apply CSS in the order of class names, starting with "blocks" and continuing to "highlight".

Now look at your initial class group:

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

They will be applied without any problems, since each of them applies different properties. However, if you, say, apply a different background with “highlight”, you should see that it will override one set with “orange”.

Using the same logical approach, let's look at the last class that you defined:

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

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

However, if you use other selection methods, you can avoid restrictions by using nested identifiers / classes [# section.blocks] and / or object associations [form input.highlight]. This complicates the process that I know, but at some point we just need to stop trying to fully support outdated 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 the third is already under development. There must be some kind of interruption when the allowable loss of presentation is allowed.

Answer 3

OK ... as there is some confusion in what I ask:

I was invited to work on an almost completed project.

No templates.

There are over 100 pages, manual coding and an impending deadline. Here is some actual HTML / CSS code written by the last guy (not described above):

 <div class="block four-col-1 gold black-bg"> <h1>Self Managed Super</h1> <a class="highlight" href="#"><span class="left bottom"> <strong><span class="text-white">Bolster your<br /> portfolio</span><br /></strong> with unique<br /> investment<br /> options</span> <img src="/AU/individuals/_images/superannuation-2.png" alt="" /></a> </div> <div class="block four-col-1 grey-light black-bg"> <h1>Self Managed Super</h1> <a class="highlight" href="#"><span class="left bottom"> <strong><span class="text-white">Financial <br /> flexibility,</span></strong> <br /> into and <br /> throughout <br /> retirement </span> <img src="/AU/individuals/_images/superannuation-3.png" alt="" /></a> </div> 

and here are some of the relevant CSS:

 .block .highlight {display:block;position:relative;height:auto;min-height:110px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .block .highlight:hover {border:1px solid #ddd;} .block .bottom {position:absolute;font-size:11px;line-height:12px; bottom:10px;letter-spacing:-0.2px; } .block .left {float:left;font-size:11px;margin-left:8px;width:75%;} .block.black-bg p, .block.black-bg p * {color:#828282;} .block.black-bg p * span.text-white {color:#fff;} .block img {position:absolute;bottom:0;right:1px;z-index:0} .block .highlight img {position:absolute;bottom:0;right:0px;z-index:0} .highlight:hover {opacity: .75; filter: alpha(opacity=75); -ms-filter: "alpha(opacity=75)";-khtml-opacity: .75;-moz-opacity: .75; overflow:visible;} .content .block.black-light.highlight, .block.black-light .highlight, .block.black-light .block-inner {background:url(/AU/_images/system/block-black-light.gif) no-repeat top left;} .content .block.grey-light.highlight, .block.grey-light .highlight, .block.grey-light .block-inner {background:url(/AU/_images/system/block-grey-light.gif) no-repeat top left;} .content .block.orange.highlight, .block.orange .highlight, .block.orange .block-inner {background:url(/AU/_images/system/block-orange.gif) no-repeat top left;} .content .block.gold.highlight, .block.gold .highlight, .block.gold .block-inner {background:url(/AU/_images/system/block-gold.gif) no-repeat top left;} .content .block.blue-light.highlight, .block.blue-light .highlight, .block.blue-light .block-inner {background:url(/AU/_images/system/block-blue-light.gif) no-repeat top left;} .content .block.blue-dark.highlight, .block.blue-dark .highlight, .block.blue-dark .block-inner {background:url(/AU/_images/system/block-blue-dark.gif) no-repeat top left;} .content .block.black-light.black-bg.highlight, .block.black-light.black-bg .highlight, .block.black-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-black-light.gif) no-repeat top left;} .content .block.grey-light.black-bg.highlight, .block.grey-light.black-bg .highlight, .block.grey-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-grey-light.gif) no-repeat top left;} .content .block.orange.black-bg.highlight.block.orange.black-bg .highlight, .block.orange.black-bg .block-inner {background:url(/AU/_images/system/black-block-orange.gif) no-repeat top left;} .content .block.gold.black-bg.highlight, .block.gold.black-bg .highlight, .block.gold.black-bg .block-inner {background:url(/AU/_images/system/black-block-gold.gif) no-repeat top left;} .content .block.blue-light.black-bg.highlight, .block.blue-light.black-bg .highlight, .block.blue-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-blue-light.gif) no-repeat top left;} .content .block.blue-dark.black-bg.highlight, .block.blue-dark.black-bg .highlight, .block.blue-dark.black-bg .block-inner {background:url(/AU/_images/system/black-block-blue-dark.gif) no-repeat top left;} 

(The code, in fact, is exactly the same as he wrote, in all its unformatted, disgusting beauty.)

If you are worried about reading all of this (and most of you probably can't - hence my abbreviations above), you will see that while some classes are unique and not conflicting, some do. As a result, some of the blocks that are expected to be balck in EI6 are blue, and the fields in EI6 are often erroneous, and absolutely positioned images also break especially in combination with PNGFix IE so that they look transparent as expected.

In addition, due to the nature of the deadlines, suppose moving to each of the 100+ pages and editing HTML is no longer an option. This was my recommendation from the first day, and the client agreed that what they have is good and really less than ideal, they also work in a short time.

This leaves only two options for editing. Change the CSS so that it works in all browsers (as it is called on each page) or generates Javascript (again, this can be called on each page using include) to do something with HTML on every page of the site, or what something else complicated. Changing the code on the included pages is easy, there is no HTML change in each of the blocks in question.

I fully understand that everyone is still commenting, and thanks for these ... they were my initial decisions in both cases, and I would not be here if they were an option.

Thanks to everyone who read this, but I'm really trying to find some super complicated solution for the whole problem of non-chaining classes in IE6. potentially for wider use than this project. However, I only have 5 working days to find the answer before the end of my contract, so if we do not, we just hack into the IE6 stylesheet, which will make all the blocks in one way in this browser and leave it on that. I would rather find a one-stop solution, but ... meh. I hope that after 18 months the user base of IE6 will be so low that this is no longer a problem.

Thanks to everyone.

Greetings

Mike.

Answer 4

I think you might have missed my previous comment. I was not confused by your request, but tried to explain how you can get closer to the task if the coding of the site is consistent.

For a more detailed example, let's take a line from your last CSS example minus the actual style properties:

 .content .block.orange.highlight, .block.orange .highlight, .block.orange .block-inner { } 

Following Internet Explorer 6 behavior on chained CSS classes, this line of code will be visible to IE6 as:

 .content .highlight, .orange .highlight, .orange .block-inner { } 

Note that chain class names are ignored for all but the last name in the chain. Since you have already rejected JavaScript solutions that others have suggested, the only solution I can see is to develop your CSS class definitions with this IE6 restriction as you are code.

This does not make the task simple, since the whole reason for the chain of classes is to be able to apply a special conditional style without increasing the DOM nodes of the document. However, in order to continue to support advanced feature programming in IE6, without the help of some JavaScript solutions, you just have to work harder to find the old traditional methods for the same result. I know that this comment was probably a little late for your project, but I hope this helps in the planning process when working with IE6 style.