Compatibilidad de tu web con distintos navegadores

En este artículo vamos a tratar de condensar todas las técnicas probadas para mejora la compatibilidad entre navegadores.

Como habrás podido comprobar, hay multitud de información en internet, aquí vamos a comentar las que son más robustas y estables. Vamos a verlo.

¿Qué es la compatibilidad web?

Que una web sea compatible con todos los navegadores significa que se vea igual (o muy similar) en todos ellos.

Obviamente esto es bastante complicado, podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Chrome Explorer, Firefox, Opera, Safari y Mozilla.

Si consigues que se vea bien en estos 5, conseguirás que el 99% de tus usuarios vea correctamente tu web.

Estos son los navegadores más usados a día de hoy:

Algunas de esas diferencias son tan importantes que pueden hacer que partes de tu web no funcionen o no se vean, y como el propósito de hacer una web es que la vea el mayor número de personas (y que éstas la vean correctamente), nos interesa que la web funcione en el mayor número de navegadores posibles.

Por tanto, a la hora de hacer una página web no es suficiente con preocuparse por centrarnos en la audiencia adecuada, registrar un nombre de dominio rompedor o tener un diseño agradable al usuario.

Todo esto puede verse ensombrecido si un usuario no ve la página correctamente al entrar con un navegador que no has tenido en cuenta al crearla.

Para que veas un ejemplo leve de lo que hablamos, aquí puedes apreciar como se ve una página web en diferentes navegadores. Por supuesto es ficticia y el diseño está hecho descuidado a propósito:

Como hemos dicho, hay casos de incompatibilidad más graves en los que el diseño se desajusta, no cabe completo en pantalla, scripts o menús que se comportan de manera diferente de un navegador a otro… en fin, un desastre, sobre todo si tu web es un negocio en línea o una página de empresa que requieren cuidar el aspecto al máximo para atraer al cliente.

Mejorar la compatibilidad con navegadores

Validar el código de tu sitio web

Validar el código de tu web en base a los estándares del W3C es un buen hábito que conviene que cojas cuanto antes mejor.

Básicamente consiste en escanear tu web en busca de errores de programación para una vez detectados poder corregirlos.

Además, a parte de detectar errores de codificación te proporciona una breve explicación del error, por lo que aprenderás cosas nuevas validando tu web.

Tómate tu tiempo para validar el código CSS de tu web. Eso hará que te sea más fácil conseguir que tu sitio se vea igual en los distintos navegadores ya que hará que tengas un código más limpio y sobre todo sin errores.

Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones hacerlo manualmente la tarea será difícil y larga. Además, es muy sencillo que se te pasen errores, mientras que usando herramientas online no ocurrirá.

La importancia de validar los códigos HTML y CSS

El hecho de que un código no valide, deja abierta la posibilidad de que la página no se vea de forma correcta en algunos navegadores.

Facilidad de mantenimiento

Un código válido es mucho más simple de mantener que uno que no lo es.

El desarrollo de códigos limpios y válidos simplifica  la tarea de realizar modificaciones posteriores, tanto por parte del diseñador como de otra persona.

Además, si durante el desarrollo del código te acostumbras a dejar comentarios para orientar a aquellos que necesitan interpretarlo para su mantenimiento, mejor aún es hacer un código prolijo, fácil de entender y que respeta los estándares.

Las razones subjetivas para validar

También existen otros tipos de razones para crear códigos HTML y CSS  válidos. Por ejemplo, el simple hecho de saber que las cosas se hacen bien, más allá de su funcionalidad.

Otro argumento en este sentido, es que un código válido da la impresión de estar desarrollado con profesionalidad, lo que habla muy bien de quien lo ha realizado.

Teniendo en cuenta esto, la generación de códigos válidos en las web que desarrollemos, puede servir de carta de presentación de nuestro trabajo.

Resetear los estilos CSS

Si no usas ningún estilo CSS en los elementos de tu página igualmente tendrán un aspecto determinado.

Los títulos tienen una tamaño según su importancia (H1, H2, H3…), los márgenes tienen un tamaño determinado, las citas llevan sangría, etc.

Muchos de estos valores por defecto, son iguales de unos navegadores a otros pero otros no, y esos precisamente son los que te crearán problemas a la hora de conseguir que tu web se vea igual en los diferentes navegadores, ya que por mucho estilo que les des, su valor predeterminado sigue contando.

Así, los márgenes, espacios y tamaños de fuente de títulos (entre otros) pueden tener diferentes propiedades por defecto de un navegador a otro y provocar que se vean diferentes por mucho formato que le demos nosotros.

Para resetear el CSS se escribe un código CSS al principio de tu hoja de estilos, y después todo lo que tu vayas creando.

Por otro lado, una forma más sencilla, aunque no tan completa, de anular los valores por defecto que más problemas suelen dar (margin y padding) es poner el siguiente código al principio de tu hoja de estilos y luego las reglas que vayas creando:

* {margin:0; padding:0}

Lo que hace este código es dar un margin y padding de 0 a todas las propiedades CSS.

Evidentemente no es tan completo como el anterior código, pero si no quieres complicarte mucho la vida o necesitas ahorrar espacio reduciendo la hoja de estilos, este código también quita muchos problemas.

Usa técnicas soportadas

CSS ofrece un montón de técnicas para mejorar el aspecto de nuestras páginas web, pero no todas son bien soportadas por los navegadores.

