Hack CSS para IE6 & IE7

  • 22/02/2008
  • 12:41 am
  • unijimpe

Uno de los problemas mas comunes al momento de implementar sitios web es la compatibilidad para los diferentes navegadores (Firefox, Internet Explorer 6, Internet Explorer 7, Safari, etc.), esto por que cada uno de estos interpreta de forma diferente las hojas de estilos. Ahora les presento un pequeño truco para hacer que un mismo estilo sea interpretado por cada browser en especifico.

Explicando en Hack
Normalmente cuando nombramos una propiedad de un estilo, este es interpretado por todos los navegadores, pero si anteponemos # se aplica a todos las versiones de Internet Explorer, además si utilizamos _ el estilo se aplicará a Internet Explorer 6, luego tendríamos:

CSS:
  1. .mydiv {
  2.     height: 15px; /* Para todos los Browsers */
  3.     #height: 20px; /*Para Internet Explorer */
  4.     _height: 25px; /* Para Internet Explorer 6 */
  5. }

Con lo cual obtenemos un mismo estilo interpretado de forma distinta de acuerdo al browser que tengamos.

Ejemplo del Hack
Vamos a crear un pequeño ejemplo, en donde deseamos aplicarlo colores diferentes a las tipografías de acuerdo al browser. Azul para Firefox, Azul para IE7 y verde para IE6. Entonces nuestro estilo sería de la forma:

CSS:
  1. body {
  2.     font-family: "Trebuchet MS", Tahoma, Verdana;
  3.     font-size: 12px;
  4.     color: #006699;
  5.     #color: #990000;
  6.     _color: #009933;
  7. }

Ahora si este estilo lo aplicamos a nuestra página tendríamos:

HTML:
  3. <title>CSS Hacks</title>
  4. <style type="text/css">
  5. body {
  6.     font-family: "Trebuchet MS", Tahoma, Verdana;
  7.     font-size: 12px;
  8.     color: #006699;
  9.     #color: #990000;
  10.     _color: #009933;
  11. }
  12. </style>
  13. </head>
  15. <h5>CSS Hacks </h5>
  16. <p>Microsoft is slowly ...  compliant.</p>
  17. </body>
  18. </html>

Pueden ver el resultado de este ejemplo en: csshack.html, dependiendo del navegadores que utilicen verán el color de los textos. Finalmente si desean leer mas acerca de este tema pueden hacerlo con el autor original en Creating different CSS style selector definitions for different browsers (Firefox, Internet Explorer 7 and IE 6.0)

Posts Relacionados

Total de Comentarios: 14

Publicidad
Arzakon
22/02/2008
3:04 am

Yo utilizo esta que explico en esta dirección. Básicamente, el resultado es el mismo, solo que quizás algo mas explícito (le digo en el mismo hack explícitamente que se trata un hack css para IE7).

CSS version IE7

Christian
22/02/2008
6:34 am

Buen Articulo, en realidad todavia no le encuentro utilidad, porque partamos de la base que lo que se quiere es “uniformidad” en el diseño, es decir, que se vea de la misma forma en cualquier browser, pero esta bueno el hack.

saludos

Rafael J.
22/02/2008
7:52 am

Creo que es mejor hacer uso de la directiva !important que es interpretado por ie7 y no por ie6 y en caso de que sea aplicable a los dos utilizar * html etiqueta. EJ.

a{
/* resto navegadores */
color:#FCF !important;
color:#00F; /* solo para ie6 */
}

y en caso de que sea solo para ie (tanto 6 como 7)

/* todos */
a{
color:#CFC;
}

/* solo ie tanto 6 como 7 */
* html a{
color:#00F;
}

Y de esta manera pudes validar tu página de estilos de la otra manera no es posble.

te recomiendo que le eches un vistazo a este artículo de anieto2k:

http://www.anieto2k.com/2006/12/26/css-entendiendo-y-aplicando-los-hacks/

Homer0
22/02/2008
12:11 pm

Esta bueno, pero por ahi tiene sus fallas, y no olvidemos que nuestra css no quedara totalmente validada. Yo uso este:

<!-- (…) -->
Título
<!--[if IE]> <![endif]–>
<!–[if lt IE 7]> <![endif]–>
<!–[if !lt IE 7]><![IGNORE[--> <!--
<!--[if !IE]>–> <!–
<!– (…) –>

Me queda todo validado y sin nigun inconveniente, lo bueno es que tambien podes poner llamadas remotas a scripts.

Te dejo el link -> http://www.maestrosdelweb.com/editorial/hacks-en-css-que-te-evitaran-dolores-de-cabeza-en-internet-explorer/

Homer0
22/02/2008
12:12 pm

Parece que lo tomo como codigo de comentario :P, fijate en el link mejor, es el que hace los “if”

unijimpe
22/02/2008
9:49 pm

Gracias por los comentarios, definitivamente hay muchas formas unas mejores que otras, pero gracias por compartirla con nuestros visitantes.

parufito
03/03/2008
8:13 am

Perfecto!

precisamente es lo que queria para un desarrollo que estoy haciendo.
Los otros hacks son mas complejos. Y yo solo necesitava poner un width mas pequeño en ie6.

Thx!

Negro
13/03/2008
4:37 pm

Muchisimas gracias! me solucionaste un gran problema para el amigazo de IE.

Gracias!

yos
14/03/2008
7:41 am

Que yo sepa el * html solo sirve para ie6, para ie 7 es *+html

Apon
24/03/2008
9:29 pm

yeah!
me salvaste la vida dude!
mejor el hack, que hacerle
su propia hoja para corregir sus babosadas!

vladux
14/05/2008
4:53 pm

Salu2, la pregunta es: Es recomendable el agregarle el “hack” a cada clase o hacer una hoja para cada navegador, cual de los dos, se puede validar y si hacer una hoja para cada navegador es la solución como c hace el llamado a dicha hoja.

Creo que pregunte mas de una cosa, mil perdonas soy renuevo en esto, mil gracias por al ayuda.

Matatero » Blog Archive » Hack CSS “Damn u IE”
09/06/2008
5:44 pm

[...] Unjimpe Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

Alfonso Marcos Vidal do O
02/10/2008
6:39 am

Podemos utilizar una CSS alternativa 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.

Dej@en
03/10/2008
6:19 am

Te debo una. Los hack para IE son geniales

Enviar Comentario

(*)

(*)