Modern Software Experience

2009-09-30

Internet Explorer

Chrome Frame

Chrome Frame is an Internet Explorer plug-in, but not just any plug-in; it includes the WebKit rendering engine and takes over from Trident when a page includes the Chrome meta-tag. Just including that tag on your pages is all you need to do; once you’ve included the Chrome meta-tag, any Internet Explorer user who has Chrome Frame installed will enjoy it’s superior rendering.

new development option

Until Google introduced Chrome Frame, there were three basic strategies to deal with Internet Explorer many shortcomings:

All three approaches have advantages and disadvantages. In practice, most sites employ a combination of these approaches. They forgo scalable vector graphics because IE still does not support it, create special style sheets because its CSS support is defective, and include a brief banner telling users that the site looks better in Chrome or Firefox, because some of its web site features are have not been duplicated in IE.

new development options

The introduction of Chrome Frame enables two other options:

The first option is a tip, the second a demand, but a much milder demand than demanding that users switch from Internet Explorer to web browser. Requiring the installation of a plug-in has become a common web practice that few users object to. Most all users install Adobe Flash and Microsoft Silverlight the first time a web site asks them to do so.

practical approach

For most web developers, the most practical approach is probably to start by enabling Chrome Frame by adding the Chrome meta-tag, then encouraging Internet users to install the plug-in and finally, when enough Internet Explorer users have done so, start demanding it, so that they are finally free to develop to web standards and spend the time they used to waste on supporting IE on improving the web site instead.

detection

Whatever your exact approach to taking advantage of the Chrome Frame plug-in, if you want to either recommend or demand the installation of the plug-in, you need to detect whether it is already installed or not. After all, you only want to prompt for installation of Chrome Frame if it is not installed yet.

Google has documented two detection techniques. I will discuss these two techniques and then present a third technique, one that can be used with static web pages.

user-agent string

Every browser identifies itself to the web server with a user-agent string. Web servers use this to server browser-specific content, often to serve minimally sized pages optimised for the particular browser.

When the web browser recognises Internet Explorer, it will sent a page suited for Internet Explorer. However, when Chrome Frame has been installed, it would probably be best to send a page to Chrome Frame.

Chrome Frame makes it presence known by appending the word chromeframe to the user-agent string. That makes it easy to distinguish between web browsers, Internet Explorer and Internet Explorer with Chrome Frame.

The web server can send Chrome Frame the same page as it sends to Google Chrome (which is probably the generic web page), it just has to add the Chrome meta-tag to the page header. If the server forgets to do that, the page will rendered by Trident instead of Chrome Frame.

JavaScript detection

Many web developers never use user-agent string to serve different pages to browsers, but always serve the same page to all browsers. Another way to detect the presence or absence Chrome Frame and optionally prompt the user to install it is through JavaScript.

Google provides just such a script in their Google Frame Developer’s Guide. It is a fairly simple script because it relies on the ready-made function CFInstall() which does all the hard work.

Google’s example code uses the CFInstall.min.js script stored on the googleapis.com site, but the script is licensed under a BSD-style license, so you may copy it to your own site.

Google’s CFInstall code is more complicated than it needs to be, as it is was created to be work within any browser. Some developers have reported that the current detection code slows browsers down. It is smartest to only use this function within Internet Explorer, by taking advantage of Internet Explorer’s conditional comments, like this:


<!--[if IE]>
<script>
CFInstall.check({});
</script>
<![endif]-->

JavaScript demand

An important weakness of the JavaScript detection is that only works if the user allows JavaScript. Many security-aware users disable JavaScript, and rely on something like the NoScript plug-in to selectively enable JavaScript for a few trusted sites.

When the script is combined with the Internet Explorer conditional comments the restriction is considerable less severe; now the script will only be run inside Internet Explorer. Most security-aware users tend to avoid Internet Explorer altogether, so few Internet Explorer users turn its JavaScript support off.

Still, it depends on a feature that may be unavailable, so a better method remains desirable. That method is to combine the Chrome meta-tag with conditional comments.

Internet Explorer conditional comments

detecting Internet Explorer

Internet Explorer conditional comments are documented feature of Internet Explorer, that can be used to serve different content to Internet Explorer than to web browsers. Internet Explorer conditional comments can even be to serve different content to different versions of Internet Explorer.

However, as designed, Microsoft’s conditional comments used to bracket content served to web browsers renders your page invalid. The article Valid Internet Explorer Conditional Comments discusses this design defect and how the comments used to bracket content for IE can be used to solve it. It looks a bit odd, but it is valid HTML and it works.


<!--[if IE]> <![if !IE]> <![endif]-->
<h2>You are not using Internet Explorer.</h2>
<p>You are using a web browser.</p>
<p>Perhaps Google Chrome.</p>
<!--[if IE]> <![endif]> <![endif]-->

<!--[if IE]>
<h2>You are using Internet Explorer.</h2>
<p>Perhaps Chrome Frame is installed.</p>
<p>Perhaps Chrome Frame isn’t installed.</p>
<p>I have no idea.</p>
<![endif]-->

detecting Chrome Frame

Internet Explorer’s conditional comments allows serving different content to Internet Explorer and web browsers, but do not provide a way to distinguish between plain Internet Explorer and Internet Explorer with Chrome Frame. Chrome Frame does not add any additional conditional comments to Internet Explorer, to support something like this:


