Cómo renderizar HTML5 en navegadores más antiguos con Google Chrome Frame

Introducción

HTML5 agrega una gran cantidad de herramientas nuevas y geniales a la caja de herramientas de los desarrolladores web, incluidas las siguientes:

  • APIs de JavaScript nuevas y más potentes
  • SVG para gráficos vectoriales
  • Canvas para 2D y con gráficos 3D de WebGL
  • CSS3 para esquinas redondeadas, gradientes, etc.
  • Lenguaje de marcado más expresivo

Por supuesto, esta lista no es exhaustiva. La plataforma web avanzó de forma masiva y la brecha entre los navegadores antiguos y los modernos se amplía cada día.
Actualmente, todos los navegadores de escritorio principales admiten partes importantes de HTML5 en la versión más reciente, pero los navegadores antiguos que aún están disponibles crean un desafío para adoptar las funciones más recientes y avanzadas en la actualidad.

Google Chrome Frame puede ayudarte a compilar páginas HTML5 de vanguardia hoy mismo y, al mismo tiempo, permitir que las personas que usan navegadores más antiguos vean tu contenido.

¿Qué es Google Chrome Frame?

Google Chrome Frame es un complemento para Internet Explorer que permite renderizar el lienzo completo del navegador con el motor de renderización de Google Chrome. Admite todas las funciones de HTML5 que se encuentran en Chrome, integradas sin problemas en la experiencia del usuario de Internet Explorer. Chrome Frame está disponible para Internet Explorer 6, 7, 8 y 9. Chrome Frame es, sin duda, más útil cuando admite navegadores antiguos, como IE6 a IE8, pero si, por ejemplo, necesitas WebGL para tu aplicación, también podría ser útil exigir Chrome Frame para los usuarios de IE9.

Los polyfills de HTML5 proporcionan otra forma de suavizar la transición a navegadores más nuevos. Lamentablemente, no pueden emular todas las funciones y ralentizan tu página en navegadores antiguos, que ya son más lentos que la nueva generación.

Incluso si tu sitio no necesita funciones HTML5, usar Chrome Frame podría brindar una mejor experiencia del usuario. En el caso de los usuarios que ya lo tienen instalado, la renderización suele ser más rápida y pueden acceder a funciones que no son compatibles con navegadores más antiguos. Por supuesto, puedes decidir admitir navegadores antiguos para los usuarios que no tienen Chrome Frame en sus máquinas.

Cómo habilitarlo

Para habilitar Chrome Frame para renderizar una página, agrega una metaetiqueta HTML o usa un encabezado HTTP. Esto es muy importante. Esto significa que ningún sitio fallará si un usuario tiene instalado Chrome Frame, ya que el sitio tiene el control total del uso del complemento o la renderización predeterminada. En los siguientes fragmentos de código, se muestra cómo un sitio puede habilitar la renderización de Chrome Frame.

Opción 1: HTTP-Header (puedes agregarlo a la configuración de tu servidor HTTP [p.ej., Apache]):

X-UA-Compatible: chrome=1

Opción 2: Metaetiqueta (solo pégala en la sección <head> de tu código HTML)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Una vez que hayas agregado uno de estos elementos a tu sitio, las páginas se renderizarán con Chrome Frame si está instalado en la máquina del usuario.

Mensaje de solicitud de Google Chrome Frame

Puedes decidir dar de baja por completo la compatibilidad con navegadores antiguos por varios motivos, como los siguientes:

  • Tu sitio requiere funciones modernas, como video HTML5, lienzo, WebGL o CSS3.
  • El tiempo de desarrollo dedicado a navegadores antiguos es demasiado alto.
  • Agiliza el tiempo de desarrollo de funciones nuevas

Chrome Frame podría proporcionar una estrategia para seguir ofreciendo a los usuarios de navegadores antiguos una forma de usar tu sitio.

Chrome Frame transmite que está disponible extendiendo el encabezado de usuario-agente del host con la cadena "chromeframe". Para obtener más información, consulta Chrome Frame User Agent.

Usa la detección del servidor para buscar este token y determinar si se puede usar Chrome Frame para una página. Si Chrome Frame está presente, puedes insertar la metaetiqueta requerida. De lo contrario, puedes redireccionar a los usuarios a una página en la que se explique cómo instalar Chrome Frame. Como alternativa al espionaje del servidor, puedes usar la secuencia de comandos CFInstall.js para detectar Chrome Frame y solicitarles a los usuarios que instalen el complemento sin reiniciar sus navegadores. El uso de la secuencia de comandos es sencillo. Solo agrega las etiquetas de secuencia de comandos y los estilos opcionales a tu página como en el siguiente ejemplo:

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

Hazte preguntas

También puedes crear una página de destino o una capa por tu cuenta. Envía a los usuarios a esta URL

http://www.google.com/chromeframe/

que se puede colocar en un IFRAME.

Agrega un parámetro de redireccionamiento para enviar a los usuarios de vuelta a tu sitio después de que se complete la instalación:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ En lugar de ir a la página de destino de Chrome Frame, también puedes enviar a los usuarios directamente al CLUF, lo que ahorra un paso en el proceso de instalación. http://www.google.com/chromeframe/eula.html

No se necesitan derechos de administrador

Los usuarios pueden instalar Chrome Frame sin tener privilegios de administrador en sus máquinas.

Agrega el parámetro user=true para habilitar la instalación a nivel del usuario de Chrome Frame, como se muestra a continuación:

http://www.google.com/chromeframe/?user=true

Instalación empresarial

Las empresas pueden implementar Chrome Frame en toda la empresa con el instalador MSI, que se puede descargar aquí: http://www.google.com/chromeframe/eula.html?msi=true.

Para obtener más información sobre Chrome y las implementaciones empresariales, consulta http://www.chromium.org/administrators.

Adopción

Muchos sitios web importantes, como yahoo.com, wordpress.com y varias propiedades de Google, adoptaron Google Chrome Frame. Además de brindarles a los usuarios acceso a una experiencia web más moderna en muchos sitios, Chrome Frame también presenta una mejora significativa en el tiempo de carga inicial. Para verificar si Chrome Frame ayuda a que tu sitio renderice más rápido, ve a webpagetest.org y selecciona Chrome Frame como navegador.

Más información

Para obtener más información, consulta la Guía de introducción o mira este video de Google IO 2011