Internet Explorer (IE) has a rather unfashionable habit of showing up to the CSS3 and HTML5 party late. Someone ought to tell Microsoft that their browser has caused many a heartache and angst amongst designers and developers who strive for equal user experience for all mankind irrespective of their browser of choice. Rant over!
Let us focus on people that are opting into the future and are ready to embrace new web technologies, moreover Chrome Frame has now been stable since 2010. In an effort to solve the aforementioned annoyance, a few people at Google got together and came up with a rather canny solution; wrap IE in Chrome’s clothing. And Chrome Frame was born.
What is Chrome Frame and why?
Chrome Frame (GCF) is a plug-in that brings new web technologies to IE. As of writing, technologies such as websockets
, and canvas
are not supported in IE8 and below. Chrome Frame alleviates this problem. GCF not only brings with it all the good CSS3 and HTML5 features that are otherwise not yet supported by Internet Explorer, it brings Chromes’ JavaScript V8 rendering engine which provides better performance, at least in IE8 and below.
This means developers and designers can invest the time otherwise spent fixing and adapting web apps to IE or worse still curtailing functionality and UX for IE users, to developing rich applications.
Chrome Frame is also a saving grace for users that are forevermore doomed to legacy IE because their machines are not running the Windows7 OS and consequently cannot upgrade to IE9+
Tapping into Chrome Frame
Simply adding the http-equiv
meta tag in the head section of your document, activates Chrome Frame in IE if the plug in is installed. Browsers that do not understand this tag will simply ignore it. The tag is as follows:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
The part to pay attention to is the content attribute. IE=edge
will coerce the browser to the latest rendering mode installed if the user or browser inadvertently switches to a older version. chrome=1
as you might gather enables Chrome Frame. You can also load Chrome Frame conditionally. Say you only want to activate it for users in IE7 and below, you would add chrome=IE7
in place of chrome=1
.
What if the user does not have Chrome Frame installed?
Well, the user can either do a manual install by simply visiting http://www.google.com/chromeframe or as I demonstrate further below we can add a script that will prompt the user to install the plug in if it is not present.
The beauty of Chrome Frame is that the user does not need administrative rights to install the plugin. Simply append ?user=true
to http://www.google.com/ and you are off and running.
Implementing the detection script
In addition to the http-equiv meta tag discussed above, we can add the following script at the bottom (or head section) of our page:
Chrome Frame detection
<!--[if lt IE 9 ]> <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script> <![endif]-->
The snippet above is a Chrome Frame detection and install script that will run if the user is viewing your site in IE8 or below. A gentle prompt in form of an overlay page (not a popup) will be displayed to the user. It is really that simple. Note that the CFInstall.check()
method is at the heart of this script and takes several properties e.g,
- cssText: This is optional and allows you to style the prompt
iFrame
with your custom styles - onmissing: You can specify a custom callback function if GCF is missing
For a definitive list, visit the Chrome Frame developer guide.
To DEMONSTRATE, I have put together a simple canvas page and if you run it in IE8 or below and have Chrome Frame installed, you will see my Picaso-esque canvas drawing. Conversely, if you do not have Chrome Frame installed, you will not see that beauty. You will however be presented with an in-line dialog (not the obtrusive popup) to install Chrome Frame. Canvas is just one feature that IE8 and its older siblings do not support, there are many more where that came from.
Summary
Many big corporations and organisations are very reluctant to update to newer browsers citing financial implications to their IT departments and security risks associated with new software that has not been fully tested. These are all plausible reasons but they also hinder advancement in web technology.
Google Chrome Frame is an alternative and is a testament to Google’s enthusiasm and desire to move the web forward. Because IE has a big piece of the user pie but painfully slow at implementing the new web technologies, it cannot be taken lightly and efforts have to be made to drag it along into the future. For users who have made the wise move away from using IE as their primary browser, but have IE dependent applications, there are solutions such as IE-tab that emulate IE in other browsers.