HTML5, Google Chrome Frame and older browsers

Consider the following problem:

You might be tempted to start working with HTML5 features in your web applications but you have to support older bowsers.

So for many HTML5 features there are polyfills available that will let you make older browsers like Internet Explorer 7 or 8 work with the newer API. See a possible list of HTML5 polyfills here. However a number of these is JavaScript based and while that works in older browsers their JavaScript engine is often quite slow as well making it hard to work with.

But how about just upgrading the complete browser?

Seems to make far more sense right? Except upgrading from IE8 to IE9 isn’t possible in all cases. One big showstopper can be people still running Windows XP because IE9 requires Windows VISTA as a minimum.

So we can upgrade to another browsers like FireFox or Chrome which has far better HTML5 support. While that technically works it causes headaches as it means people must switch browsers. And worse you might also have to support some site that only works well in IE forcing the users to switch between multiple browsers. Not a problem for techies, I do it all the time, but not much fun for the average end user.

So it turns out there is a great solution out there called Google Chrome Frame.

Users can install Google Chrome Frame in their machine and by default it does nothing noticeable. Only when a specific HTML meta tag X-UA-Compatible is added to the head section does the plugin start working. And then it intercepts the response and starts rendering it using Google Chrome Frame instead. However this is done inside the Internet Explorer window so the user has no clue he or she has just switched to Google Chrome Frame. And just like magic all the cool new HTML5 features supported in Chrome will work in what appears to be IE.

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

A simple example

When I try to new up a WebSocket object in IE9 I get the following error.

And with a simple addition of the HTML header the sample starts working. Notice that as far as the end user is concerned he is still using IE9, no changes there whatsoever.

Pretty cool right

And the good thing is that by default Google Chrome Frame is self updating just like Google Chrome so you know that once installed the plugin will always be up to date.

Detecting Google Chrome Frame

If you want to detect if Chrome Frame is installed ahead of time you can look at the User-Agent header the browser sends to the server. If installed and active Chrome Frame will add chromeframe/X.X.X.X where the X.X.X.X is the version number to the User-Agent string.

So why just add it to a single page?

Enabling Chrome Frame for al pages in a website is easy, just add the following to your web.config

<configuration>

  <system.webServer>

     <httpProtocol>

        <customHeaders>

           <add name="X-UA-Compatible" value="chrome=1" />

        </customHeaders>

     </httpProtocol>

  </system.webServer>

</configuration>

You can read the Google Chrome Frame FAQ with lots of extra bits of information here.

Enjoy!

[f1]

[f2]