| Suscribir mediante RSS

Qué son los Hacks para IE

6 April 2009 Diseño web

Comentarios CondicionalesAhora que tenemos un Blog, casi sin darnos cuenta, nos hemos convertido en Diseñadores Web. Antes éramos simples visitantes, si no nos funcionaba una página en nuestro navegador hacíamos pruebas con otro o no entrabamos en ese sitio simplemente.

Sin embargo actualmente nos debemos preocupar de cómo se mostrará nuestro Blog en los distintos navegadores que use quién nos visite.


Existe la eterna discusión entre creadores de páginas webs sobre si adaptar la página al navegador del visitante o hacer que se adapte el visitante a ella cambiando de navegador. Personalmente me incluyo entre los primeros siempre que eso sea posible y no requiera grandes transformaciones.

Si tienes un Theme que no se “lleva” bien con el navegador Internet Explorer 6 ( IE6 ) no lo cambies. Se pueden emplear ciertas fórmulas o trucos para permitir acceder a nuestro Blog a aquellos visitantes que todavía usen IE6 sin mayores problemas.

De esta forma, es posible corregir el aspecto de nuestra página para que se muestre correctamente en IE6 y también “desactivar” el código javascript que pudiera provocar algún bloqueo de IE6. El Blog puede mostrarse perfectamente sin estos elementos y sólo se verá afectado IE6. El resto de navegadores ni se enterarán de estos cambios.

Para realizar este tipo de modificaciones en el código podemos usar los Comentarios Condicionales y los llamados Hacks CSS.

Los Comentarios Condicionales fueron creados por Microsoft para su versión IE5 y ha seguido incorporándolos a sus versiones más recientes. Sólo son entendidos por las versiones IE5, IE5.5, IE6 e IE7, para el resto de navegadores serán interpretados como simples comentarios. Por tanto, podemos conocer que versión de navegador tiene el visitante y actuar en consecuencia. Por ejemplo, para aplicar una hoja de estilos CSS diferente según sea una versión del navegador u otra o para desactivar algún código javascript que sabemos que bloquea IE6.

El formato de un Comentario Condicional es el siguiente:

<!--[if IE]> 
<link href="solo_IE.css" rel="stylesheet" type="text/css"> 
<![endif]-->

<!--[if IE 6]> 
<link href="solo_IE6.css" rel="stylesheet" type="text/css"> 
<![endif]-->

<!--[if lt IE 7]> 
<link href="menor_IE7.css" rel="stylesheet" type="text/css"> 
<![endif]-->

<!--[if lte IE 7]> 
<link href="menor_igual_IE7.css" rel="stylesheet" type="text/css"> 
<![endif]-->

<!--[if gt IE 6]> 
<link href="mayor_IE6.css" rel="stylesheet" type="text/css"> 
<![endif]-->

<!--[if gte IE 6]> 
<link href="mayor_igual_IE6.css" rel="stylesheet" type="text/css"> 
<![endif]-->

y así con las demás combinaciones.

Los Hacks CSS por su parte se colocan en los archivos de estilos CSS. No están recomendados pero su uso permite modificar propiedades que sólo afecten a IE6 y versiones inferiores.

Imagina que tienes un sidebar que se desborda con IE6 mientras en los demás nevegadores se muestra perfectamente. Podríamos corregir este problema anteponiéndole un guión bajo a la propiedad.

Por ejemplo:

#lsidebar {
float:left;
width:160px;
_width: 140px;
}

IE6 acepta como válido el último valor de 140 px, sin embargo los demás navegadores no reconocerán el valor por tener un caracter inválido y mostrarán el ancho del sidebar a 160 px.

Por supuesto existen más Hacks para IE, esto es sólo una pequeña introducción sobre como aplicarlos.

Viendo lo anterior, cambiar el Theme a veces puede resultar más laborioso que modificar pequeñas secciones de nuestros archivos.

Otros artículos de Diseño web

Ultimos artículos publicados en WordPress
Mantenimiento con phpMyAdmin
Entradas “pegajosas” Sticky Post
Cómo crear una página de autor Parte 1
Cómo crear mapas de imágenes