Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • CSS hacks para Internet Explorer

CSS hacks para Internet Explorer

21 Dic 2010 por Santi

Comentarios: 9

IE CSS hacks

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.

Comentarios

9 comentarios. Comentar.

1. arkonqn el 08 Jul 2011 a las 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?

2. Luis el 08 Jul 2011 a las 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]-->

3. Sandra - Diseño Web el 13 Mar 2012 a las 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

4. Sandra - Diseño Web el 13 Mar 2012 a las 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

5. Luis el 14 Mar 2012 a las 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.

6. cami el 20 Jun 2013 a las 23:40:11

esto esta bien implementado ?

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

7. Luis el 23 Sep 2013 a las 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.

8. astiya81 el 19 Jun 2014 a las 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.

9. Anónimo el 29 Jun 2016 a las 14:01:42

muchas gracias con estos apuntes se puede empezar a trabajar,

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?