Este 2009 ha sido un año lleno de transiciones: llega IE8 pero aún persiste el fantasma de IE6; finalmente se ve un futuro más nítido con HTML5 y CSS3, pero persisten las limitaciones del soporte por parte de los fabricantes de browsers. Precisamente en ese purgatorio en que nos encontramos actualmente es cuando debemos ser más hábiles sobre qué, cómo y cuando utilizamos las herramientas que más nos acomoden. Personalmente y como he comentado anteriormente, he comenzado a utilizar propiedades CSS3 que me hacen utilizar menos tiempo y recursos en lograr los mismos efectos que antes me limitaba; me refiero a text-shadow, border-radius, [opacity][2] y [rgba()][3] entre otros. Si utilizas un browser moderno, los podrás apreciar sin problemas; caso contrario, de igual manera se desplegará la información pero la experiencia no será la misma – lo que se denomina como graceful degradation ó, a falta de una traducción literal, degradación elegante-. Tengo la fortuna de trabajar con clientes y colegas que comparten esta forma de trabajar, siempre mirando hacia adelante y no frenándose debido a limitaciones ajenas a nuestro poder.

Desarrollar pensando en 3 versiones de browser de una misma empresa, cada uno menos peor que el otro, es un problema grave. En este artículo, quiero compartir mi experiencia sobre cómo lograr los menos problemas posibles, creando un layout que se vea de manera similar en la mayoría de los navegadores disponibles en el mercado. Básicamente enunciaré algunos consejos prácticos que por mi experiencia ayudan en esta ardua tarea:

Usar un buen reseter CSS.⌗

No pretendo [difundir el mío][4], pero sinceramente no me ha dado problemas de ningún tipo y me acompaña siempre en mis grandes proyectos. Con él, me permito reescribir los estilos que defina como prioritarios, sin perder tiempo en arreglar los defectos de IE6. Un impresindible en grandes proyectos.

Entender cómo funciona IE6.⌗

No basta con cabecearse cuando encuentras un descalce en tu layout que piensas funciona perfecto en todos los navegadores, hasta que lo pruebas en IE6. Deberías conocer -y prevenir- que IE6 tiene problemas [posicionando relative/absolute/fixed][5], con el [modelo de caja][6], [doble margen a elementos flotados][7], utilizando z-index, soportando [canal alpha para archivos PNG][8], con porcentaje como unidad de medida, con [overflow][9], con pseudo-classes, con [min-height][10], max-height, min-width, max-width… etc, etc, etc. Con eso en mente, puedes evitar muchos problemas desde el comienzo.

Tener mucho cuidado con IE7.⌗

Microsoft lo presentó como una necesaria actualización a IE6, pero fue un gran FAIL. Arregló algunos bugs, pero sacó a luz otros nuevos; realmente me intriga qué sucede con el departamento de informática de esa compañía, cómo logran caer en los mismos errores una y otra vez. El principal problema de IE7 es el uso de position: relative/absolute aunque me he deparado con [algunos errores menores][11] por ahí.

Usar meta-tag para IE8.⌗

Siento que Microsoft se apresuró mucho en lanzar IE8, probablemente presionada por las contínuas mejoras de sus compeditores Opera, Safari y Mozilla. A raíz de esto, he visto como de una actualización a la siguiente el comportamiento de este browser respecto al renderizado de HTML y CSS es muy diferente, muy pero my diferente; a tal nivel de que un cliente reclame que su nuevo y flamante sitio no se vea bien en este navegador, y antes que yo pudiera investigar qué estaba sucediendo el cliente me comenta:

Bah, ahora se ve bien… actualice IE8 anoche y se arregló.

Mi solución hasta ahora es una alternativa que viene de la misma casa de Redmont: una etiqueta que hace que IE8 se comporte como si fuera IE7; así de simple. Hace lo mismo que el Compatibility Button, pero lo ejecuta desde el comienzo de la carga del documento:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

Probar, probar, probar…⌗

Aunque seas un master de las hojas de estilo y del HTML, no deberías dejar para el final probar en los principales browser, y menos aún confiarte del preview de Dreameaver (grave error); debes probar casi que a cada nueva definición de propiedad. El costo de volver atrás es muy alto como para arriesgarte, no pierdas tu tiempo por confiarte demasiado. Probando en Safari y Firefox primero, luego en IE7 e IE6 para los detalles menores… pero nunca, nunca maquetar para IE: lo más seguro es que tendrás que deshacer más de lo que ya hayas hecho.

Mi lucha (contra IE6)"" [2]: http://www.csslab.cl/2007/01/24/transparencias-a-prueba-de-browsers-2/ “Enlace en CSSLab a “Transparencias a prueba de browsers”” [3]: http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/ “Enlace en CSSLab a “Tip Precoz 3: RGBa”” [4]: http://www.csslab.cl/2007/10/18/css-reseter/ “Enlace en CSSLab a “CSS Reseter”” [5]: http://www.csslab.cl/2007/05/11/absolutamente-si/ “Enlace en CSSLab a “Absolutamente sí”” [6]: http://www.csslab.cl/2006/12/14/como-caja-el-modelo/ “Enlace en CSSLab a “Como Caja: el Modelo”” [7]: http://www.csslab.cl/2007/12/17/margen-duplicado-para-ie6/ “Enlace en CSSLab a “Margen duplicado para IE6"” [8]: http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/ “Enlace en CSSLab a “PNG’s transparentes en IE6"” [9]: http://www.csslab.cl/2008/07/07/overflow-en-ie6/ [10]: http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/ “Enlace en CSSLab a “Alto mínimos para IE6 (y el resto, claro)”” [11]: http://www.csslab.cl/2006/07/28/se-viene-ie7-&iexcl;huid/ “Enlace en CSSLab a “Se viene IE7…””