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

10/Sep/2009 84

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

Comentarios

  1. Jasonrag [#]

    http://prednisonest.com/# prednisone for sale

  2. Epwxkk [#]

    Hdedjn – furosempi.com Zbwphn zakspw

  3. Jasonrag [#]

    https://prednisonest.com/# canada buy prednisone online

  4. Sxtqjl [#]

    Stqcfh – diflucan buy Kyrtyg tjjlaw

  5. Newspaper sample pdf [#]

    Really no matter if someone doesn’t understand afgter that its up to other users
    thzt they will help, so here it occurs.
    http://mynewlifechurch.com/newspaper-sample-pdf.pdf
    Newspaper sample pdf
    Gann trading system pdf https://elearning.annajahtakengon.sch.id/what-are-documentary-credits.pdf

  6. Ajhrhj [#]

    Zmlpwh – order tinidazole online Gcwrvo gonwcd

  7. Qiwcxq [#]

    Sjyzcz – cialis brand online Dclnse pcjnqf

  8. Tyiyul [#]

    Bkpbju – pharmacy online tadalafil Mbqtwo lqafko

  9. Jasonrag [#]

    https://gabapentinst.com/# neurontin canada online

  10. Nryddy [#]

    Jmdlxl – buy viagra mexico Tulvis rgtwzr

  11. Sample consulting invoice doc [#]

    Link exchang iss nothing else except it is simply placing the other
    person’s webpage link on your page at appropriate place and
    otber person wwill akso do same in support of you.
    http://rueinsaz.co%5C/sample-consulting-invoice-doc.pdf
    Sample consulting invoice doc https://fortofino.com/wp-content/uploads/2021/03/mba-question-papers-with-answers-pdf.pdf

  12. Sagxhf [#]

    Komudb – where can i buy viagra online in india Ylbtdc dtwlyw

  13. Scottsnuro [#]

    http://zithromaxproff.com/# buy azithromycin zithromax
    zithromax generic price

  14. Eqspfz [#]

    Umyuqr – write my college application essay Yqrvnq agxdsm

  15. Scottsnuro [#]

    https://zithromaxproff.com/# zithromax generic price
    zithromax over the counter

  16. Lioggy [#]

    Mqzzxi – tvo homework help Sunxmg cgyxpd

  17. Accounting information system definition pdf [#]

    What’s up i aam kavin, its my first occasion to commenting
    anywhere, when i read this artihle i thought i could also make comment due
    to this brilliant paragraph.
    https://unthinking.org/accounting-information-system-definition-pdf.pdf
    Accounting information system definition pdf
    Samsung galaxy tablet 89 manual pdf https://dev.annajahtakengon.sch.id/altivar-12-user-manual-pdf.pdf

  18. Use case document sample [#]

    It’s very trouble-free to find out any topic oon net as compared to
    textbooks, as I found this piece of writing at this web page.

    https://awkwok.com/use-case-document-sample.pdf
    Usee case docment sample
    Information systems project management pdf http://mynewlifechurch.com/fruits-flashcards-printable-pdf.pdf

  19. Mejqje [#]

    ivermectin 1 cream – mivermectin.com cost of ivermectin

  20. Jdxvuz [#]

    ivermectin price uk – stromectol 0.5 mg ivermectin 200mg

  21. Kbjwtx [#]

    ivermectin 10 ml – ivermectin new zealand ivermectin 250ml

  22. Uuwzgm [#]

    ivermectin oral solution – order stromectol online ivermectin 0.08

  23. Omcika [#]

    ivermectin 0.5% lotion – site ivermectin 3mg pill

  24. Aqcufi [#]

    ivermectin rx – ivermectin pills buy ivermectin online

  25. AnthonyGlymn [#]

    buy viagra 100mg viagra without a doctor prescription – viagra from canada
    viagra without a doctor prescription usa

  26. AnthonyGlymn [#]

    female viagra viagra professional – free viagra
    order viagra online

  27. Bxgngl [#]

    plavix for sale – plavix coumadin plavix 75 mg canada

  28. AnthonyGlymn [#]

    generic viagra buy viagra – generic viagra available
    viagra professional

  29. Uyzcjz [#]

    plavix 75mg – plavixheart clopidogrel bisulfate plavix

  30. BradleyTonuh [#]

    can i buy cialis online canada cialis online – how to buy cialis online uk
    buy cialis online best price

  31. Frgvvl [#]

    ed men – the best ed pills for men mens ed pills otc

  32. Nizbej [#]

    ed fe pills – shark fin ed pills best gas station pills for ed

  33. BradleyTonuh [#]

    buy cialis online cheap buy cialis drug – generic cialis daily pricing
    canadian pharmacy cialis 20mg

  34. BradleyTonuh [#]

    how to get ciails without a doctor buy cialis online overnight – buy cialis tadalafil uk
    cialis without prescriptions canada

Deja tu Comentario

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

CSSLab