metal.ize

Después de publicar el meme de la validación del blogroll y leer los comentarios de algunos usuarios (especialmente diarioTHC) recordé que tenía desde hace ya tiempo ganas de comentarles cómo evitar los hacks que no validan en su CSS para Internet Explorer (que es el que practicamente abarca todos los hacks que conocemos).

La idea y razón es sencilla: menos código y siguiendo los estándares web.

El problema

Como muchos sabemos, Internet Explorer sigue sus propias reglas al momento de leer una página web. Esto nos ocaciona muchos dolores de cabeza y nos obliga a buscar maneras alternativas de lograr que este navegador funcione como queremos. Muchas de estas maneras son logradas por medio de hacks que, por algúna razón, sólo ese navegador lee. El hack más conocido para IE es el famosisimo star-html hack:

Claro que este hack no sería nada sin el Mac-hack, que esconde el CSS de IE5 para Mac. Este funciona utilizando comentarios en CSS:

Por alguna extraña razón, la diagonal antes del asterisco de cierre del primer comentario evita que IE5-Mac cierre el comentario y piensa que este sigue abierto, así que todo lo que esté dentro de ese comentario y hasta el siguiente cierre de comentarios será ignorado por IE5-Mac.

En fin, hay millares de hacks para IE y todos son bastante usados hoy en día. Todo es bueno y bello, pero a veces estos hacks son demasiado largos (y esto, en ciertos casos, es inaceptable) o complicados o simplemente queremos tener un código limpio y sin errores de validación.

Las alternativas

Siempre hay alternativas a estos casos. Pondré algunos ejemplos y les iré mostrando cómo evitar los hacks y lograr que Internet Explorer se comporte como debe. Primero me voy contra el star-html hack, que es el más usado y el que ocaciona más errores de validación. Pondré como ejemplo el Holly Hack. Este hack consiste en aplicar un height: 1% a una caja con problemas (tiene que ver mucho con floats, echenle una leída al artículo del hack ). La cosa está en que solamente Internet Explorer debe tener aplicada esta altura, pues en otros navegadores podría causarles problema (aunque en la mayoría, las cajas se expanden automaticamente... pero en fin). Ahora bien, el código que proponen en la página del hack es el siguiente:

Como ven, esconden el hack para IE5-mac y ponen el hack solo para Internet Explorer (el resto de los navegadores ignora el * html). Claro está, no valida (el star-html hack no es válido). ¿Cómo arreglamos esto? Les presento a !important. Esta pequeña palabrita hace maravillas si es usada correctamente. El siguiente código es equivalente al código anterior:

Como ven, eliminé el star-html hack, mantuve el hack para IE5-Mac (que no tiene problemas de validación) y agregué un height: auto !important. ¿Cómo funciona? Bueno, como saben, las hojas de estilo en cascada, como su nombre lo indica, leen la información en cascada. Esto quiere decir que si ponemos dos atributos iguales para el mismo elemento, el segundo tomará el lugar del primero. Un ejemplo:

Sin el !important, todos los navegadores mostrarían el color verde en lugar del rojo, simplemente porque así está el orden. Los navegadores modernos (Firefox, Opera, etc.), al leer el !important le dan más importancia a este elemento, sin importar su posición en la hoja de estilos (claro está, si tienes varios !important a saber qué pasa). Internet Explorer 6 y menores ignoran completamente el !important, por lo que el color verde toma el lugar del rojo. Esta es la forma de eliminar el 80% de nuestros hacks en nuestras hojas de estilos.

Otra forma de aplicar estilo a IE6 o menor es el uso de combinadores. Al que me refiero especificamente es a >. Un ejemplo:

Todo lo que esté dentro de ese código será ignorado por IE6 o menor. Llega a ser bastante útil. Ahora bien, qué tal que necesitas esconder la información de IE5, pero IE6 debe verla (raro, pero si me ha llegado a pasar). Bueno, par eso tenemos la hermosa línea diagonal invertida:

De nuevo, usamos la propiedad de las hojas de estilo en cascada. Todos los navegadores (incluido IE6) usaran el valor de 710px para el ancho; pero IE5 y el IE5.5 lo ignorarán completamente. La diagonal invertida hace que estos dos navegadores "borren" la t que está despues de ella y por lo tanto, tienen un atributo widh que no existe y, por lo tanto, ignoran. Este hack también valida.

¿Y si necesitas aplicar CSS sólo a IE-Mac? Bueno, para eso tenemos un juego de comentarios en CSS:

Esta regla será aplicada solamente para IE-mac.

La última solución:

Y bueno, siempre habrá veces en que estas alternativas no sean suficientes (aunque con los hacks arriba mencionados la gran mayoría de las veces debería irles bien). Para esos casos, tenemos los hermosos comentarios condicionales. Aunque la información y los comentarios de estos son bastos en la web, veo que aún son muy poco usados, y no le veo razón. Es genial contar con ellos. Su estructura es un comentario de HTML vil y simple que todos los navegadores ignoran... menos IE. IE leera todo lo que esté dentro de estos comentarios, y eso significa que podemos crear un archivo css separado para IE solamente. ¡Genial! Les pongo un ejemplo. Supongamos que tenemos esto en nuestro css global:

¿Pero qué tal que queremos que sea verde en IE? Creamos un archivo llamado ie.css y lo agregamos a nuestro header de nuestro archivo .html de la siguiente manera:

Y cuando veamos la web en IE, veremos cómo el fondo de nuestra web es verde. Ojo, que el comentario condicional con la nueva hoja de estilos para IE está DESPUÉS de la principal. Esto es importante para que funcione (de nuevo, se leen en cascada). Pero esto no es todo lo que los comentarios condicionales nos ofrecen. También podemos elegir una versión de IE solamente:

Si miran el código fuente de metal.ize, verán el código de arriba en mi head. Dentro de estos archivos css puedo meter las reglas que quiera aplicar sin necesidad de usar hacks y se aplicaran a las versiones menores a IE6 (para hacks generales, mas que nada bugs que IE tiene) y para verisones menores a IE5 (para arreglar el horrible modelo de caja de IE5...). Esta es la forma más limpia y ordenada de manejar las diferencias entre navegadores, y en verdad que se me hace muy importante que sea más utilizada, ya que con la entrada del IE7, muchos de los hacks que usabamos han quedado inutilizados, pero IE7 se sigue comportando como IE6.

Si bien, quieren crear un estilo que sea visto por todos los navegadores menos Internet Explorer, puedes usar el siguiente código:

La cosa está en que IE no soporta las reglas del @import, por lo que ignorará esta inclusión, mientras que los navegadores modernos la incluirán sin problemas.

Claro está que estos métodos no son la panacea universal y seguro que en algún momento deberán usar por fuerza algún hack, sea para IE o para cualquier otro navegador; pero definitivamente si siguen estos consejos podrán conseguir hojas de estilos válidas y funcionales en el 99% de los casos.