Cómo superar IE6-IE7-IE8 (y no morir en el intento)

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 y rgba() 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, 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, con el modelo de caja, doble margen a elementos flotados, utilizando z-index, soportando canal alpha para archivos PNG, con porcentaje como unidad de medida, con overflow, con pseudo-classes, con min-height, 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 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 <meta> 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.

Links

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Overflow en IE6

Ayayay cuántos dolores de cabeza he tenido a causa de Internet Explorer 6. Son bugs, fallas y mañas múltiples que se necesitan dotes de malabarista para conocerlos (ni siquiera trato de entenderlos; sólo sé que existen) y buscar una solución. He abarcado un montón de ellos aquí en CSSLab, y al parecer este es uno [...]

Podcast 04

Muchos temas me son más fáciles de expresar verbalmente que a través del teclado, principalmente cuando son de opinión. Y compartir la opinión, tanto mía como la de ustedes ha sido uno de los principales motivos por los cuales mantengo este sitio. Aparte de compartir conocimientos, crear un lugar -aunque sea virtual- para concentrar y [...]

Manifesto al diseñador

Manifesto al diseñador

El diseño está en todos lados, y como diseñador suelo ser muy crítico cuando lo veo aplicado en web. Aunque ya no ejerzco mi profesión hace muchos años, sí puedo opinar y hacer valer mi experiencia cuando trabajo con un diseñador y cuando tengo que trabajar con un diseño ajeno. Por ello, me gustaría compartir [...]

  1. Hola, no quedaría mal tampoco, mostrar un enlace con la mayoría de los bugs para IE y como solucionarlos:

    http://www.cssblog.es/listado-de-bugs-en-internet-explorer-6-7-y-8/

    Un saludo.

    Pedro
    10 / Septiembre / 2009

  2. Es increíble ver como microsoft esta empeñado en querer mantener su antiguo monopolio con internet explorer sin preocuparse en ofrecer un navegador verdaderamente competente, tengo ya muchas años peleándome con ie y me sorprende ver como microsoft se supera a si mismo en cada versión para ofrecer un navegador mas incompatible e inseguro sin tener en cuenta que en cada versión complican mas el proceso de maquetacion de una web y dificultan y retardan la innovación de la web

    luis rojas
    10 / Septiembre / 2009

  3. Luis rojas, estoy totalmente deacuerdo con tu comentario.
    Y añadir que maquetear en firefox usando plugins es una alternativa mas que confiable a la hora de tener que ver como que da en IE .

    Jose Vargas Molina
    11 / Septiembre / 2009

  4. necesito descargar mi frustración con explorer 6.

    claudio merino
    11 / Septiembre / 2009

  5. La mejor solución que he encontrado para combatir el problema de compatibilidad de IE es esta: http://code.google.com/p/ie7-js/

    Lo único que hay que hacer es incluir una linea de Javascript, y IE (6 y 7) automáticamente va a comportarse como se debe. O sea, va a funcionarse como Firefox/Safari sin necesidad de escribir lineas extras de códigos. No más hacks, no más bug de doble margen, no más peekaboo, no más dolores de cabeza.

    La mejor parte de este script es que puedes usar selectores avanzados de CSS2/CSS3 como ‘min-midth’, ‘max-height’, ‘:nth-child()’, ‘:last-child’ y muchos más! Ve un listado de selectores y porpiedades que puedes usar aquí, http://ie7-js.googlecode.com/svn/test/index.html

    Ahora imagínate como seria si todo lo que puedes implementar en Firefox/Safari también va a funcionar perfectamente en IE sin necesidad de ‘hackearlo’ o escribir una hoja de estilo por separado.

    Hay que decir que el JS se incluye sólamente para IE, los demás navegadores no son afectados. No es obstrusivo y está en continuo desarrollo por el gurú Dean Edwards.

    Yo vi una luz al final de tunel cuando me topé con esto, es increíblemente útil, especialmente para los que trabajamos en la front-end, por lo menos hasta que Microsoft saqué una versión decente de IE, IE-X (IE10) podría ser?

    Saludos

    5h4rk
    12 / Septiembre / 2009

  6. ¡Que bueno!, Internet Explorer ya tiene mayor compatibilidad con los sitios, sin embargo es de vital importancia mantener nuestras aplicaciones actualizadas, incluyendo el browser para trabajar y visualizar en óptimas condiciones cualquier página.

    DanielTech
    17 / Septiembre / 2009

  7. Otra forma es instalar el pluggin de google, para convertir a IE6 en un Chrome. http://www.anieto2k.com/2009/09/23/convierte-internet-explorer-en-google-chrome-con-el-plugin-google-chrome-frame/

    Jurasec
    25 / Septiembre / 2009

  8. Maldito explorer… porque nos haces esto :(

    Alexis Diaz
    02 / Octubre / 2009

  9. no jodas Pedro primero aprende CSS y luego create un blog no? porfa

    Alex
    26 / Octubre / 2009

  10. Mudanza en puerta!!!! de ie6 a ie8, sigamos con la propuesta para tener un browser en el q no se pago por la prueba por su seguridad… http://www.adiosie6.com

    Chko!
    26 / Octubre / 2009

  11. ¿qué onda? yo también estoy de a cuerdo con la actualización a ie8 es un navegador excelente y además ya va a ser muy necesario ahora que ha salido a la luz windows 7

    Paola
    27 / Octubre / 2009

  12. Desde luego, yo siempre que hago una web, como bien sugerís, no maqueto para IE; lo hago para Firefox y Chrome (el futuro, como no se pongan las pilas los de Mozilla), y también, cómo no, cuando estoy desarrollando, a cada pequeño cambio, un F5 en los tres navegadores…

    Lo que me sorprende es que siendo estándares internacionales cada navegador vaya a su bola con algunas cosas. Especialmente el IE, que es el que más problemas da. Al final, cuando algo sale mal en Firefox sale mal en Chrome, pero cuando en éstos dos aparece correcto, más de una vez he tenido que retocar especialmente algo para IE.

    ¿No es una buena solución hacer hojas de estilo independientes para cada navegador, igual que se hace en la programación para móviles y cosas así?

    estemon
    11 / Noviembre / 2009

  13. Hey 5h4rk, si esto funciona como tu dices entonces es una excelente solución, lo voy a implementar, gracias por el tip.

    Saludos!

    emerz
    18 / Noviembre / 2009

  14. Hola a todos, la verdad soy un aprendiz por rigor de este mundillo; y la verdad es que a mi corta experiencia me doy cta. que IE es un browser totalmente arcairco y poco funcional; yo trabajo con CSS que y nunca he podido hacer ver bien mi sitio..estoy totalmente frustado..( http://www.imagentotal.cl ) en todos los otros buscadores se ve bien el pase de diapositivas, excepto en IE 8-7-6 etc…alguien me puede decir cómo puedo hacer que el Slide quede en la capa donde tiene que ir?…saludos a todos y gracias por el espacio FELICITACIONES!!!

    Christian Erazo
    12 / Julio / 2010

  1. [...] Cómo superar IE6-IE7-IE8 (y no morir en el intento)www.csslab.cl/2009/09/10/como-superar-ie6-ie7-ie8-y-no-morir... por mariano hace pocos segundos [...]
    Cómo superar IE6-IE7-IE8 (y no morir en el intento)
  2. [...] as a Freelance Logo Designer? - Tarifas de Diseño - Design agencies and studios on Twitter - Cómo superar ...
    Metropolis

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 30 veces