martes, diciembre 30, 2008

Hacks CSS... gracias MS!

Hace poco estuve trabajando en el desarrollo de un sitio... y ya que hoy en día está de boca el término de cross-browsing, y creyendo que el mismo ya lo tenía dominado, vendí el producto como tal... "lo que ven aquí (haciendo mención al diseño original una vez aprobado), lo van a ver igual en cualquier browser"... 

En la fase de desarrollo suelo trabajar con firefox como navegador base (ya que el mismo ofrece varios módulos que resultan de utilidad al momento de debugar), al momento que logro que el diseño elegido esté completo y se visualiza correctamente aquí, trabajo con IE7 para afinar detalles y demás, porque clásica, a MS no le gusta seguir los estándares que prácticamente todos los demás navegadores sí.

No obstante, y porque el producto se deseaba para ayer, clásica del cliente, el producto se publicó con una pequeña línea blanca que no lograba eliminar de IE7. Un par de días después de la publicación del mismo, logré eliminar la línea blanca, y yo confiado que todo estaba resuelto.

Un par de días después, el cliente me llama y me dice: "vimos el sitio en otra computadora, y salía todo como desordenado, yo necesito que eso se vea bien en todos lados... qué pasó???"... a todo esto yo disque, debe ser que está viendo caché... y luego de una reunión que tuvimos, me mostró el error... y para mi sorpresa... era IE6... 

Una sesión de rompedera de cabeza siguió ante este descubrimiento... y a pesar de que anteriormente había leido algo al respecto, hasta este entonces fue que vine a tratar con los famosos hacks CSS.

Muchas páginas visité... pero no fue hasta que encontré un artículo publicado por MoebiuZ (http://www.moebiuz.org/microtrucos/.../) que di con el asunto. A diferencia de otros artículos con que me topé que decían cosas como: hack definitivo y títulos de ese tipo... este artículo fue el que me ayudó a resolver la visualización cross-browsing del sitio.

Lo que más me sorprendió... es que los hacks, o por lo menos hasta donde entendí, han sido creados para compatibilizar el diseño con los productos IE de MS. Como dirían: "hasta cuándo la lucha?".

En resumidas cuentas... los hacks funcionan de la siguiente forma: 

  • a nivel de html, se asigna la clase al tag deseado
  • en el archivo .css se definen las clases para los navegadores deseados (ver enlace proporcionado para mayores detalles)
  • cuando le navegador carga la página, el mismo se encarga de interpretar su definición de clase en el archivo .css, e ignorar aquellos que no logre interpretar.
En espera de que el artículo les sirva de introducción al tema, contada a través de una experiencia vivida, los dejo una vez más con el enlace al artículo donde se explica en detalle el tema: http://www.moebiuz.org/microtrucos/hacks-css-para-mostrar-paginas-casi-identicas-en-firefox-ie6-e-ie7/.