Introducción

La palabra Hack ligada a nuestro contexto no tiene la misma interpretación que su traducción tradicional (ej: corte). Veamos la introducción de la definición sintética de Hack en wikipedia.

Hack has several meanings in the technology and computer science fields: a clever or quick fix to a computer program problem; a clumsy or inelegant solution to a problem; or a modification of a program or device to give the user access to features that were otherwise unavailable to them.

Seguida de nuestra interpretación …

Hack tiene varios significados en los campos de la ciencia de la tecnología y computación: una forma inteligente o rápida de arreglar un problema de un programa de computación; una solución torpe o poco elegante a un problema; o una modificación de un programa o aparato para dar acceso al usuario a características que de otra manera estarían inaccesibles a ellos.

Finalizando, todos sabemos que es un hacker.

Los 7 hacks CSS que deberíamos usar.

Cuando se intenta constuir un maquetado perfecto usando diseños en CSS hay probabilidades de que no funcione en IE. Marcamos a continuación los 7 hacks más importantes de hojas de estilo que usaremos frecuentemente para el diseño perfecto.

1. Hack de Modelo de Caja

El modelo de caja es usado para solucionar un problema de interpretación en exploradores anteriores a IE 6, dónde el border y padding están incluidos en el ancho width de un elemento.

padding: 4em;
border:1em solid red;
width: 30em; width/**/:/**/ 25em;

2. Comentarios Condicionales

Estos comentarios condicionales funcionan sólo para IE y no están soportados por ningún otro explorador. Para otros sólo son comentarios simples y por lo tanto, es seguro su uso ya que no causan efecto alguno en el browser.

A continuación se presentan los usos más típicos:

<!--[ifIE]> Some CssCode<![endif]-->

El código de arriba es aplicado a todas las versiones de IE, tales como 5.01, 5.5 y 6.0; pero si ahora queremos aplicarlo a versiones específicas, aplicaremos la siguiente condición:

<!--[if lte IE 6]>    Some Css Code<![endif]-->

Después de terminar las pruebas eliminamos todos los hacks para separar el/los archivo/s; de esta manera el CSS principal queda limpio y ordenado. Este nuevo archivo, que se encarga de funcionar solo para las versiones correspondientes de IE, se incluye en la cabecera (head) del archivo principal dentro los comentarios condicionales.

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

A continuación se presentan las posibles condiciones:

• IE (cualquier versión).
• lt IE version (versión anterior).
• lte IE version (versión anterior o igual).
• IE version (versión específica).
• gte IE version (versión posterior o igual).
• gt IE version (versión posterior).

3. Min-width y Max-width de un elemento

IE no interpreta este comando por lo que necesitamos una nueva manera de hacer este trabajo en este explorador. Tomemos un ejemplo rápido, necesitamos aplicar esto a un ‘div’ con ‘id=”wrapper”‘:

<div id="wrapper"></div>

Luego creamos nuestros comandos CSS para crear un ancho mínimo de 750px:

[css]
#wrapper {
    min-width: 750px;
    width:expression (
        document.body.clientWidth < 750? "750px" :
        "auto"
    );
}

También podrías querer combinar este ancho mínimo de 750px con un ancho máximo de 1220px:

#wrapper {
    min-width: 750px;
    max-width: 1220px;
    width:expression (
        document.body.clientWidth < 750? "750px" :
        document.body.clientWidth > 1220? "1220px" :
        "auto"
    );
}

Otra Alternativa para un alto mínimo sin Javascript es usar un muy buen hack de Dustin Diaz.

#id {
    min-height: 100px;
    height:auto !important;
    height:100px;
}

4. Easy Selectors (Selectores sencillos)

La mayoría de los hacks de CSS lidian con los bugs de selectores. Abajo hay una lista de las diferentes versiones de IE y los comienzos de los selectores que son conocidos para seleccionar elementos en ellos. Todos esos selectores usan CSS válido.

• IE 6 y anteriores

  * html {}

• IE 7 y anteriores

  *:first-child+html {} * html {}

• IE 7

  *:first-child+html {}

• sólo IE 7 y browsers modernos

  html/body {}

• sólo browsers modernos (excepto IE 7)

  html//**/body {}

• Reciente versión de Opera 9 y anteriores

  html:first-child {}

5. Whatever: hover (cualquier-elemento: hover).

El selector :hover permite implementar efectos visuales al producirse este evento (algo así como un mouseover) en elementos html.
La mayoría de los browsers no tienen problemas, excepto IE. Para esto existe una solución. Explayaremos más adelante sobre este caso, por lo pronto dejamos este enlace que explica su solución.

6. Transparencias en PNG
IE no soporta las transparencias de imágenes PNGs. Cuando uno publica este tipo de archivos la transparencia se pierde reemplazándose por un fondo grisáceo horrible. Y olvidemos nos de imágenes Gif; ya que primero: su calidad es acotada; segundo: tampoco soporta fondos parcialmente transparentes (canal alpha). Gif permite una imagen recortada, pero no transparencias.

Existe un Hack para que IE pueda imprimir en forma correcta las transparencias. Estos son los pasos:

• Usamos un script .htc y un gif transparente. Puedes descargar ambos archivos en http://noupe.com/img/transparentpngs.zip
• Ahora sólo sube estos 2 archivos en dónde quieras tener tu archivo IE.css
• Agrega una simple línea de código CSS en el archivo IE.css: img.pngfix{ behavior:url(pngHack.htc);}

Otra solución puede encontrarse en Komodomedia

7. Stylegala- No más Hacks CSS.
Este método simplemente detecta el tipo browser y versión para que luego, en función de estos datos, el servidor entregue al cliente una hoja de estilos css acorde.
Prácticamente toda la tarea se encuentra del lado servidor, el cual adpta el estilo del site. Se puede utilizar PHP, ASP, etc. Este es un ejemplo actual realizado en PHP denominado No More CSS Hack.