¿Cómo muestran los navegadores las páginas web y por qué nunca se ven igual?

A medida que navega por la web, no es raro encontrar sitios que se vean diferentes de un dispositivo a otro. Tal vez algunas características no funcionan en absoluto.

A menudo, esto no es un problema con el sitio web. Es tu navegador. Los cinco navegadores principales de escritorio utilizan cuatro diferentes “motores de renderizado” para mostrar una página web: el nuevo navegador Microsoft Edge Microsoft Gets the Edge, 1 billón de dispositivos que ejecutan Windows 10 y más ... [Tech News Digest] Microsoft Gets the Edge, 1 billón de dispositivos que ejecutan Windows 10, y más ... [Tech News Digest ] Microsoft tiene la ventaja, Windows 10 es enorme, Secret se cierra, incrusta los juegos de MS-DOS en tweets, gana dinero con Silent Hills y observa cómo Michael Bay aparece ante un cineasta amateur. Leer más para Windows 10 introducirá un quinto, y cada uno funciona de manera diferente.

Significa que su experiencia de la web puede cambiar según el navegador que esté utilizando e incluso la versión de ese navegador..

¿Qué es un motor de renderizado??

Una página web no es una entidad única que se descarga y se muestra en la pantalla de un píxel a la vez. En su lugar, es esencialmente una serie de instrucciones escritas en varios tipos de código: HTML, CSS, JavaScript. ¿Qué es JavaScript, y puede existir Internet sin él? ¿Qué es JavaScript, y puede existir Internet sin él? JavaScript es una de esas cosas que muchos dan por sentado. Todo el mundo lo usa. Lea más, PHP y otros - que le dicen al navegador qué hacer y dónde y cómo hacerlo.

Cada navegador usa un motor de renderizado, a veces también denominado motor de diseño, para tomar el contenido y la información de estilo contenida en el código, y mostrarlo en pantalla en su formato completo..

El problema es que no hay un solo motor de renderizado que se use en todos los navegadores. Y mientras cada idioma está definido por una especificación detallada, el motor solo puede ofrecer una interpretación de esa especificación.

Con CSS (el código que proporciona la información de estilo CSSmatic: cree rápida y convenientemente hojas de estilo CSS3 a través de múltiples herramientas en línea CSSmatic: cree rápida y convenientemente hojas de estilo CSS3 a través de múltiples herramientas en línea Leer más), en particular, ningún motor producirá exactamente los mismos resultados. A veces, las diferencias solo pueden equivaler a un píxel desalineado extraño aquí o allá, pero a veces pueden ser más radicalmente diferentes..

Qué navegadores utilizan qué motores

Hay cuatro motores de renderización principales que utilizan los navegadores más populares.

• WebKit: un motor de código abierto utilizado por Safari en OS X La última guía para personalizar Safari en Mac La última guía para personalizar Safari en Mac Personaliza Safari. Desde agregar favicons a tus pestañas hasta cambiar el aspecto del modo Reader, el navegador web de Apple es mucho más flexible de lo que crees. Lea más e iOS, así como muchos otros navegadores en dispositivos móviles, incluido el navegador nativo de Android;
• Parpadeo: un motor de código abierto basado en WebKit, que impulsa Chrome, Opera, Amazon Silk y WebView de Android (el navegador que se abre dentro de las aplicaciones);
• Geco: un motor de código abierto desarrollado por la Fundación Mozilla, es utilizado por Firefox;
• Tridente: un motor propietario desarrollado por Microsoft y utilizado en Internet Explorer. El navegador Microsoft Edge usará una versión más nueva llamada EdgeHTML.

Estándares web

La brecha entre los diferentes motores de renderización es mucho menor de lo que era cuando Internet Explorer era el navegador dominante. ¿Internet Explorer está logrando un gran retorno en 2015? ¿Internet Explorer está logrando un gran retorno en 2015? Microsoft ya no tiene que ofrecer a los usuarios de la UE de Windows una selección de navegadores. Además, Microsoft está trabajando en un nuevo navegador. Sin embargo, le mostraremos cómo instalar su navegador favorito sin tocar IE. Lee mas .

Pruebas como acid3 muestran la precisión con la que un navegador procesa una página, y la mayoría de los navegadores modernos obtienen una alta puntuación. Sin embargo, cumplir con las normas es una tarea inmensamente compleja.