<!-- This does not work. -->

<!--[if IE]> <![if !IE]> <![endif]-->
<h2>You are not using Internet Explorer.</h2>
<p>You are using a web browser.</p>
<p>Perhaps Google Chrome.</p>
<!--[if IE]> <![endif]> <![endif]-->

<!--[if IE]>
<h2>You are using Internet Explorer.</h2>
<!--[if CF]>
<p>Chrome Frame is installed.</p>
<![endif]-->
<!--[if !CF] -->
<p>Chrome Frame isn’t installed.</p>
<!--[endif]-->
<![endif]-->

Do note that if this detection where possible, it would require us to provide code for three different cases, while there is no need to do so; we can serve the same content to Internet Explorer with Chrome Frame as we serve to web browsers. The only case we need to detect is Internet Explorer without Chrome Frame.

not detecting Chrome Frame

Here is the key realisation to the third detection technique: there is no need to detect Chrome Frame, because Chrome Frame activates automatically. The trick is to combine Internet Explorer conditional comments with the Chrome meta-tag, like this:

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

...

<!--[if IE]> <![if !IE]> <![endif]-->
<h2>You are not using Internet Explorer.</h2>
<p>You seem to be using a web browser.</p>
<p>You may be using IE with Chrome Frame.</p>
<p>The difference does not matter to me.</p>
<!--[if IE]> <![endif]> <![endif]-->

<!--[if IE]>
<h2>You are using Internet Explorer.</h2>
<p>Chrome Frame is not installed.</p>
<p>Please install Chrome Frame.</p>
<![endif]-->

Remember, when Chrome Frame detects the Chrome meta-tag, the page will not be rendered by Trident, but by WebKit. Only if Chrome Frame is not installed will the code between <!--[if IE]> and <![endif]-->
be executed.

The beauty of this method is that it essentially avoids the need to detect Chrome Frame, because it activates upon the meta-tag. It is almost as if you let Chrome Frame detect itself.

If you currently have a page that already uses Internet Explorer conditional comments to distinguish between web browsers and Internet Explorer, all you need to do is add the Chrome meta-tag to the header to make this work - and that is exactly what you need to do take advantage of Chrome Frame anyway.

future Chrome Frame

This technique will continue to work if a future version of Chrome Frame allows the user to override Chrome Frame and demand Trident rendering; the page will be rendered by Internet Explorer as desired.
That the page would then request installation Chrome Frame when Chrome Frame is in fact installed already only serves to confirm to the user that the override was successful. That is the same behaviour as occurs when the user has installed but disabled the Chrome Frame plug-in.

future Internet Explorer

The technique will continue to work in a future version of Internet Explorer that does support web standards. It is easy enough for the user to deinstall Chrome Frame when it is no longer needed, to avoid activating, but the prompt to install Chrome Frame remains. That is not a big issue if the prompt isn’t a pop-up, but it remains best to not prompt unnecessarily, while continuing to offer the prompt to users of older versions.

Suppose that Internet Explorer 9 provides sufficient web standards support to make Chrome Frame unnecessary, the code can be adapted like this:

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

...

<!--[if IE]> <![if !IE]> <![endif]-->
<h2>You are not using Internet Explorer.</h2>
<p>You seem to be using a web browser.</p>
<p>You may be using IE with Chrome Frame.</p>
<p>The difference does not matter to me.</p>
<!--[if IE]> <![endif]> <![endif]-->

<!--[if IE]>
<h2>You are using Internet Explorer.</h2>
<p>Chrome Frame is not installed.</p>

<!--[if gte IE 9]>
<p>You are using Internet Explorer 9 or later.</p>
<p>You do not need Chrome Frame.</p>
<![endif]-->

<!--[if lt IE 9]>
<p>You are using Internet Explorer 8 or earlier.</p>
<p>Please upgrade to Internet Explorer 9 or later.</p>
<p>To continue now, please install Chrome Frame.</p>
<![endif]-->

<![endif]-->

Do notice that both comparisons do compare to the same version - the first version that support standards sufficiently - in a way that ensures that they complement each other exactly, without any overlap or a gap in between.

conclusion

Google has provided two ways to detect Chrome Frame; one for web servers, which can only be used by web developers that may modify the web server, and one for JavaScript pages, which does not work if the user disables JavaScript.

The third method discussed here does the right thing without requiring any server privileges or client-side scripting. It avoids the need to actively detect Chrome Frame, by passively relying on the documented behaviour of both Internet Explorer and Chrome Frame to serve different content to Internet Explorer with and Internet Explorer without Chrome Frame.

updates

2009-09-04 Chrome Frame for Web Browsers & Firefox Frame

There is some speculation about the possibility of Chrome Frame for competing web browsers, such as Mozilla Firefox. Until Chrome Frame is much more like IE Tab and allows considerable user control, doing so would not be smart move.

The only case that needs be detected is that of visitors using Internet Explorer in lieu of a web browser.

Even if Google were to release Chrome Frame for Firefox today, there still would not be any need to update the detection method, as both Mozilla Firefox and Google Chrome do a fine job of displaying web pages. The only case that needs be detected is that of visitors using Internet Explorer in lieu of a web browser. If Mozilla were to release Firefox Frame, the code should be updated to offer both Chrome Frame and Firefox Frame and let visitors pick whichever they like best.

links

Internet Explorer

Chrome Frame