Magento Extension: Google Chrome Frame + IE UA Compatibility
I'm proud to announce the release of my first extension for Magento — a very simple addon that makes it really easy to make your site compatible with Google Chrome Frame and also to define document compatibility for IE. If you run a site that uses a lot of HTML5 or JavaScript, chances are you've been frustrated trying to make everything work with Internet Explorer. Chrome Frame delivers a better experience for your customers by rendering your site in the Chrome engine, without needing a separate browser. And now that GCF doesn't require admin rights to install, it's much more practical for business and enterprise users who are locked into an IE-only workstation. You can choose to either prompt those without GCF to install it, or remain completely invisible to the user and only render in GCF if it's already installed.
Even if you don't want to use Chrome Frame, The extension allows you to add the X-UA-Compatible tag to your pages and direct newer versions of IE to render your page with a certain rendering engine. This can help you avoid having IE users break your site with the dreaded Compatibility View, or fixing some IE 9 bugs with Magento's old version of Prototype.
Setting Up Google Chrome Frame
When you install the extension, you'll get a "Google Chrome Frame" tab in your system configuration. In here are three different sections:
Activation
Use Google Chrome Frame:
This is a simple toggle. If set to "Yes", users with GCF installed will use it to render your site. If set to "No", GCF will never be used to render your site, regardless of whether it is installed or not.
User Prompt
IE users with the versions selected will be prompted to install GCF on their first visit to your site. If they close the prompt without installing, a cookie is set and they will not be asked again. If you don't want to prompt any users to install GCF, select none of the options here. GCF is compatible with Internet Explorer versions 6-9.
Prompt Method:
Choose how the prompt should be shown to the users you've selected. Display an overlay over the page, or choose a page element to insert an iframe into. You can also launch a popup, but be aware that popup blocking software may prevent most users from seeing it.
Inline Element:
If you've chosen Inline above, specify the element in which to insert the iframe. If you don't specify an element, one will be created at the top of the document (but then Overlay is probably the better choice).
Post-Install Destination:
If you so choose, specify a page that users who install GCF will be redirected to after accepting the install. You may want to have a CMS page that describes what they're installing, for example. Leave blank to keep the user on whatever page they were browsing.
Internet Explorer UA Compatibility
Insert a META tag that tells newer versions of IE (8 and later) which rendering engine to use. Choose "No" to not specify and let IE figure it out.
IE Compatibility Version:
If "Yes" is chosen above, choose how to make IE compatibility behave. The modes are, as taken from Understanding Document Compatibility Modes on MSDN:
- IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others.
- IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.
- IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a<!doctype> directive.
- Emulate IE9 mode tells Internet Explorer to use the <!doctype> directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the <!doctype> directive.
- Emulate IE8 mode tells Internet Explorer to use the <!doctype> directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the <!doctype> directive.
- Emulate IE7 mode tells Internet Explorer to use the <!doctype> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the <!doctype> directive. For many websites, this is the preferred compatibility mode.
- IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Internet Explorer 5.
- Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a (hypothetical) future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.
For most Magento stores, there is little reason to use anything other than IE8, IE9, and Edge modes.
Download and Additional Info
The extension is now available on Magento Connect, but can also be downloaded here if you prefer: Decadentwaste_Chromeframe-0.1.0.zip
Release notes, known issues, and planned features are available on the version history page.
The extension has been tested to work with Magento 1.4.2 and 1.5.1, but will likely work with most other versions as well. If you install it on a different version, let me know how it goes! As with anything, be sure to test this on a development/staging site before deploying it to production.
Special thanks to Alan Storm for bringing the IE 9 issue to light.
Bug Reports and Feature Requests
If you find a bug or have an idea for an improvement or a new feature, please leave a comment on this post. Be sure to check the version history page first to see if a feature is already in the pipeline!