No más Hacks (actualizado)

4/nov/2005 7

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

    <style type="text/css" media="all">
    <!–
    @import url("file:///D|/mein/catalizado/armando/css/layout.css");
    –>
    </style>

    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:

 

Comentarios

  1. Ismael [#]

    Antes que nada, felicitaciones por el blog.
    Como sabrás, la importancia de separar el contenido de la presentación (css + html) involucra al menos 2 factores:
    1. facilita el rediseño, pues modificar el diseño en los archivos css no implica “dentrar a picar” en el contenido. Esto hace posible que diseñadores, redactores y programadores trabajen en el mismo proyecto sin sobreescribir el mismo archivo.
    2. buscadores. Al sacar todo el código de diseño del html, se maximiza la densidad del contenido (texto) con respecto al total del código. Es decir, las palabras de tus textos son más relevantes para los buscadores. Para esto es imprescindible, además de usar CSS para el diseño, estructurar el HTML con las etiquetas apropiadas (HTML semántico). Los buscadores evalúan de forma distinta los contenidos de una etiqueta o un , por ejemplo.

    Estos dos puntos abaratan los costos de producción, por un lado, y hacen tus archivos más fáciles de encontrar y navegar. Es por esto que debemos apoyar navegadores que respetan los estándares (Firefox), pues una vez que el resto de los navegadores lo sigan (IE incluído), saldremos todos ganando, tanto desarrolladores como clientes e incluso los usuarios comunes.

    Sobre IE Mac: es cierto que actualmente es un pésimo navegador, pero en su tiempo fue un adelantado: uno de los primeros en implementar aunque sea algunos de los estandares de la W3C corréctamente (el problema es que otros no los implementó en absoluto o mal). Hasta el dia de hoy, IE Mac implementa ciertos elementos de CSS más estríctamente que los demás.

    Saludos colega!

  2. Administrador [#]

    recemos para q micro$oft no se equivoque (mucho) con IE7……

  3. Ismael [#]

    Si. De IE7 depende nuestra felicidad o miseria absoluta.

  4. Álvaro [#]

    “Con esto, IE solamente hará caso a la propiedad con ‘_’ e ignorará la otrapor alguna extraña razón”

    A continuación, la (no tan) extraña razón:
    Si redefines una atributo, será la última definición la que tomará el browser. Como IE interpreta que _(atributo) es igual a (atributo), se queda con la última definición. El resto de los navegadores ignorará el _(atributo), por lo que se quedarán con la primera definición.
    Invierte el orden de la definición y verás como IE se queda con la última.

    No me parece buena idea boicotear los navegadores antiguos… es cierto que es una lata tener que soportar engendros como el IE3, pero el problema no está allí. Piensa en Lynx. Lo importante no es que el diseño se vea exactamente igual en todos lados, lo importante es que el diseño se “degrade grácilmente”, pudiendo accesar la información independientemente de si aparece un lindo flash o no.

    Por otro lado, los navegadores viejos nos van a perseguir muuuuuucho tiempo… Cuando pienso en mi mamá viendo un banner que dice “actualice su navegador” y pienso en tooodo lo que eso significa para ella, me doy cuenta que no podemos dejar de lado a la gente que no tiene más habilidades web que hacer click en los vínculos. Es como poner rampas para discapacitados, pero en digital.

    Finalmente (antes que esto salga más largo que el artículo), te felicito por la iniciativa. Lograr que Ismael comente acá es un logro por sí mismo…

  5. Ismael [#]

    No creas, sin desmerecer este blog en absoluto, tiendo a comentar descriteriádamente en todos lados para ser aceptado socialmente.
    En el tema que nos ocupa, en general se puede elaborar una hoja CSS para todos los browsers actuales (incluído IE6) sin recurrir a hackeos tipo _(atributo).
    Por mi experiencia reciente, es fundamental incluír un *{padding:0;margin:0;} en la primera linea de tu CSS. Esto anula las diferencias de padding y margin que los distintos browsers aplican a los elementos html por defecto. Aún así, hay ocasiones en que hackear es inevitable. En estos casos es recomendable agrupar los hacks en el mismo lugar, sobre todo pensando en el futuro. Para este caso prefiero el modo * html {…}, también conocido como “el hack de la estrella” o Star hack.

  6. Administrador [#]

    Tranquilos, q tratare de abordar todos los tipos de hacks habidos y por haber. la idea es mostrar los pros y contras de cada uno, cabe al diseñador elegir si usarlo, cuando y como. sobre el tema de boicot a los browsers antiguos, me refiero en la medida de lo posible, y por supuesto es una opinion subjetiva. Pienso q cuando una web es mia o de alguien de confianza, la hare solo para q la vean cierto target y el resto mala suerte. Hay casos q no es asi, no es posible. De ahi viene la habilidad de quien desmenuza el codigo. No hay mejor dicho q el de WordPress: ‘Code is Poetry.’

  7. blogdenotas [#]

    TODOS tus artículos son interesantes. TODOS.
    Ahora, el unico detalle con éstos arreglos es que no valida el css (el uso de #). Pero es un detalle, por el resto, excelentísimo!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab