Diseña y publica tus sitios rápidamente

Diferencias de tu sitio en distintos navegadores

Es posible que hayas notado algunas diferencias cuando cargas tu sitio Breezi en ciertos navegadores. Esto es normal, así que no te preocupes (a menos que haya inconsistencias mayores). Algunas de estas diferencias se  pueden presentar en la tipografía, en lo redondeado de las esquinas, espaciado, márgenes, entre otros. En esta publicación repasaremos algunas de estas.

Collage para esta publicación de los diferentes navegadores

Motores de renderización

Primero debemos establecer algunas bases. Un motor de renderización es el componente más importante de un navegador. Su función consiste en leer código (principalmente de HTML y CSS) y presentarlo en la ventana tal como lo entiende (el motor de renderización).

Cada motor funciona de manera diferente de acuerdo a cómo fue programado. Aquí hay una lista de los más populares y los navegadores que los usan:

  • WebKit (Safari, Chrome)
  • Gecko (Firefox)
  • Trident (Internet Explorer)

Tipografía

Una tipografía es una serie de caracteres. El proceso para presentar estos caracteres en un sitio es diferente para cada navegador. Tiene que ver con la tipografía en sí y con el motor de renderización. De esta manera, cosas como la claridad, tamaño, altura, etc., puede variar en calidad y consistencia dependiendo del navegador y sistema operativo que se utilice.

Comparación de cómo se ve una tipografía en diferentes navegadores

Esta imagen presenta la diferencia de un texto en diferentes navegadores

Aquí te dejamos una cita de una publicación en el blog de Typekit que puede que te ayude a entender mejor este fenómeno:

Cada sistema operativo contiene un motor que renderiza texto – e incluso más de uno para escoger. Y cada navegador controla cuál de esos motores usar. Así que, en el mismo sistema operativo, dos navegadores pueden producir un texto con dos apariencias muy diferentes porque están usando diferentes motores de renderización. Además, el motor puede variar dependiendo del sistema operativo y de la versión del navegador que se utilice. Finalmente, la configuración predeterminada de una tipografía puede variar de acuerdo al sistema operativo, su versión y puede sobreescribirse por las preferencias del usuario en su navegador.

Esquinas redondeadas

Las esquinas redondeadas son propiedad de CSS3, el lenguaje usado para dar formato a HTML. Esta versión de CSS se comprende en varios módulos. Algunos de ellos son recomendaciones oficiales, pero no todos. Sin embargo, aún cuando algunos de los módulos siguen en forma de borrador y bajo revisión, los navegadores pueden (y lo hacen) implementarlos y usarlos.

Como las esquinas redondeadas. Algunos navegadores entienden esta propiedad de manera natural, lo que hace que la muestren correctamente.

Ejemplo de esquinas redondeadas en 20 pixeles con Google Chrome

Otros, como las versiones anteriores de Internet Explorer, no lo entienden.

Ejemplo de esquinas redondeadas en 20 pixeles con Internet Explorer

Aquí hay una imagen donde puedes comparar cómo se ven las esquinas redondeadas en algunos navegadores.

Comparación de como diferentes navegadores muestran las esquinas redondeadas

La mayoría de los navegadores modernos muestran correctamente las esquinas redondeadas

Sombreado del texto

Hay otra característica que puede no mostrarse en Internet Explorer (de la versión 9 hacia atrás). Esa es la del sombreado del texto.

Como ejemplo, así se verá en en estos navegadores:

Comparación de sombreado en texto en diferentes navegadores

IE no soporta el sombreado del texto

Resumen

Esto quiere decir que, aunque es posible que haya diferencias mínimas (como las que mencionamos en esta publicación) entre navegadores, los sitios que crees con Breezi, el creador de sitios, se renderizarán correctamente en las últimas versiones de los navegadores y de dispositivos, y se degradarán gradualmente para que funcionen apropiadamente con versiones más viejas o dispositivos sin actualizar.