Lo mejor es intentar evitar el uso de propiedades que puedan causarnos problemas con algunos navegadores, en especial con los más usados por los visitantes (IE, Firefox…). En general, usando buenas prácticas en CSS minimizamos el riesgo de incompatibilidades entre navegadores.

Trabaja por defecto con Chrome, no con Explorer

Una de las cosas que han hecho a Google Chrome tan popular es que es uno de los más completos navegadores en cuanto a respetar los estándares web se refiere. Y mejora con creces la velocidad y seguridad al navegar por cualquier web.

Y como él hay muchos otros (cada vez más) que se preocupan por seguir al máximo los estándares del W3C, como Firefox o Safari.

Por tanto, trabajando directamente en Chrome estamos minimizando el uso de reglas indebidas o malinterpretadas, ya que el aspecto que nos devuelve el navegador de lo que programamos se acerca mucho más a la regla general que maquetando en Internet Explorer.

Si lo haces al revés, cuando consigas que se vea bien en Explorer tendrás que ir arreglando el código para que se vea bien uno por uno en el resto de navegadores, mucho más trabajo ¿no?.

Como detectar el uso de Internet Explorer 8, 9, 10 y 11

Es de casi asegurar el hecho de que todo aquel programador que ha tenido experiencia en el ámbito del desarrollo web se ha visto envuelto en alguna clase de problema con Internet Explorer.

Si bien es cierto que en su última versión, IE11 ha presentado grandes mejoras y el soporte a nuevas tecnologías se ha puesto como prioridad, el uso de sus versiones anteriores y la poca estandarización de éstas, producen dolores de cabeza a muchos desarrolladores.

Por esta razón, te recomiendo que tú tampoco les des soporte en tus páginas web, además que el uso de estos navegadores ya es muy residual en la mayoría de los casos.

Si aún así quieres dar soporte a versiones obsoletas de IE, tienes que buscar “hacks para Explorer” y maneras de adaptar tu web para que Internet Explorer pueda por lo menos simular lo que queremos lograr.  Este es un ejemplo:

<!-- [if IE 8]>
Instrucciones especiales para IE 8 aquí
<![endif]-->

No obstante, debido a que el uso de estas versiones de Explorer es ya muy minoritario, como te decía lo más práctico es no dar soporte a estos navegadores y no ensuciar el código con hacks para estas versiones, puesto que el beneficio que aporta al usuario ya es casi inexistente.

Herramientas online para comprobar como se ve tu web en distintos navegadores

Con el paso del tiempo las pruebas en navegadores se han convertido en uno de los eslabones más importantes y sofisticados del sistema de producción de páginas web.

Pero muchas cosas han cambiado desde aquellos días en que las pruebas se realizaban con unas cuantas herramientas, llevando incluso a muchas empresas a crear departamentos exclusivos para llevar acabo pruebas a sus productos de software, haciendo cada vez más común la inclusión de personal dedicado exclusivamente al llamado “testeo”.

Uno de los principales problemas con los que nos enfrentamos como desarrolladores web, es encontrar un patrón de diseño adecuado que pueda ser visto de manera correcta en todos los navegadores que existen en el mercado.

Si bien muchos de los navegadores modernos ya se encuentran estandarizados, hay que mencionar que aún existen millones de usuarios con navegadores viejos e incluso obsoletos, por lo que nuestros sitios aún tienen que ser compatibles con ellos.

Gracias al uso de estas herramientas, ya sea de escritorio o en la misma Web,  nos permiten simular el despliegue de nuestro sitio utilizando el motor de diferentes navegadores.

Como en todo existen versiones de pago y versiones gratis, en esta ocasión me enfocaré en mencionar únicamente herramientas de tipo gratuito que nos ayuden a probar sin necesidad de desembolsar alguna cantidad de dinero.

Browsershots

Esto la convierte, probablemente, en la herramienta gratuita de prueba más completa ya que incluye navegadores Linux, Windows y BSD.

Incluye navegadores poco conocidos como Konqueror, Galeon, SeaMonkey, Iceape y Kazehakase, nos permite realizar las pruebas en la versión más reciente de cada navegador, así como en versiones anteriores.

La desventaja es que entre más navegadores utilicemos más lenta será la respuesta que obtengamos del servidor, así que quizás quiera concentrarse únicamente en los navegadores de uso más común. El registrarse en el sitio también ayuda.

IETester

Como muchos de los que leen este artículo, yo no soy fan de Internet Explorer, su manera de interpretar y desplegar un sitio hace que nos de enfermedad, puesto que nuestro código puede funcionar de maravilla en todos los demás navegadores pero por alguna razón IE se decide a simplemente no mostrarlo de dicha manera.

Internet Explorer es tan irregular, que al arreglar un bug en una versión anterior puede que la página deje de funcionar en una versión más nueva. Es por ello que pongo en primer lugar esta herramienta que nos ayudará a probar la web en todas las versiones de IE.

Browser Sandbox

Browser Sandbox es un servicio ofrecido mediante una página web, que emula la aplicación del sitio en distintos navegadores, nos ofrece versiones de Firefox, Chrome, Opera y Safari, aunque desgraciadamente también sólo funciona para Windows.

A parte de contar con los distintos navegadores, a su vez proporciona la opción de seleccionar versiones es decir que podemos verificar el sitio en un mismo navegador pero en alguna versión previa o posterior a la que tenemos.

Desgraciadamente Browser Sandbox no es compatible con Internet Explorer, un tiempo lo fue, pero por petición de Windows este emulador dejó de ofrecer el servicio.