En el trabajo de desarrollo en HTML + CSS, surgen varios problemas cuando se pretende que los sitios se desplieguen bien en diversos browsers y plataformas. Más aún cuando se trata de sitios grandes, portales, como los que me ha tocado construir o arreglar últimamente. Pero para paliar esto, nos aprovechamos de los mismos errores de los programadores en el rendereo del CSS en algunos browsers, como Internet Explorer (IE) por ejemplo, para solucionar precisamente esto. Por ejemplo, si una columna por X motivo de ve más ancha en IE que en Firefox y esto afecta a otros floats cercanos, esto se corrige en el CSS:

#columna {
width: 300px;
_width: 290px;
}

En este caso, achicamos la columna solamente en IE 10 pixeles, usando el ‘_’ antes de la propiedad ‘width’. Con esto, IE solamente hará caso a la propiedad con ‘_’ e ignorará la otrapor alguna extraña razón. Firefox ni se dará cuenta de que existe, ya q realmente no existe, no es válido en CSS. Un dato: cuando construyo un layout entero en CSS, primero lo hago fijándome encómo se ve en Firefox, ya que es el que mejor renderiza el CSS y el que mejores resultados se obtiene. Con esto, me aseguro que Safari, Netscape, Mozilla, Camino, Opera se vean no bien, pero decentes. Luego me preocupo de los hacks para IE y que se vea bien, ya que el cliente y el 80% (y bajando, por suerte) del mundo que navega usa este browser monopólico.

Hace poco me tocó la mala suerte de tener que hacer que un sitio no menos importante se vea aceptable en IE5 para Macintosh, fácil el peor browser que ha existido. Fue un suplicio, pero finalmente logré que se viera bien un diminuto menú (explicaré unos tips en otro post), y hablando con la persona encargada, me comentó que ya no hacen soporte para este browser, y si llaman reclamando, les dicen cortesmente ‘mejor usa Firefox’. Buena respuesta.

Me puse a pensar.. ¿Qué hacer para aportar a una mejor usabilidad, y un mejor diseño web? Por algo el uso del padrón Web (W3C) y la moda que es el CSS actualmente se demoró tanto en aparecer, pues este ‘lenguaje’ no es nada nuevo, existe desde 1996. Para las personas (me incluyo) es mucho más fácil armar con tablas un sitio, ya que se verá bien a la primera en casi todos los browsers… Pero ahora la situación es diferente. Debemos abogar por una mejor calidad y accesibilidad en la nacegación y despliegue de los contenidos. Así como un médico debe hacer lo mejor posible por un paciente, nosotros no debemos ser flojos y facilistas y tomar el camino menos tortuoso.

Actualmente mi batalla va en dirección a los browsers. Especialmente IE. Si la mitad mas 3/4 lo usan, no quiere decir que es porque es bueno. Es porque ya estaba instalado y a la gente no le importa buscar una alternativa, creen que es el indicado. Si 2/5 usan IE5, mal es. Se debe abolir ese browser, muy antiguo y ya descontinuado. Hay 2 simples pasos que como diseñadores / desarrolladores podemos contribuir a que por lo menos hagan un upgrade.

  • Usar @import para importar (no atachar) la hoja de estilo (CSS), de la siguiente manera

    Esto porque esta manera de importar el CSS no es válido para browsers antiguos. Así de simple. No van a cargar la hoja de estilos, y el sitio no se va a ver bien. Aquí hay un link con una tabla de browsers q lo soportan o no.

    • Usas uno de los banners entregados por W3 Junkies. Es una buena iniciativa, con 3 bonitas imagenes (si no te gusta ninguna, tb tienen el PSD para q lo modifiques a tu criterio). Están en formato PNG, que como muchos saben, no es soportado por IE (hasta ahora) y ademas el CSS que usa para desplegarlo en el rincón inferior-izquierdo del sitio no lo lee bien IE. Al hacer click sobre la imagen, muestra una lista de buenos browsers e invita a probarlos. Simple y directo.

A todo esto, decidí escribir algo sobre esto al leer un artículo de Stylegata , No More Hacks. Y hurgueteando por Google, descubrí que no somos pocos los que pretendemos lo mismo: