Encadenando clases de CSS en IE6 - ¿Intentando encontrar una solución de jQuery?

Question

tl; dr = "¿Alguien sabe cómo aplicar clases encadenadas para IE6 usando jQuery o similar?"

Derecho,

quizás pregunto lo imposible? Me considero bastante nuevo en Javscript y jQuery, pero una vez dicho esto, he escrito un código bastante complejo recientemente, así que definitivamente estoy llegando allí ... sin embargo, ahora tengo un problema bastante interesante en mi contrato independiente actual.

El codificador web anterior ha adoptado un enfoque Grid-960 para el HTML y como resultado ha utilizado clases encadenadas para dar estilo a muchos de los elementos. El siguiente ejemplo es típico de lo que se puede encontrar en el código:

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

Y en el css habrá diferentes declaraciones para: (CSS no real ... pero lo suficientemente cerca)

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

y para empeorar las cosas ... esto es en el CSS:

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

Cualquiera que no esté familiarizado con este error en particular puede leer más sobre ella aquí: http://www.ryanbrill.com/archives/multiple-classes-in-ie/ es muy real y muy molesto.

Sin querer entrar en las diversiones de no encadenar clases (les dije esto, pero ya no es posible cambiar su enfoque ... 100 páginas codificadas a mano en un sitio web de 150 páginas, sin CMS ... suspiro) y sin el lujo de poder cambiar la forma en que se diseñan estos bloques ... ¿alguien me puede aconsejar sobre la complejidad y los beneficios entre cualquiera de mis enfoques propuestos a continuación o posibles otras opciones que resolverían adecuadamente este problema?

Potencial Solución 1

uso de comentarios condicionales que estoy considerando alguna secuencia de comandos de jQuery sólo para IE6 que:

1. Lee la clase de todos los divs en una determinada sección de la página y empuja a una matriz
2. crea cajas vacías fuera de la pantalla con sólo una de las clases aplicadas a la vez
3. lee los valores CSS aplicados por cada caja
4. vuelve a aplicar estos estilos a la caja individual, de alguna manera teniendo en cuenta el orden en que sean llamados y sobrescribir instrucciones contradictorias según sea necesario

Solución Potencial 2

1. leer la clase de todos los divs en una determinada sección de la página y pulsar en una matriz
2. Escanear el documento para ver los enlaces a las hojas de estilo
3. Ajax agarrar las hojas de estilo y atravesar buscando mat nombres Ching para los de la clase Array
4. aplicar estilos, según sea necesario

Solución Potencial 3

1. Crear una única hoja de estilo IE6 que contiene el estilo exacto para ser aplicado como un nombre único (es decir: class = 'blocks orange highlight' pasa a ser class = 'blocks-orange-highlight')
2. Recorre el documento en IE6 y convierte todos los espacios en declaraciones de clase a guiones y vuelve a aplicar clases según el nuevo nombre de estilo

Resumen:

Solución 1 permite a la gente en esta empresa que aplique todos los estilos en el futuro y el guión ajuste según sea necesario. Sin embargo, no permite que se agregue el estilo encadenado, solo el estilo individual ... también consume mucho tiempo y consume muchos procesadores, pero también es más probable que se convierta en un complemento que podría usarse en todo el mundo

La solución 2 es una pesadilla potencial para codificar. Pero nuevamente permitirá un sinfín de actualizaciones sin romperse

La solución 3 requerirá que alguien comparta los nuevos estilos cada vez que realicen un cambio, y si no lo hacen, IE6 se romperá.

Irónicamente, el sitio, aunque necesita ajustarse a IE6 de manera limitada, no necesita ejecutarse sin javascript (han hecho la llamada ... tienen JS o se van), así que considere todas las soluciones de JQuery y JS estar 'en juego'.

¿He mencionado lo mucho que odio IE6?

De todos modos ... cualquier pensamiento o comentario sería apreciado.

Seguiré desarrollando mi propia solución y si descubro una que se puede convertir en un complemento de jQuery, la publicaré aquí en los comentarios.

Saludos,

Mike.

editar: added tl; dr a la cima.

Answer 1

he aquí una solución combinación: http://code.google.com/p/ie7-js/

corrige el error de clases múltiples y algunas otras cuestiones selectores que pueden aparecer.

Answer 2

Creo que si observa detenidamente cómo IE6 maneja el encadenamiento de clases, y si el orden de los nombres de clase es coherente, entonces puede evitar algunos de los problemas de IE6 con una cuidadosa codificación de clase.

Primero echar un vistazo a tu ejemplo HTML proporcionado:

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

IE6 aplicará la CSS en el orden de los nombres de las clases, empezando por 'bloques' y continuar a través de 'destacado'.

Ahora mire su grupo inicial de clases:

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

Estos se pueden aplicar sin ningún problema, ya que cada aplica diversas propiedades. Sin embargo, si debería, por ejemplo, aplicar un fondo diferente con 'resaltar', debería ver que anulará el que se configuró con 'naranja'.

