Manual de HTML y CSS

Compatibilidad de tu web con distintos navegadores

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (11 votos, promedio: 3,36 de 5)
Cargando...

Podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Explorer, Firefox, Opera, Safari y Mozilla.

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:

Navegadores más usados en 2018

El problema radica en que no todos los navegadores interpretan en código HTML y CSS de la misma manera, entre ellos existen pequeñas variaciones que son las que hacen que el resultado no sea el mismo de unos a otros.

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.

Tener una página sin errores es importante porque maximiza la compatibilidad entre navegadores al mismo tiempo que te asegura que tu código siga valiendo para futuras revisiones de HTML, CSS, etc.

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á.

El validador de CSS del W3C es la mejor opción para ello, ya que esta entidad es la que se encarga de crear los estándares de la web.

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.

Por eso, resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar para prevenir el problema de la incompatibilidad entre navegadores, ya que por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados.

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.

Al resetear el CSS digamos que ponemos a cero esos valores por defecto y podemos empezar desde el principio a dar el formato que nosotros queramos, controlando el aspecto de cada elemento mucho mejor.

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.

El código de Eric Meyer es una de las formas más conocidas que tenemos de resetear el CSS de nuestra web, muy efectivo.

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.

Puedes ver en CanIUse  qué reglas soporta cada navegador. Tiene un potente buscador que te hará la tarea muy fácil. Y es una herramienta que se actualiza constantemente.

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.

Trabajar con Chrome hace de nuestro código un código más limpio, más estándar, y por tanto más universal. Una vez funcione en Chrome y navegadores similares, como Safari o Firefox, puedes empezar a pensar en que tu sitio se vea bien en 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.

Actualmente versiones anteriores a IE11 ya NO tienen soporte por parte de Microsoft. Esto significa que se consideran navegadores deprecados y dejan de recibir actualizaciones y parches de seguridad.

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.

Como recomendación, yo me centraría en dar soporte a Internet Explorer 11 y a Microsoft Egde, que es el nuevo navegador de Microsoft, mucho más parecido a cualquier otra navegador moderno, como Chrome o Safari.

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]-->

Tenemos una guía extensa sobre cómo dar estilos sólo para ciertas versiones de IE, si te interesa el tema puedes consultarla.

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.

Para poder estar seguro del funcionamiento de un sitio en diferentes contextos de uso, se lleva a cabo las llamadas pruebas de “Cross-Browser” que consisten en llevar a cabo revisiones en cada uno de los navegadores más usados.

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

Browsershots es un servicio de emulación online, que nos permite verificar la compatibilidad de nuestro sitio en varios de los navegadores menos conocidos del mundo Web.

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.

IETester es una aplicación de escritorio que nos permite visualizar e incluso utilizar los motores de Javascript de la mayoría de las versiones de Internet Explorer, funciona únicamente sobre Windows, y pide como requerimiento mínimo el tener IE7 o superior instalado en nuestra máquina.

Browser Sandbox

Si bien Internet Explorer será nuestro principal foco de atención, no tenemos que descuidar el desempeño de nuestro sitio en otros navegadores, para estos casos es mejor utilizar otro tipo de herramientas, y una de mis preferidas es 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.

 

12 respuestas

  1. No sé como es que Google no tiene en cuenta esto para indexar. ¿Será que sí lo hace y no nos informa?

  2. Totalmente de acuerdo. Si todos, compañías y profesionales, usasen los estándares, los tiempos de desarrollo también serían menores.

  3. Josè Luis se está desviando del tema. Si vas a comentar en algo tan interesante no agregues tonterías, ¿Rayos solares?

  4. Estimada Verónica, quedo muy agradecido por tu gran aporte, estoy en investigación para hacer mi página, justamente sin cometer fallos, ya que estos cuestan mucho dinero.

    Además estoy notando que al medio día, la fuerza de los rayos solares que impactan en las piezas de los satélites afectan a la compatibilidad de los navegadores. Aquí hay una responsabilidad técnica de los navegadores.

    A vuestras ordenes, JL.Lara.

    1. Hola José Luis, el tema de los rayos solares y la compatibilidad entre navegaores WEB, no lo veo factible, aunque me gustaría saber en qué te basas para exponer un argumento así.

      Un saludo.

  5. Hola, que raro que digáis que si se puede ver en Firefox se puede ver en Explorer.

    Yo tengo un problema y es que mi web se ve en todos los navegadores menos en Explorer. He intentado y arreglado todo y no se ve, se ve hasta la mitad de la web y no sé porqué en cambio en Firefox la abro y se ve completa sin ningún problema.

    ¿Algún consejo para que se pueda ver en explorer? gracias.

  6. hola!!necesito aprender a hacer pagina web sencillas pero no tengo idea de como se hace me pueden dar algun documento para principiante ..!!!gracias

Deja una respuesta