Home > html5, mobile development > The IE6 silver bullet for HTML5 CSS3 Webapp development: Chrome Frame

The IE6 silver bullet for HTML5 CSS3 Webapp development: Chrome Frame

Building javascript heavy webapps using html5 and css3 is tough when you have old but still stubbornly popular Internet Explorer browsers to support. The solution: Chrome Frame

In Google’s words:

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer.

In my words: Hello IE 6 render my shit automagically using Chrome.

Once installed, this meta tag in your html will tell IE to use Chrome’s engine to render the document:

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

Don’t have Chrome Frame installed yet? These few lines of condition IE logic will check and prompt:

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
         .chromeFrameInstallDefaultStyle {
           width: 800px;
           border: 5px solid blue;
           z-index: 99999;
         }
        </style>

        <script>
         // The conditional ensures that this code will only execute in IE,
         // Therefore we can use the IE-specific attachEvent without worry
         window.attachEvent("onload", function() {
           CFInstall.check({
             mode: "inline", // the default
             oninstall: function(){
                 alert("Chrome Frame is now installed. You may need to restart your browser.");
             }
           });
         });
        </script>
<![endif]-->

Chrome Frame is installed at the user level if the user does not have admin access (Win!). The documentation states a restart isn’t even necessary once installed but I’ve found in my tests that the browser does need to be fully restarted so I’ve included a post-install alert specifying so in my code.

Forcing a user to install a plug-in to see content is usually a no-no but when it comes to all-or-nothing HTML5 CSS3 webapps that need to span all browsers an devices with a single codebase sometimes those IE6 users can use a little prodding. To clarify, Chrome the web browser does not have to be installed beforehand and installing the plug-in does not install the Chrome browser. Chrome Frame’s name is a bit of a misnomer as the structure of your document is not modified and no DOM frame is used–everything is just rendered beautifully even in IE6 using Chrome’s versions of the WebKit layout engine and V8 JavaScript engine via the IE plugin.

Categories: html5, mobile development Tags:
  1. October 11th, 2011 at 12:06 | #1

    I thought plugins were bad? Wouldn’t it be better to design for a plugin like Flash since virtually all users already have it ;-)

  2. October 14th, 2011 at 09:07 | #2

    @Rob Not if your apps are focused on mobile including iOS with a single codebase for desktop and devices. With media queries and CSS frameworks like http://getskeleton.com HTML5 + CSS3 is the future of cross device development. Even on android where flash is often supported in the browser it has been a sluggish bad user experience. :(

  3. October 21st, 2012 at 23:30 | #3

    ?????????????????????????????€?

  1. No trackbacks yet.