Utilizando este mismo enfoque de la lógica, vamos a echar un vistazo a la última clase que ha definido:

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

Esta clase sólo debe aplicarse a los objetos que tienen los tres nombres de las clases aplicadas. Lo que ocurre en IE6 es que los primeros dos nombres de clase se ignoran y solo el último nombre de clase se usa para aplicar el estilo. Esto significa que cualquier objeto que tenga la clase 'resaltada' recibirá la nueva propiedad de fondo. (PD: la propiedad CSS debe ser de fondo-color, no 'u')

Sin embargo, si usa otros métodos de selección, posiblemente puede evitar las limitaciones al aplicar identificadores/clases anidados [#section.blocks] y/o asociaciones de objetos [form input.highlight]. Esto complica el proceso que conozco, pero en algún momento simplemente tenemos que dejar de intentar dar soporte completo al software desactualizado.

Nota: IE6 no ha recibido ninguna actualización durante dos años y el navegador en sí tiene nueve años. El navegador tiene dos sucesores y un tercero ya está en desarrollo. Debería haber un límite cuando se permita una pérdida de presentación aceptable.

Answer 3

bien ... ya que hay cierta confusión acerca de lo que estoy preguntando:

Me han llamado para trabajar en un proyecto que está casi terminada.

No hay plantillas.

Hay más de 100 páginas, codificadas a mano y una fecha límite inminente.Aquí hay un código real del HTML/CSS todos escritos por el último tipo (no abreviado como la de arriba):

<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> 

y aquí es parte de la CSS relevante:

.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;} 

(Código es esencialmente exactamente como lo escribió, en toda su belleza sin formato, horrorosa.)

Si puede molestarse en leer todo eso (y la mayoría de ustedes probablemente no pueda, de ahí mis abreviaturas anteriores) verá que mientras algunas clases son únicos y no entran en conflicto, algunos lo hacen. El resultado es que algunos bloques que se espera que sean balck, en EI6 son azules, y los márgenes en EI6 a menudo son incorrectos, y las imágenes absolutamente posicionadas también se rompen particularmente cuando se combinan con un IE PNGFix para que aparezcan transparentes como se esperaba.

Además, debido a la naturaleza de los plazos, suponga que revisar todas y cada una de las más de 100 páginas y editar el HTML ya no es una opción. Esta fue mi recomendación desde el primer día y creo que el cliente acepta que lo que tiene es realmente poco ideal, también están trabajando a una fecha límite ajustada.

Esto deja solo dos opciones para ediciones. Cambie el CSS para que funcione en todos los navegadores (como se llama en cada página), o genere algo de Javascript (de nuevo, esto se puede invocar en cada página usando un incluir) para hacer algo con el HTML en cada página del sitio, o algo complicado. Cambiar el código en las páginas incluidas es fácil, ya que está cambiando el HTML en cada uno de los bloques en cuestión.

Entiendo completamente lo que todo el mundo está comentando hasta ahora y gracias por esas ... fueron mis soluciones iniciales en ambos casos, y no estaría aquí si fueran una opción.

Gracias a todos los que han leído esto, pero realmente estoy tratando de encontrar alguna solución súper complicada para todo el problema de las clases de no encadenamiento en IE6. potencialmente para un uso más amplio que este proyecto. Sin embargo, ahora solo tengo 5 días hábiles para encontrar la respuesta antes de que mi contrato termine, así que si no lo hacemos, hackaremos una hoja de estilo IE6 que haga que todos los bloques aparezcan de una manera en ese navegador y lo dejamos así. Preferiría encontrar una solución universal, pero ... meh. Esperemos que dentro de 18 meses la base de usuarios de IE6 sea tan baja que ya no sea un problema.

Gracias a todos.

Cheers,

Mike.

Answer 4

Creo que se ha perdido el punto de mi comentario anterior. No estaba confundido acerca de su solicitud, pero estaba tratando de explicarle cómo podría abordar la tarea si la codificación del sitio fuera consistente.

Para un ejemplo más detallado, permite echar una línea desde el último ejemplo de CSS, menos las propiedades reales de estilo:

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

Siguiendo el comportamiento de Internet Explorer 6 en lo que respecta a las clases CSS encadenados, esa línea de código sería visto por IE6 como:

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

en cuenta que los nombres de las clases encadenados se ignoran para todos excepto el último nombre en la cadena. Como ya rechazó las soluciones de JavaScript que otros propusieron, la única solución que puedo ver es diseñar sus definiciones de clases de CSS con esta limitación de IE6 a medida que codifica.

Esto no simplifica la tarea, ya que la razón para encadenar las clases es poder aplicar un estilo condicional especial sin aumentar los nodos DOM del documento. Sin embargo, para seguir admitiendo la programación mejorada de funciones en IE6, sin la ayuda de algunas soluciones de JavaScript, simplemente tendrá que esforzarse más para encontrar métodos convencionales más antiguos para el mismo resultado. Sé que es probable que este comentario sea un poco tarde para su proyecto, pero espero que ayude con el proceso de planificación cuando trate con el estilo IE6.