Llamando a los hacks de internet explorer: atacando a ie6 e ie7 por separado en la misma hoja de estilos
Esto es el colmo, con explorer 7 se solucionó el modelo de caja, el canal alfa de los pngs… pero explorer todavía tiene mucho que fastidiarnos.
En el último trabajo que me han encargado he tenido que distinguir entre las hojas de estilo comunes (mozilla y safari) y los hacks para explorer. El problema surge cuando estos hacks son distintos para ie6 e ie7, creo que ya hablé de esto en otro post, pero me apetece recordarlo.
A partir de ahora a todas las hojas de estilo para explorer las llamaré mediante igual o menor que 7:
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/ie_style.css" type="text/css" />
<![endif]-->Una vez dentro de esta, la mejor manera de distinguir entre ie7 e ie6 es el uso del asterisco: * html. Internet Explorer 7 se comporta en este sentido como mozilla y safari e ignora toda línea precedida de * html, no así las versiones anteriores de Explorer, un poco más tontas. Así:
body {
background:#ccc;
}
∗ html body {
background:#f00;
}
En ie6 mostrará el color de fondo rojo y en ie7 gris.
La mejor opción para poder validar tus CSS (lo de menos en algunos casos), separar las cosas bien hechas de las mal hechas (hoja de hacks), poder decidir a que versión de explorer o a que navegador atacar, no interfiere en firebug ni en validadores estandar, ¿quieres alguna más?
Sencillo, funcional y además valida.
10 Comentarios
Sikandar
8 May 2007
Pues “mi” IE7 reconoce las líneas con * html, y de hecho, si no se las pongo, se comporta como IE6…
¿Hay varias versiones o qué está pasando aquí? :D
albertofortes
9 May 2007
¿Qué raro que raro…
será quizá por las versiones standalone y normal?
O quizá sea porque pegas el asterisco a la sentencia. Me explico:
Si usas hacks para propiedades como:
*color:red; funciona en ie6 y 7, en cambio _color:red solo en ie6 e ie7 lo ignora.
Pero aquí no me refiero a eso, sino a * html {}.
Quizá sea eso.
Jorge
10 May 2007
Siempre hay una forma de hacerlo sin hacks ¡dale otra vuelta, tío, dale otra vuelta!
albertofortes
11 May 2007
Jajaja…
Ya te estaba echándo en falta Jorge.
No sé tío, está todo muy reseteado, cuando a explorer le da por fastidiar…
Quizá sea por mi hoja de normalización de estilos, hay muchas pero yo estoy usando esta desde hace tiempo, con un último cambio a raiz de un consejo de David, para poner la fuente a 10px (x-small) en vez de .85px en el body. Y a partir de ahí jugar con las fuentes: 1.1em= 11px, 1.2em= 12px etc.
De todas formas los hacks se reducen a una proporción mínima de uno por cada 300 ó 400 líneas de código, tampoco está mal.
Me has dado una idea y voy a postear la normalización de estilos que suelo usar, hay muchas, esta es sólo una más.
Un abrazo Jorge
Ruby on CSS » CSS Hacks para ie6 e ie7
18 May 2007
[...] Actualización: Ahora prefiero hacerlo así: http://www.albertofortes.com/blog/?p=397 [...]
luis..
14 September 2007
Yo me di cuenta que si existen varias versiones de ie7 y si hay mucha diferencia en cuanto a css. existe ie7.0.5.6 y ie7.0.5.7 y en la ultima me desacomoda todo.
saludos…
albertofortes
14 September 2007
¡Pues vamos apañados!
Yo por ahora funciono bien con este sistema, y ni yo ni los clienets encontramos, por ahora diferencias entre los distintos ie7, y espero que siga así por mucho tiempo.
florencia
22 March 2008
conclusion: MALDITO IE..
porque no instala todo el mundo opera o firefox de una vez ¬¬
Alfonso Marcos Vidal do O
2 October 2008
Podemos utilizar una CSS diferente para meter los hacks de IE6.
Luego ponemos el conditional comment (CC) en nuestro html invocando a esta css y listo.
El validador CSS del W3C ignora el CC y tanto nuestras CSS como el XHTML pasarán los test.
albertofortes
2 October 2008
Efectivamente Alfonso, un buen resumen del post.
Gracias
Deja tu comentario