Contenido

Como conseguir compatibilidad entre navegadores siempre

19 jun

+ 22

Cuando has terminado una aplicación y la abres con un navegador diferente al que lo habías hecho durante la fase de desarrollo, te das cuenta de que te queda prácticamente el mismo tiempo que has tardado en desarrollar la aplicación puliendo los detalles en los diferentes navegadores.

Este es el mayor problema con el que nos encontramos los desarrolladores web y por el que más me han solicitado ayuda por mail. Ya hemos hablado varias veces de por que ocurre esto, y básicamente es por que cada equipo de desarrollo encargado de desarrollar cada uno de los navegadores interpreta de una forma u otra los estandares definidos por la W3C. De ahí que aparezcan tests con los que la W3C se asegura de que los navegadores han entendido lo que solicitaban.

Por suerte o por desgracia, existen centenares de navegadores y nunca podemos saber a ciencia cierta que navegador va a usar cada visita, por ese motivo tenemos que pulir nuestro código, añadir opciones específicas (los llamados hacks) o incluso desarrollar sitios aposta para abarcar el máximo de estos navegadores.

Solo la experiencia nos hará reducir el tiempo que perdemos en estas “modificaciones”. Hay mucha gente muy buena, con muchísima experiencia que comparte sus conocimientos y de esta gente tenemos que aprender, por ello una lista de “normas” a tener en cuenta antes de empezar nos podría ayudar a conseguir el equilibrio perfecto

  1. Siempre usa el DOCTYPE strict y valida los estandares HTML/CSS
  2. Usa siempre un sistema para resetear tus CSS
  3. Usa opacity:0.99 en elementos de texto para limpiar el renderizado de Safari
  4. Nunca redimensiones imagenes desde el CSS o HTML
  5. Revisa el renderizado de la fuente en todos los navegadores. Nunca uses Lucida.
  6. El tamaño del texto es % en el body y em para el resto
  7. Todos los divs flotantes deben llevar display:inline y overflow:hidden
  8. Los contenedores deben tener overflow:auto y activa hasLayout usando un width o un height
  9. No uses ningún estilo CSS3 extravagante
  10. No uses imagenes PNG transparentes a menos que hayas cargado el apha.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.