I did some testing today with Google Chrome Frame. I wanted to see if it would mesh with my normal methods for serving IE specific code and, as far as I can tell, it behaves exactly as desired.
Here’s the code I used to test
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="UTF-8">
<title>Testing Google Chrome Frame</title>
<style type="text/css">
h1 {
text-transform:capitalize;
color:#036;
font:24pt/1.6 Verdana, Geneva, sans-serif;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("conditional").innerHTML="<h1>This browser doesn't understand conditional compilation.</h1>";
/*@cc_on @*/
/*@if (@_win32)
document.getElementById("conditional").innerHTML="<h1>This browser understands conditional compilation</h1>";
/*@end @*/
}
</script>
</head>
<body>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<h1>This is Internet Explorer 6.</h1>
<![endif]>
<![if gte IE 7]>
<h1>This is Internet Explorer 7 or greater.</h1>
<![endif]>
<![endif]-->
<!--[if !IE]>-->
<h1>This Browser Doesn't Think it's Internet Explorer.</h1>
<!--<![endif]-->
<div id="conditional"> </div>
</body>
</html>
Here’s what this looks like in Internet Explorer 6
Internet Explorer 6 With Google Chrome Frame
Internet Explorer 6 With No Plugin
So, what’s going on? There are three important sections of code. The first is the meta tag itself. This leverages IE’s own X-UA-Compatible to “turn on” the Google Chrom Frame plugin. Without that flag set, nothing happens.
<meta http-equiv="X-UA-Compatible" content="chrome=1">
The second bit tests Conditional Compilation. Conditional compilation is a specially crafted comments system that only Internet Explorer understands. Browsers other than IE just skip over these comment blocks. Internet Explorer parses the logic and runs the code. In this case it checks @_win32 (are you a 32 bit windows machine?) That’s a basic test. It simply differentiates between browsers that understand conditional compilation and ones that don’t. As you can see in the above example, a GCF enabled browser doesn’t understand them. Which means you can safely leave conditional compilation blocks in your code for browsers without the plugin.
That’s what I expected and hoped for, so seeing that result makes me happy.
<script type="text/javascript">
window.onload=function(){
document.getElementById("conditional").innerHTML="<h1>This browser doesn't understand conditional compilation.</h1>";
/*@cc_on @*/
/*@if (@_win32)
document.getElementById("conditional").innerHTML="<h1>This browser understands conditional compilation</h1>";
/*@end @*/
}
</script>
The second block leverages Conditional Comments. This is another specially crafted comment pattern that only IE understands. I generally use this to serve IE version specific style sheets. Again, the GCF enabled browser doesn’t recognize this pattern as anything special and simply ignores it.
That’s a good thing. My ie6.css and ie7.css sheets will be mercifully ignored.
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<h1>This is Internet Explorer 6.</h1>
<![endif]>
<![if gte IE 7]>
<h1>This is Internet Explorer 7 or greater.</h1>
<![endif]>
<![endif]-->
<!--[if !IE]>-->
<h1>This Browser Doesn't Think it's Internet Explorer.</h1>
<!--<![endif]-->
As a side note, I’ll also be using this pattern to message IE6 users on my personal site, urging them to install GCF or upgrade to see the site as designed. Nothing too obtrusive, but at this point I feel like I ought to point out that IE6 is simply not being supported. Sadly I have no such option at work…