Debido a la diversidad de navegadores y las diferencias entre versiones es muy útil hacer uso de algunos hacks si queremos que la apariencia de nuestras páginas en Internet Explorer, sea igual que en el resto de los navegadores que soportan los estándares.
A continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con Internet Explorer.
Detectando la versión de Internet Explorer
Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales.
Estos fueron creados por Microsoft para su navegador y sólo son soportados por éste. Como comienzan con <!-- cualquier otro navegador asumirá que es un comentario y no ejecutará el código que hay dentro.
Este tipo de hack se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario.
<!--[if CONDICION]> Código HTML <![endif]–>
En la condición podremos utilizar cualquiera de las que siguen. Pudiendo sustituir X por las versiones de Internet Explorer disponibles hasta el momento (5,5.5,6 o 7).
IE
Cualquier versión de Internet Explorer
lt IE X
Versiones inferiores a X
lte IE X
Versiones inferiores o iguales a X
IE X
Solo para la version X
gte IE X
Versiones superiores o iguales a X
gt IE X
Versiones superiores a X
A continuación mostramos un ejemplo del uso de este hack:
<!-- (…) --> <head> <title>Título</title> <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link href="ie_any_version.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent_versions.css" rel="stylesheet" type="text/css"> <!--<![endif]--> <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]--> </head> <!-- (…) -->
El hack del guión bajo
Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador.
#textbox{
width: 450px; /* Firefox y los demás */
_width:400px; /* Internet Explorer 6 e inferiores */
}
Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas.
Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente.
body {
background: #FFFFFF /* Firefox y los demás */
*background: #000000 /* IE7 e inferiores */
_background: #CCCCCC; /* Sólo IE6 */
}
En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro para Internet Explorer 7 y gris para IE 6.
El uso de !important
Este operador es utilizado en los archivos CSS para que los navegadores respeten la importancia de la propiedad que lo contenga y evite que se sobrescriba con otras que se definan posteriormente.
Internet Explorer 6 y las versiones anteriores no interpretan este operador; problema que fue solucionado en la versión 7 de este navegador.
p {
background: green !important; /* Navegadores superiores a IE 6 respetarán la importancia inmediatamente */
background: red; /* IE 6 y anteriores aplicará este estilo aunque esté marcado la anterior como importante */
}
En el ejemplo anterior el fondo de la página se mostrará rojo para IE 6, mientras que para Internet Explorer 7 y el resto de los navegadores se verá verde.
Sin hacks en nuestros CSS
El desarrollador Dean Edwards pone a disposición de todos, bajo licencia GNU LGPL, la librería JavaScript IE7, para hacer que Internet Explorer (Navegadores Microsoft IE) se comporten como un navegador que sigue los estándares. Además hace que los PNG transparentes funcionen correctamente en las versiones 5 y 6 del navegador y soluciona diversos problemas relacionados a la interpretación del CSS.
Para utilizar esta librería debemos descargarla de Google Code y seguidamente agregar estas líneas entre las etiquetas :
<!--[if lt IE 7]> <script src="/ie7/ie7-standard-p.js" type="text/javascript"> </script> <![endif]-->
Con este código cargamos el script chequeando que el navegador sea Internet Explorer, utilizando para esto el hack del que hablábamos al inicio.
Lecturas recomendadas
Creo que tengo que dicernir…
Los comentarios condicionales NO son un hack… es una herramienta, que la mayoría de los navegadores han incluido como funcion… no de la misma forma que IE por supuesto pero no viene al caso…
Los hacks son esos “workarrounds”, están los que validan y los que no.
por ejemplo:
preceder a una propiedad css con un *, _, o #, no pasan la validacion CSS, si lo hace el !important
Saludos Gonzalo.
Y quisiera hacer una “aclaracion” la libreria IE7 de Dean Edwards, lo que hace es, y citando al sitio,
[QUOTE]
IE7 es una librería JavaScript para hacer que MSIE (Navegadores Microsoft IE) se comporten con un navegador que sigue los estandares. Soluciona muchos problemas CSS y hace que los PNG transparentes funcionen correctamente en IE5 e IE6.
[/QUOTE]
Gracias por los comentarios, se nos pasaron por alto los detalles.
Gracias por esta información, me encanta aprender todo esto sigan así!
interesante aportación para tener en cuenta
O sea que los puedo colocar y funcionará en todos los navegadores?
Personalmente no recomiendo usar la librería JS IE7 porque es para “emular comportamientos” y te pone la página con una carga lenta y efectos “extraños”.
Planteénse: “Vale la pena usar Javascript y hacer tu carga lenta, si lo que haces con CSS es para que tus páginas sean de fácil y rápido acceso”.
Ahora, el uso de hacks después del IE7 ahora lleva más trabajo de parte del diseñador/programador, primero porque directamente MS ha dicho que no dará soporte completo al estándar CSS2 y CSS3, y segundo porque hay que hacer hacks para IE/ y otros para IE6 y hacia atrás. Entonces “arreglaron algo” los de Redmon?.
Ahora, el uso del IE7 se está extendiendo debido a que lo incluyeron como actualización de su Windows Update para XP SP2 y que está incluido en Vista, además que no se necesita pasar la verificación para instalarlo en XP, ENTONCES, se hace necesario seguir dando soporte a IE6 e inferiores?. PIENSENLO, es su decisión como usuarios y/o desarrolladores de contenido.
Gracias por el espacio,
FER
Baccxus, sabia reflexión, soy de la misma opinión, añadiría que si ellos tienen las santas pelotas de no dar soporte a los estandares nosotros debemos tener los santos congrios de dejar de usar su navegador, utópico pero debería ser así.
Esos hacks validan?
@Juan Pablo Lozano: El hack del “_” no es válido, el uso de !important si es válido y utilizar los comentarios condicionales también es válido.
También validan hacks del tipo “* html div”, que sirve para IE, y “*+html div”, específico para IE7.
que cosas con esto de los navegadores, yo en lo personal me quedo con el explorer, mi negocio no me da tiempo para descubrir nuevas tendencias.
Hola Reynier muy buen artículo. Lo que dice baccxus con respecto a que el IE7 se incluye como actualización y no necesita pasar la verificación, es cierto, pero como desarrolladores debemos hacer que nuestros sitios se vean bien en varios navegadores, siendo importante IE6, ya que todavia aunque no lo creamos hay muchos usuarios que lo usan, lo digo por experiencia con los clientes.
alan, no es cuestión de tendencias. Si de verdad quisieras conservar tu negocio debes adaptarte a los estandares. Por ejemplo cuando hagas una web y microsoft haga un nuevo navegador que se acerca más a los estandares, tu web se descuadrara en gran parte y eso supone quejas de clientes y perdidas de cliente/dinero.
En caso de querer que solo ‘ie’ interprete un parámetro del css, ej.
#footer{clear:both;@clear:none;}
la ‘@’, al igual que ‘_’ y ‘*’ me funcionan en el navegador, pero ninguno de los 3 me validan en el W3C.
Como podría usar ‘!important’ en este caso?
Gracias
[…] artículo completo lo pueden ver haciendo un clic AQUI (debería poner un icono) donde podrán encontrar todo lo necesario para aplicar lo comentado […]
trate de colocar esto en una pagina de la siguiente manera, hic una table dnd coloque de fondo de una columna una imagen png la cual en internet explorer se ve blanca, coloque un css y una condicional si era internet exploere, me trabajo bien pero cuendo le coloco para que me coloque la imagen en todos los navegadores en el otro css me da un error y me coloca la imagen d nuevo en blanco :S no existe forma de que con un navegador agarre un css y con otro navegador otro??
Hola,
Porque no me funcionan los hacks? ninguno nada, ni este, no hace nada de nada, he probado mil cosas.
ALguna posible ayuda?, simplemente pongo el codigo dentro de la hoja de estilo.
Encontré un pequeño error en el código para llamar al javascript que hace que los navegadores de la puta microsoft se apeguen a los estándares. El código para llamar la librería es:
en donde “/ie7” es la carpeta y lo que sigue “/ie7-standard-p.js” el archivo.
Si descargan la librería, ese archivo “/ie7-standard-p.js” no existe. Mal podría funcionar. Hay otros archivos .js dentro, linkie uno por uno a ver si veía algún cambio en IE6, pero nada pasó :S.
Quedó invisible en el comentario anterior xD… ahora si, El código para llamar la librería es:
[if lt IE 7]>
<![endif]
(le saqué el codigo que comenta para que se viera)
entonces “/ie7″ es la carpeta y lo que sigue “/ie7-standard-p.js” el archivo.
Si descargan la librería, ese archivo “/ie7-standard-p.js” no existe. Mal podría funcionar.
Hay otros archivos .js dentro, linkie uno por uno a ver si veía algún cambio en IE6, pero nada pasó :S.
Pueden ponerse comentarios condicionales en una JSP?… gracias
hola. por favor alguien me puede ayudar. no entiendo mucho el lenguaje que hablan je je..pero a mi me sale “error en el script de la pagina de internet explorer” esto que significa? y principalmente como puedo solucionar?
En realidad, en muchos casos no vale ni la pena invertir tiempo en desarrollar algo que no sea para IE7 (que viene incluido con windows). Pues el uso de los otros navegadores es menor, y los usuarios de estos saben que muchas páginas no funcionarán en ellos. Esto sin contar que realmente el concepto de “estandar” es algo que muchos creen que es por normativa, siendo que es por uso. Un estandar “real” no es aquel que una institución de fantasia dice que lo es, sino aquel que el uso lo define como tal.
No se si será porque soy más desarrollador que diseñador y por lo mismo no he usado CSS muy elaborado, pero YUI reset y base hacen un muy buen trabajo para permitirme hacer cosas que normalmente no se verían igual en todos los navegadores.
@Suikakuyu eso es lo que Microsoft dice que es un estándar, pero lo que es en realidad es un estandar “de facto”.
Los estándares están para respetarlos y precisamente para evitar todos los problemas que hay con Internet Explorer, que dicho sea de paso, cada vez pierde más mercado de cara a otros navegadores.
De hecho, con la entrada de Google Chrome en el mercado se hace cada vez más necesario un estándar firme que permita a los desarrolladores realizar aplicaciones lo más compatibles posible. La web no es un espacio de Microsoft, y si nosotros, los desarrolladores web, no nos encargamos de hacer que cualquiera pueda ver una web, al final solo conseguiremos que esa empresa se haga dueña y señora de “este” espacio.
Por cierto, gran artículo, por desgracia tendré que poner en práctica muchos de los hacks en breve.
Que tal soy nuevo en este foro, pero me parece que debemos tomar lo que mas nos sirva, para el trabajo y tomando en cuenta los requirimientos del cliente, (ejemplo: personalmente me gusta firefox y opera en ese orden, pero no voy a obligar a mis cliente a usarlos.) Igual en este caso
la librería JavaScript IE7, es una opcion que cada quien la tome o la deje, que es una sugerencia y un buen aporte, sin duda, que es lo ideal, no en todos los casos. Y no debemos estar cerrados a probar ya que debido a eso el mundo y la tenologia a evolucionado (no llamaron loco a Galileo)
Podemos utilizar, en lugar de una librería js que puede ser algo pesada y con mucho código que igual no nos es necesario, 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.
Por mi parte estoy de acuerdo en que debe ser Microsoft quien se adapte y no nosotros, pero el asunto que me atañe es otro.
Estoy haciendo páginas estáticas para una web que me viene dada y en la que no puedo meter código más que en espacios concretos. Ya tiene linkados archivos externos de javascript y no me está cogiendo la librería IE7. ¿Debería abandonar o hay alguna manera de solucionarlo?
hola mira tengo un footer que en internet explores
sale cada columna en una lado y en firefox sale bien
como lo soluciono
Creo que como desarrolladores tenemos un poco de obligación de comentarles a nuestros clientes las bondades de utilizar un navegador que cumplan todos los estandares…y agragar asi nuestro granito de arena a favor de los navegadores que si cumplen..por que si no..como dice un comentario más arriba..”al final solo conseguiremos que esa empresa se haga dueña y señora de “este” espacio.”
Muy buen artículo. Gracias.
hola mi blogs se descuadra por completo en explores
si duplico mi css y uso el codigo de Dean Edwards pero cargo otro css
en el que le pongo a todas las propiedades el _ bajo me funciona
y se cuadrara el blog ayudame please.Espero tu contestacion gracias.
Estos hacks son buenos, pero tienen la desventaja de que no validan los estandares de la W3C, para que podamos tener los hacks sin perder de vista los estandares, podemos utilizar los siguientes hacks:
.class {
… /*Estilos para FF*/
}
*:first-child+html .class {
… /*Estilos para IE7*/
}
*html .class {
… /*Estilos para IE6*/
}
Primero se pondrian los estilos para FF y/o los verdaderos browsers clase A, luego se puede utilizar el segundo estilo que funciona exclusivamente para IE7, incluso si necesita una estructura de arbol para los estilos, lo unico que se debe poner es *:first-child+html y en seguida la estructura y eso reconoce y valida para IE7, de igual forma con *html que es exclusivo para IE6.
NOTA:
Como recomendacion, traten de estructurar su css de manera que las cosas mas importantes queden abajo, asi se evitan el uso del !important que puede causarles dolores de cabeza.
Buen aporte, es un artículo digno de poner atención y quitarse varios plemillas de encima.
Estoy buscando cómo hacer condicionales para firefox, safari, opera… y he llegado a tu artículo (muy bueno, por cierto).
Y gracias a él me acabo de enterar que sólo existen condicionales para ie… pero… ¿Entonces cómo corrijo diferencias entre firefox y safari o crome? Estoy haciendo una web y tengo diferencias entre estos navegadores. Me estoy volviendo loco para corregirlo… ¿Hay algún modo?
Un saludo
sdfsdfsdf
Hola, quisiera saber como puedo implementar la libreria js de Dean Edwards en wordpress, coloqué el código en el index.php pero aun en FF la web está centrada y en IE7 esta alineada a la izquierda, muchas gracias.
Genial! me saco de un apuro, la barra latera, o mejor dicho el DIV lateral de uno de ismsitios, se ve ahora donde debe verse gracias a esto:
_clear:left;
ya que solo lo ve IE6
PERO
PERO
PERO
NO ME VALIDA!!!
Como hago que me valide?
El sitio es http://www.quierohosting.com/wizspro
[…] Fuente: http://www.maestrosdelweb.com/editorial/hacks-en-css-que-te-evitaran-dolores-de-cabeza-en-internet-e… […]
[…] http://www.maestrosdelweb.com/editorial/hacks-en-css-que-te-evitaran-dolores-de-cabeza-en-internet-e… Related Posts:Instalación de WordPress mu (multi user)Cómo hacer un patrón (pattern) en […]
[…] Segurament el problema el tindràs amb Explorer, ja que tant Safari, Firefox o Chrome, llegeixen correctament les normes CSS de W3C. Per aquest motiu tenim que trobar certs truquets per insertar codi CSS i que només el detecti Explorer. […]
muy bueno tu tema, pero quisiera saber como implementarlo que no entiendo muy bien como utilizar el codigo
yo hice una pagina con css utilizando el archivo css como externo todo bien. el problema es que en explorer y firefox todo se muebe por lo menos la mayor parte de el contenido se mueve
esta es la pagina web http://WWW.quelsaguatemala.com
sera que esto que desis vos es lo que nesecito
sera que algun dia seran todos los navegadores iguales
ese seria el sueño para todo programador….
Explorer da asco. No se puede hacer ni 1/4 de lo que se puede en otros navegadores. A la larga va a terminar desapareciendo si no se adecua a los estándares.
Prefiero firefox. Es mas rápido y mucho mas facil para desarrollar aplicaciones, dado que tiene una comunidad donde encontrar soporte tanto en plugins como en información.
Excelente, gracias por el recurso. Me ayudo bastante con un disenho que se ve bastante bien en FF pero aparecia movido y con los divs distorcionados en IE. Habia leido lo de usar !important ya que se supone que no lo detecta IE y usar * html para IE, pero el ! important no me funciono y este metodo si. Gracias !!
Está muy bien el artículo, solo comentar que yo añadiría el comentario: “Los hacks son la ÚLTIMA opción para un maquetador.. hay que buscar la forma de hacer que una web se vea igual en todos los navegadores con los recursos que da el lenguaje CSS. Los hacks son para casos desesperados y puntuales, pero no es bueno abusar de ellos o recurrir enseguida a ellos”.
Por cierto, la gente como el del commment#12 son los que impiden que Firefox se convierta en el explorador más usado… venga hombre, que no es tan difícil de manejar, básicamente está todo en el mismo sitio, la barra de navegación, etc… y los desarrolladores nos volvemos locos por culpa de que IE pasa de los estándares de W3C!
hola, estoy haciendo una pagina pero no me carga bien en internet explorer, ci el codigo que pones en una parte de la pagina como ejemplo de los hack pero no e donde ponerlo, ademas creo que esto necesita de unos archivos…no se de donde descargarlos, agradezco cualquier informacion al correo….saludos