Hack CSS para Internet Explorer 7
Particularmente soy bastante reacio a utilizar hacks CSS en mis diseños, principalmente porque me gusta que validen, aunque como sabemos que no lo hagano cambia en anda el aspecto visual en el navegador. Sin embargo, creo que es bueno conocerlos por si en algún momento sea necesario utilizarlos.
Con la última versión de Internet Explorer, es decir, la 7, los diseñadores tenemos un nuevo problema ya que no todo se ve igual que en Firefox ni que en IE6, por lo que a veces es necesario realizar modificaciones sólo para este navegador. Un hack conocido es el de colocar un asterisco delante de la propiedad CSS y asà sólo será reconocida por Internet Explorer 6 y 7. Algo asÃ:
body {
background: #fff; /* Todos los navegadores */
*background: #000; /* IE6 e IE7 */
}
Es decir, en Firefox, Opera y los demás navegadores el fondo será blanco, pero en Internet Explorer 6 y 7 el fondo será negro, ya que lee la propiedad con el asterisco, cosa que los demás navegadores pasan por alto. Es importante la ubicación, es decir, la propiedad con el asterisco debajo de la normal (respetando la cascada).
Otra opción que se utiliza para dar diferentes estilos a navegadores es el uso de !important lo cual es aceptado por Firefox, IE7 y los demás navegadores, pero no por IE6. Por lo que se utiliza cuando no queremos dar cierta propiedad a IE6. Lo bueno de esto es que si valida y asà se usa:
body {
background: #fff !important; /* Firefox, IE7 y los demás */
background: #000; /* IE6 y anteriores */
}
Firefox, IE7, Opera, Safari y los demás tendrán fondo blanco, pero IE6 tendrá fondo negro. Ahora para crear un hack exclusivo para IE7 combinamos estas dos técnicas que hemos repasado. Es decir, agregando un asterisco e !important a la propiedad. Lo hacemos de la siguiente manera:
body {
background: #fff !important; /* Firefox y los demás */
*background: #000 !important; /* Sólo IE7 */
*background: #ccc; /* Sólo IE6 */
}
De esta forma podremos lograr 3 estilos direfentes dependiendo el navegador que estemos usando, es decir, en el primer caso, Firefox y los demás navegadores tendrán fondo blanco, Internet Explorer 7 fondo negro e Internet Explorer 6 fondo gris.
- Domingo 28 de Octubre de 2007 a las 12:27 ~ Translate to english
- Categorías ~ Diseño
- 10 comentarios realizados ~ Enlaces a esta entrada
- Digg ~ Menéame ~ del.icio.us ~ Fresqui ~ Mister Wong
- Enlazar este post ~
- Enlace corto ~
- ← Actualización de Pagerank, ahora PR5
- No todos los argentinos somos asà →
Hack CSS exclusivo para IE7…
Hacks CSS que sólo se aplica a Internet Explorer 7….
Muy interesante el articulo. No se me habÃa ocurrido mezclarlo.
Una cosa que me he fijado, el orden correcto no seria este???
body {
background: #fff !important; /* Firefox y los demás */
*background: #ccc; /* Sólo IE6 */
*background: #000 !important; /* Sólo IE7 */
}
Ya que si el que solo tiene el asterisco esta el ultimo ie7 usarÃa esa opción y no la anterior. No lo he probado porque no tengo ie7 (ni quiero), pero corregidme si me equivoco.
rmmts: En ese último caso la ubicación no importa ya que !important lo que hace es darle mayor “importancia” a esa propiedad independientemente de la ubicación en la cascada. Es una forma de decir “no importa el lugar donde esto esté, pero tiene prioridad con los demás elementos”.
Gracias por colaborar, un saludo.
Exelente aporte horacio, conocia un par de hacks, pero no todos, tambien ai uno que no mencionaste que se conoce por poner un guion bajo (_) adelante, como si fuera el asterisco y eso seria para IE.
jeje, saludos,
Lucas.
Este hack también es exclusivo de IE7 y además valida en el validador de CSS de la W3C: *:first-child+html
Ejemplo:
*:first-child+html body {background: #000;}
Buenas,
aunque me parece una iniciativa muy loable creo que hoy en dia deberiamos evitar usar los hacks de cualquier ie, ya que con los comentarios condicionales podemos aislar todas las “guarradas” en ficheros a parte y de esta manera tener un código más limpio.
Os dejo un buen enlace con ejemplos
http://www.disenorama.com/tutoriales/comentarios-condicionales-para-ie
espero que os sea útil
pd. Aunque pueda parecer tiquismiquis creo que el control de campos requeridos deberia mejorar un poco
saludos
Pues yo estoy montando un sitio y se me ve perfecto en todos los navegadores excepto en Safari, que me deja un margen despues de un menu y que queda realmente horrible.
Estoy cansada de probar a modificar valores y viendo que conseguia unificar el resultado en Opera, Firefox e IE7 no se que hacer para solucionar esto.
Un hack a tiempo puede salvarte la vida, realmente en este caso concreto echo muchisimo de menos uno para estos navegadores que ‘tan bien funcionan’.
Un saludo,
[…] Usar un parche para que la opción que elijas de las anteriores se modifique solo en IE (no he probado en IE7 así que no se como funciona). Aquí tienes como aplicar parches CSS para IE 6 y 7 […]
Sencilla y eficiente solucion, !!!, gracias.
Un amigo me dateo esto:
q se coloca en en la cabecera de documento.
pero prefiero usar asterisco e !important.
Bien!!!
Amigos lo que me pasa es que con PHP mi IE 7 no limpia la cache y al pinchar en los links me redirecciona a la pagina anterior que habia visitado y no a la que corresponde….pero en mozilla no me pasa…y funciona muy bien alguien sabe que sera?