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

Introducción

HTML5 incorpora una infinidad de herramientas nuevas y asombrosas al conjunto de herramientas para desarrolladores web, entre las que se incluyen las siguientes:

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

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

Google Chrome Frame puede ayudarte a crear páginas HTML5 de última generación hoy mismo, a la vez que permite que los usuarios de navegadores anteriores vean tu contenido.

¿Qué es Google Chrome Frame?

Google Chrome Frame es un complemento para Internet Explorer que permite renderizar el lienzo del navegador completo mediante el motor de renderización de Google Chrome. Es compatible con todas las funciones de HTML5 que encuentras en Chrome y se integran perfectamente a 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 se admite un navegador antiguo, como IE6 a IE8, pero si, por ejemplo, requieres WebGL para tu aplicación, ya que requerir Chrome Frame para usuarios de IE9 también podría ser útil.

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

Aunque tu sitio no necesite funciones HTML5, el uso de Chrome Frame podría brindar una mejor experiencia del usuario. Para los usuarios que ya la tienen instalada, el procesamiento suele ser más rápido y pueden obtener acceso a funciones que no son compatibles con navegadores anteriores. Por supuesto, aún puedes optar por admitir navegadores antiguos para los usuarios que no tengan Chrome Frame en su máquina.

Cómo habilitarlo

Puedes agregar una metaetiqueta HTML o usar un encabezado HTTP para habilitar Chrome Frame para procesar una página. Esto es muy importante. Eso significa que ningún sitio fallará si un usuario tiene Chrome Frame instalado, ya que el sitio tiene el control total del uso del complemento o del procesamiento predeterminado. Los siguientes fragmentos de código muestran cómo un sitio puede optar por que Chrome Frame lo renderice.

Opción 1: Encabezado HTTP (puedes agregarlo a tu configuración de servidor HTTP (p.ej., Apache):

X-UA-Compatible: chrome=1

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

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

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

Solicitud de Google Chrome Frame

Es posible que decidas dar de baja por completo la compatibilidad con navegadores antiguos por muchos motivos, entre los que se incluyen los siguientes:

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

Chrome Frame podría ofrecer una estrategia para seguir brindándoles a los usuarios de navegadores anteriores una forma de seguir usando 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 Usuario-agente de Chrome Frame.

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 necesaria; de lo contrario, puedes redireccionar a los usuarios a una página que explique cómo instalar Chrome Frame. Como alternativa al análisis del servidor, puedes usar la secuencia de comandos CFInstall.js para detectar Chrome Frame y solicitarle a los usuarios que instalen el complemento sin reiniciar sus navegadores. El uso de la secuencia de comandos es sencillo. Simplemente 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>

Haz preguntas

También puede crear una página de destino o una capa por su cuenta. Enviar a los usuarios a esta URL

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

que pueden colocarse en un MARCO FLOTANTE.

Agrega un parámetro de redireccionamiento para enviar a los usuarios de vuelta a tu sitio una vez 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 (Contrato de licencia para el usuario final) y guardar un paso del 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 de Chrome Frame a nivel del usuario, 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 mediante el instalador MSI que se puede descargar aquí: http://www.google.com/chromeframe/eula.html?msi=true.

Para obtener más información sobre las implementaciones de Chrome y 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 brindar a los usuarios acceso a una experiencia web más moderna para muchos sitios, Chrome Frame también presenta una mejora significativa en el tiempo de carga inicial. Para comprobar si Chrome Frame ayuda a que el procesamiento de tu sitio sea más rápido, ve a webpagetest.org y selecciona Chrome Frame como navegador.

More info

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