Ardilla Quio Ardilla Quio

21 de Diciembre de 2010

CSS hacks para Internet Explorer

En los últimos años los fabricantes de navegadores web se han concienciado por fin de la importancia de que sus productos se adhieran a los estándares HTML y CSS para un correcto visionado de las páginas web. Pero por desgracia eso no fue siempre así, y durante años los maquetadores han tenido que pelearse con navegadores que poseían motores de renderizado incompatibles y repletos de errores. Para ello, se han desarrollado diversas técnicas, conocidas como trucos o hacks de CSS, que permiten explotar las formas peculiares en las que distintos navegadores interpretan el código CSS y conseguir contrarrestar los errores de renderizado propios de cada navegador.

Existen muchos y variados hacks para las distintas versiones de Internet Explorer (y otros navegadores), pero debido a la aplastante difusión de estos productos (y a la aplastante difusión de bugs en el tratamiento del estándar CSS en estos, todo hay que decirlo) nos centraremos sólo en las que nos serán útiles para las versiones 6 y 7 de Internet Explorer y sólo aquellas que usen código CSS válido.

Asterisco HTML (Star HTML)

El elemento html es el elemento raíz en el estándar de los documentos HTML, pero el Internet Explorer versiones 4 a 6 aceptan la definición de un elemento padre a html, mientras que el resto de navegadores que se adhieren al estándar ignoran la definición como incorrecta. De esta forma podemos usar este hack de la siguiente forma, sabiendo que todos los navegadores asignaran al elemento p.texto un tamaño de texto de 15px, mientras que Internet Explorer 4-6 le adjudicará un tamaño de 20px:

p.texto {font-size: 15px;}
* html p.texto {font-size: 20px;}

Asterisco más (Star plus)

El comportamiento anterior fue corregido en la versión 7 de Internet Explorer, pero ésta a su vez introdujo otro error con el selector +, de forma que para Internet Explorer 7 podemos usar:

p.texto {font-size: 15px;}
*+html p.texto {font-size: 20px;}

Atención: este hack funciona en IE7 en "standards mode", no cuando está en "quirks mode". De la misma forma es soportado por IE8 en "compatibility view" (IE7 "standards mode"), pero no en IE8 "standards mode".

Selector hijo

Internet Explorer 6 y anteriores no interpretan el selector hijo (>), por lo que ignoran cualquier regla que lo contenga. De esta forma, podríamos reescribir nuestro ejemplo anterior usando este hack:

p.text {font-size: 20px;}
html > body p.text {font-size: 15px;}

Aunque Internet Explorer 7 añadió soporte para el selector hijo, se descubrió un error que permite usar una pequeña variación del mismo hack. Si insertamos un comentario vacío inmediatamente después del selector hijo, IE7 ignorará por completo la regla, comportándose de la misma forma que IE6:

p.text {font-size: 20px;}
html >/**/ body p.text {font-size: 15px;}

Etiqueta !important

Internet Explorer 6 y anteriores ignoran por completo las declaraciones con la etiqueta !important, siempre que exista otra declaración del mismo elemento dentro del mismo bloque de código (sin la etiqueta !important). De esta forma en el siguiente ejemplo, todos los navegadores que cumplan el estándar usarán la definición !important, mientras que IE6 la ignorará y usará la segunda:

p.text {
	font-size: 15px !important;
	font-size: 20px;
}

Comentarios condicionales

Esta es una funcionalidad implementada sólo en el navegador Internet Explorer (versiones 4 - 8) y que nos permite mostrar u ocultar código según nos convenga. El resto de navegadores los interpretarán como comentarios normales e ignorarán por completo su contenido. Veamos un ejemplo:

<!--[if IE]>
    <p>Esta línea sólo es visibile en IE</p>
<![endif]-->

De esta forma, la línea contenida dentro de los comentarios (<p>...</p>) sería sólo visible en Internet Explorer. Estos comentarios pueden ser ampliamente configurados, como por ejemplo para aparecer sólo en versiones específicas de Internet Explorer:

<!--[if lte IE 6]>
    <p>Esta línea sólo es visible en versiones de IE 6 o anteriores</p>
<![endif]-->

Un uso típico de los comentarios condicionales es para cargar páginas de estilos específicas con retoques para corregir los errores de Internet Explorer 6 y 7:


<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css/styles_ie6.css" media="all" />
<![endif]-->
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="css/styles_ie7.css" media="all" />
<![endif]-->

De esta forma, nuestra página web tiene los estilos definidos en el fichero "css/styles.css". Aquellos retoques necesarios para su correcta visualización en Internet Explorer 6 se encontrarían en el fichero "css/styles_ie6.css" (gracias a los comentarios condicionales, esa página de estilos sólo es cargada por IE versión 6 o anteriores). De la misma forma, la página de estilos con retoques para Internet Explorer 7 se encuentra en "css/styles_ie7.css".

Finalmente, comentar que tanto el W3C como Microsoft recomiendan el uso de comentarios condicionales sobre hacks.

Más información: Comentarios condicionales.

9 comentarios

Anónimo

29/06/2016 14:01:42

muchas gracias con estos apuntes se puede empezar a trabajar,

astiya81

19/06/2014 05:17:58

estoy haciendo una web, y se ve perfecto en todos los navegadores, pero en internet explorer todo el texto de el contenido de la pagina se esta alineando hacia la derecha, cuando deberia estar hacia la izquierda, hay una solucion para esto? gracias.

Luis

23/09/2013 11:22:32

Hola cami.

Perdona por no contestarte antes. De todas formas dejo la respuesta por si puede ser de utilidad a otras personas.

El hack al que haces referencia, a pesar de que no es uno de los que tratamos aquí, es válido para Internet Explorer 7 y anteriores.

Un saludo.

cami

20/06/2013 23:40:11

esto esta bien implementado ?

<li style="width:100%; *width:650px;">

Luis

14/03/2012 10:04:03

Hola Sandra, gracias por participar en nuestro blog.

Sobre tu primer comentario, si lees el artículo, verás que mostramos sólo hacks que usen código CSS válido (lo comentamos en el propio artículo), así que no dan problemas de validación. De todas formas, en la última sección del artículo verás que se recomienda el uso de comentarios condicionales para usar páginas de estilos separadas.

Sobre tu segundo comentario, decir que si fuese por mi no dariamos soporte para ese navegador (de hecho ya no lo damos de forma gratuita). Pero algunos clientes (sobre todo en la administración pública) aún siguen usando ese navegador y no tienen permisos, conocimientos o simplemente ganas de actualizarse y cuando les vas a enseñar la web, ellos sólo entienden que se ve mal, lo que les cuentas de su navegador no les importa lo más mínimo.

Un saludo.

Sandra - Diseño Web

13/03/2012 23:41:12

Se me olvidaba comentar que soy de la opinión que es mejor no dar soporte a IE6, por ser un navegador prehistórico y completamente desfasado..

Sandra

Sandra - Diseño Web

13/03/2012 23:39:03

Mucho mejor utilizar stylesheets separadas para IE que no los hacks, pues estos últimos dan problemas de validación, a parte de dificultar el crear un código CSS limpio.

Sandra

Blogger en CreativaSfera - Diseño Web

Luis

08/07/2011 18:52:03

Hola arkonqn.

Es una buena pregunta. El código sería el siguiente:

- Para que se vea en IE:

<!--[if IE]> IE <![endif]-->

- Para que no se vea en IE:

<!--[if !IE]>--> RESTO <!--<![endif]-->

arkonqn

08/07/2011 17:59:56

Consulta amigo, por ejemplo para hacer algo asi:

osea, q lo muestre en otros exploradores y no en ie? pq tengo un codigo que no funciona en internet explorer y para no tener problemas directamente que no se vea en ie y punto, como puedo hacer para eso?

Comentario anónimo
Comentar como usuario