Las especificaciones para HTML, CSS y otros son enormes. Se añaden nuevos elementos; Se eliminan los más antiguos, no utilizados o desactualizados. Los motores de renderizado pueden tardar mucho tiempo en reflejar estos cambios.

Algunos de los elementos de las especificaciones de HTML5 y CSS aún no son compatibles con los navegadores principales, algunos son solo parcialmente, mientras que otros aún son compatibles con algunos navegadores pero no todos.

El sitio web html5test.com le permite probar su navegador y la versión específica que está ejecutando, para ver qué tan bien admite las características oficiales y experimentales de HTML5. Al momento de escribir, Chrome se ubica como el mejor de los principales navegadores. ¿Qué navegador web es el más seguro? ¿Qué navegador web es el más seguro? ¿Qué navegador es el más seguro? ¿Qué debe instalar para asegurarse de que su experiencia de navegación sea segura? ¿Qué puede hacer para asegurarse de que su navegador existente sea lo más seguro posible? Leer más, con el ranking de Internet Explorer (v11) más bajo.

Si un desarrollador web utiliza una función que se admite en un navegador pero no en otra, el navegador no compatible debe establecerse en un equivalente cercano o ignorar la función por completo (por ejemplo, un cuadro transparente podría representarse como no transparente).

Esto hace que el trabajo de renderizar páginas web sea mucho más complejo de lo que parece. Es probable que un navegador que se actualiza con más frecuencia sea más compatible con los estándares que uno que no lo hace, como se destaca en las actualizaciones automáticas regulares de Chrome en comparación con las actualizaciones de IE mucho más dispersas.

Y hay otros factores en juego, también.

• Errores en el motor: Un motor de renderizado es un software, y todo el software contiene errores. Si bien los errores críticos se encontrarán y eliminarán rápidamente, es imposible garantizar que una combinación específica de código en una página web no produzca resultados inesperados cuando se procesa
• Errores en la página web: Los navegadores tienen un cierto nivel de tolerancia a errores incorporado, pero esto diferirá de un motor a otro. Una página web con errores en el código aún puede mostrarse perfectamente en un navegador, pero puede estar horriblemente dañada en otro
• Fuentes: La forma en que se muestran los tipos de letra no es manejada por el navegador sino por el sistema operativo. Windows y OS X representan las fuentes de manera diferente Cómo hacer que las fuentes de Windows se vean como las fuentes de Mac Cómo hacer que las fuentes de Windows se vean como las fuentes de Mac Eye Candy no es un forte de Windows. La interfaz de usuario moderna (también conocida como Metro) trajo mejoras, pero aún carece de un área importante: las fuentes. Te mostramos cómo puedes obtener un hermoso suavizado de fuentes en Windows. Lea más, por lo que incluso la misma fuente en el mismo navegador puede verse diferente cuando se ve en diferentes plataformas
• Legado: Los navegadores a menudo adoptarán nuevas funciones, especialmente para CSS, antes de que formen parte de la especificación oficial. Si la implementación de la función cambia cuando se adopta, el desarrollador del navegador debe decidir si adopta el cambio y corre el riesgo de romper la compatibilidad con miles de sitios web diseñados para la versión anterior, o ignorar por completo la nueva versión.
• Características propietarias: Algunos navegadores pueden usar tecnologías patentadas que no están disponibles en otros lugares. Esto se vio más famoso con el marco ActiveX de Microsoft en Internet Explorer, aunque la compañía no lo usará en el nuevo navegador Microsoft Edge

Envolver

Con tantos problemas involucrados, no es de extrañar que las diferencias en la forma en que los navegadores manejan las páginas web persisten.

La situación está mejorando, pero es poco probable que se resuelva por completo. Sería útil si todos ejecutaran la última versión de su navegador elegido, pero con el Internet Explorer 8 de seis años que aún mantiene una participación de mercado del 4.5 por ciento, eso está muy lejos..

¿Qué navegador utilizas y lo mantienes actualizado? ¿Has encontrado algún sitio web que no funcione en el navegador elegido? Háganos saber en los comentarios..

Créditos de la imagen: dispositivos a través de Jeremy Keith, navegador no compatible a través de Duncan Hill

Explore más acerca de: Google Chrome, Internet Explorer, navegador Safari, desarrollo web.