Hacks en CSS que te evitarán dolores de cabeza en Internet Explorer

Estás en Inicio / Editorial / Desarrollo Web

29.01.2008

Hacks en CSS que te evitarán dolores de cabeza en Internet Explorer

Por Reynier Matos Padilla | 6,665 Lecturas
Archivado en: CSS, Desarrollo Web

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

Califica esta nota:

(12 votos, promedio: 4.08 de 5)

Loading ...

Sobre el autor

Reynier Matos Padilla
Administrador de sistemas y diseñador web. Con experiencias en tecnologías ASP.NET, PHP, Javascript, CSS, DHTML, AJAX, servicios web, y XML.

Comentarios

14 comentarios en total.

Gonzalo 29.01.2008 - 05:37 - #

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.
Gonzalo 29.01.2008 - 05:42 - #

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]
Oscar Mota 29.01.2008 - 12:27 - #

Gracias por los comentarios, se nos pasaron por alto los detalles.
Alekz 29.01.2008 - 17:26 - #

Gracias por esta información, me encanta aprender todo esto sigan así!
Juan Carlos Rendón 30.01.2008 - 13:33 - #

interesante aportación para tener en cuenta
emilio Martinez 31.01.2008 - 14:59 - #

O sea que los puedo colocar y funcionará en todos los navegadores?
baccxus 01.02.2008 - 23:19 - #

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
David 03.02.2008 - 15:02 - #

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í.
Juan Pablo Lozano 05.02.2008 - 09:45 - #

Esos hacks validan?
kerberoS 08.02.2008 - 09:15 - #

@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.
Sphericow 27.02.2008 - 05:26 - #

También validan hacks del tipo “* html div”, que sirve para IE, y “*+html div”, específico para IE7.
alan 04.03.2008 - 13:36 - #

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.
joseBedoya 25.04.2008 - 13:26 - #

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.
Ricardo 16.05.2008 - 05:24 - #

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.