Si tenés cierta experiencia en diseños web, sabés lo frustrante que es andar toqueteando la hoja de estilos para que se acomode a la falta de estándares del Internet Explorer. Es por eso que en mi caso, directamente dejé de calentarme por diseñar para IE y me concentré en que las cosas anden en Webkit (Safari, Chrome) y Gecko (Firefox y otros), motores que soportan en gran medida los estándares web. En este artículo te voy a mostrar fácilmente como implementarlo en tu sitio.
El otro día me topé con una nueva ocurrencia de Google, el Chrome Frame, que básicamente es un plugin para IE que permite reemplazar el motor de renderizado del mismo por el de Chrome (basado en Webkit), junto con otras mejoras. Desde el punto de vista usuario final, este se beneficia con un motor de javascript mucho mas rápido llamado V8 que permite que cualquier servicio Web 2.0 (Gmail como el mas emblemático) funcione muchísimo mas rápido que de forma nativa en IE y para el diseñador, finalmente IE va a trabajar con Webkit, que cumple 100/100 el Acid Test 3, salvándonos infinitos quebraderos de cabeza.
Una de las cosas buenas (y polémicas) en lo que refiere a Google Chrome Frame es su implementación. Básicamente necesitás un metatag en la página que querés que el IE muestre con Chrome y un Javascript para hacerle notar al usuario que, si no tiene instalado el plugin, lo haga. Es el sistema es el que uso para este mismo sitio y si sos visitaste con IE ya sabés a lo que te enfrentás. Manos a la obra:
Primero, ponemos el metatag dentro del head:
<head> ... <meta http-equiv="X-UA-Compatible" content="chrome=1"> <!-- Le dice al IE que puede usar el plugin --> ... </head>
Muy bonito. Ahora, que hacemos cuando el desafortunado usuario desconocedor de las bondades de los estándares web se topa con vuestro web? (leer con tonada española). ¡Pues hombre!:
<body><!--Tiene que estar justo luego del tag BODY, así el iframe se ve arriba de todo-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<div id="placeholder"></div>
<script>
CFInstall.check({
node: "placeholder",
});
</script>
...
¡Listo! En caso de no tener instalado el plugin, aparecerá un mensaje solicitándolo. También es posible, agregar debajo de node: “placeholder”, otra opción que sea:
mode: "popup"
Con esto evitamos la molestia del iframe y lo reemplazamos por un popup. Hay otras opciones de configuración que podés verificar en esta Developer’s Guide.