IE is bothering you: Google Chrome Frame to the Rescue

IE is bothering you: Google Chrome Frame to the Rescue

0 comment

We all know how IE is good with table design, but luckily these days are long over, and still, IE sticks like the gum on the bottom of your shoe that just won't fall off, making our lives as developers and designers a nightmare. Most of us hoped that with IE9 the problems will disappear, which in some part was true.

Is it really IE's fault?

IE9 has a much faster and better rendering engine, and obeys most of the rules like other modern browsers.  So what's the problem? Well, there wouldn't be any, if other browsers like Firefox, Chrome and Opera haven't implemented HTML5 and CSS3 features that are not yet fully standardized. So the only fault IE9 has done was not to implement this beta feature. 

IE9 scores 100% on Acid 3 test

Worst nightmare

Me, like any other designer/developer, just cannot wait another year or two until this new HTML/CSS standard is fully accepted and supported by all browsers, so I've made a mistake of using it . And then one day a client called and said that something is not working on his Windows XP PC with IE browser (yes I also felt the chills in my bones). Since Webiny uses HTML API like FileReader, BlobBuilder and similar, that don't even exist in IE9 (not to talk about 'the one that we do not speak of') I hit a wall. 

Thank you Google!

I explored my options and made a small list of requirements:

  • I didn't want to lose all those nice HTML5 features
  • Rewriting several features just for IE would take too much time
  • I wanted a quick but not dirty solution
  • The solution should (preferably) work on older versions of IE too


Then I've discovered Google Chrome Frame. I've heard of it before, but never paid too much attention to it, until recently. What it actually does is that it replaces IE's rendering engine with the one from Google Chrome. This way I got full HTML5/CSS3 support in all versions of IE. This plugin's a true life saver...thank you Google!

You need less than 5 minutes to implement GCF.


Step 1 - What to render

First you have to tell GCF which pages it will render and which pages will be rendered over IE's standard rendering engine. In my case I wanted all pages to be rendered by GCF. In this case the best approach is to add these two lines to a .htaccess file that append the needed parameters to every page (request).

BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf

If you want to render only a specific page with GCF, just add this meta tag in the head of that page:



Step 2 - Installing GCF

The installation is done by including a JavaScript file from Google`s server, and just call one function. This function checks if user is browsing through IE, and does not have GCF already installed. If that is true, a frame pops-up where a user just clicks a button to start the installation.

Put this in the 'head' part of your page:


Put this after the closing 'body' tag:

  

 

Now try to open your page using IE, an installation frame, like this one, should pop-up.

Step 3 - Enjoy

Once the installation finishes you are ready to experience the full capabilities of new web standards. For more detailed information you can visit these pages:

 

Leave a comment

*

*

*