fua navegadores web

Uno de los mayores problemas que nos encontramos los que nos dedicamos al mundo del desarrollo web es el diferente modo que tiene cada navegador de gestionar ciertos elementos de la página y que pueden hacer que lo que en un navegador funciona perfectamente en otro no se vea correctamente o que incluso ni tan siquiera funcione.

El problema puede llegar desde muchos sitios, las webs se han convertido en algo muy complejo y hay muchos factores que pueden hacer que las cosas no funcionen como queremos.

El motor de renderizado del navegador: el gran problema

El motor de renderizado es el encargado de leer los datos recibidos de una web (HTML, XML, CSS, XSL…) y representarlos en pantalla. Cada navegador tiene su motor de renderizado, como Webkit, el motor de Safari, Opera y hasta hace poco de Chrome (ahora utiliza Blink); Gecko, el motor de Firefox; o Trident, el motor de Internet Explorer.

Pues bien, aunque en gran medida todos cumplen los estándares y representan las etiquetas de la misma forma, hay elementos que no todos interpretan igual, o incluso debido a su novedad, algunos no llegan ni tan siquiera a soportar. Por ejemplo, hasta hace poco Trident, el motor de Internet Explorer, era incapaz de interpretar la gran mayoría de etiquetas HTML5, y si quieres utilizar el elemento canvas (el cual está subiendo en popularidad como la espuma) te puedes dar más de una torta al probar con los distintos navegadores.

Pero si las etiquetas pueden ser un problema, los estilos CSS lo son aún más. Cosas como las sombras en los textos funcionan en algunos navegadores sí y en otros no, el tratamiento de los bordes no es igual en Firefox que en Explorer, lo que puede causar que se descuadre algún elemento, hacer bordes redondeados es diferente según el navegador, e incluso algo tan básico como los márgenes (margin) difiere dependiendo del navegador y su versión.

Es tal el problema que incluso Microsoft decidió hacer pasar a su Internet Explorer 11 por un Firefox para así no cargar todos los “parches” que han tenido que poner los desarrolladores en sus webs para que se viesen bien en las versiones anteriores de Internet Explorer.

fua cuota renderizado

Javascript, llegó el caos

Pero si las diferencias a la hora de interpretar etiquetas y estilos entre los distintos navegadores nos pueden llegar a hacer perder mucho tiempo colocando elementos para que se muestren correctamente (o incluso tener que hacer hojas de estilo diferentes por cada navegador), las diferencias a la hora de aplicar el javascript pueden hacer simplemente que nuestra web no funcione como queremos o que directamente no funcione.

Por ejemplo, utilizar el evento onChange en versiones anteriores de Explorer era un suplicio ya que era lanzado antes de perder el foco del objeto, lo que originaba muchísimos problemas.  Por no hablar del hasLayout, evento que es mejor evitar si quieres que tu web funcione correctamente en IE.

Pero todo tiene solución

Una vez conocido el problema, la gran pregunta de todo el que se dedica al desarrollo web es: ¿y cómo lo soluciono? Y para responder a dicha pregunta lo mejor es darte unos cuantos consejos:

1. Consulta tablas de compatibilidades

Una de las primeras cosas a tener en cuenta son las tablas de compatibilidades, o lo que es lo mismo, tablas que te indican si el recurso que quieres utilizar es compatible con todos los navegadores o no. Te puedo recomendar las siguientes:

  • quirksmode.org: Sin duda la página más completa sobre el tema. Hay disponibles tablas de compatibilidad tanto de CSS, el DOM y test de elementos HTML5. A día de hoy está completamente actualizado con las últimas versiones de los navegadores (como IE11).
  • sitepoint: Sitepoint tiene un apartado llamado reference en el que no sólo encontraremos tablas de compatibilidades sino también explicaciones sobre cada atributo, posibles valores, etc… El gran problema es que no está tan actualizado como quirksmode y hay tablas algo antiguas.
  • w3cschools: Aunque w3cschools es más útil para conocer tags, atributos y demás, junto a cada uno de ellos nos encontraremos los iconos con los navegadores compatibles. Por desgracia únicamente tiene en cuenta las últimas versiones de los mismos, por lo que no nos ayuda a hacer compatible nuestra página con navegadores antiguos.

fua tabla compatibilidades

2. Utiliza lo que conoces

Aunque parezca una tontería, lo mejor es que si algo funciona no lo toques y si sabes que algo funciona utilízalo antes que otra cosa. Si el diseño supermolón que tienes delante se puede desarrollar perfectamente sin canvas y no sabes utilizar canvas, no utilices canvas. Es tan secillo como eso.

3. Usa librerías

No reinventes la rueda, utilizar librerías que hacen lo que quieres es la mejor forma de evitarte los problemas de compatibilidad entre navegadores. Por lo general estarán bien testeadas y los problemas serán mucho menores. Entre las librerías que se suelen usar están:

  • jQuery: Sin duda el rey de las librerías javascript. No sólo nos quitará muchísimos problemas de compatibilidad, sino que además añade a javascript cientos de posibilidades sin las cuales la web no hubiese avanzado tanto en los últimos años.
  • YUI: La Yahoo! UI Library añade decenas de elementos molones para nuestra web (animaciones, drag and drop, implementación de Ajax…).
  • modernizr: HTML5 es genial, pero si utilizamos sus etiquetas estamos dejando de lado a una gran parte de los usuarios que se niegan, o no saben, actualizar su navegador.  Pero la librería modernizr modifica mediante javascript todas las etiquetas cuando se encuentra ante un navegador viejo y hace nuestra web compatible con él.

4. Probar, probar, probar

Pero por mucho que sigamos los consejos anteriores, hay una cosa que nunca podremos dejar de hacer: probar nuestra web. En todos los navegadores, en todas las versiones y en todos los dispositivos posibles. Probar, probar y probar.

Seguro que tú tienes tus propios trucos sobre el tema, ¿te apetece compartirlos con nosotros?

4 comentarios

  1. Matías enero 23, 2014 a las 09:15

    Responder

    Muy bueno che, la verdad es que la compatibilidad es un coñazo, aun así a base de sufrimiento uno consigue que marche todo. He de decir que siempre culpaba a IEx pero no había pensado en trident, malditos chicles!!!
    Un saludo :D!

    • Francisco Magaña enero 23, 2014 a las 11:08

      Responder

      Muchas gracias Matías por el comentario.

      Como tú dices, la compatibilidad es un coñazo, y por eso este post, para intentar ayudar con unos pequeños consejos y recursos sobre el tema.

      Y sí, al final los chicles son los culpables de todo, no sólo de nuestras caries, jajajajaja.

      Saludos.

  2. Luis Manuel Larraza enero 26, 2014 a las 23:30

    Responder

    Muy buen post. Lo de probar es fundamental, hasta el aburrimiento

    Como tabla de compatibilidad adicional propongo también caniuse.com Te dice además desde que versión está disponible en cada navegador el atributo o etiqueta en cuestión.

    Saludos

    • Angela Olea enero 27, 2014 a las 01:09

      Responder

      ¡Gracias por tu comentario Luis! ¡Es un placer contar con tu apoyo!

      Apuntamos también ese recurso que nos comentas para trastear con él cuando tengamos un rato ;)

      ¡Un abrazo!

Haz más molón este post dejándonos tu comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>