Behind The Scenes - Internet Explorer 9 Support

SupportBee works best in Chrome and Firefox. Since we were building a single page app and targeting early adopters, we spent all of our development and testing time on those two browsers. However, lately we have been seeing a lot more signups from Internet Explorer. To make our customer’s life easier, we recently launched IE9+ Support. Let’s talk about the process of dealing with the monster :)

Install VirtualBox and Windows Image

Since all of us here use Macbook Pros, we needed a virtual machine to install Windows OS for IE testing. VirtualBox and a Windows 7 image are perfect for the task. VirtualBox also allows quick Snapshot to record the current state of the virtual machine. This is particularly useful if you want to test on different versions of IE, say IE8 and IE9. Instead of wasting time on downgrading/uploading IE, you can quickly switch between snapshots.

Edit the Windows hosts File

In order to access your local server on your VirtualBox virtual machine, you need to edit the hosts file. Open your Windows hosts file in administrator mode. It is found here: C:\windows\system32\drivers\etc\hosts. Add the following line 10.0.2.2 localhost. Save the hosts file. Now you can visit http://localhost:3000 from within your virtual Windows environment. If you want to access a particular url with subdomain, say app.lvh.me, just add 10.0.2.2 app.lvh.me to the hosts file.

Firebug Lite

Both Chrome and Firefox have great developer tools for web developers to debug javascript, css… For IE, we choose FireBug Lite. FireBug Lite can be easily added as a bookmark: - Bookmark any page in IE, save and name it ‘Firebug Lite’ - Right click on the bookmark » Properties » Web Document tab, replace the URL content with the following Firebug Lite code.

Firebug Lite bookmark

That’s it. Anytime you click on the bookmark link, Firebug Lite will pop up at the bottom of IE window. Besides, IE itself will tell you the javascript errors of the current webpage.

JSON2.js

If you have not developed for IE for a while, you may not remember that IE does not ship with a native JSON implementation. Add Doug Crockford’ JSON2.js and you are good to go.

Improve CSS3 Rendering

Internet Explorer 9 doesn’t render CSS3 very well. That’s where CSS3PIE comes into play. PIE currently has full or partial support for the following CSS3 features:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

Do comment and share your own experience in making your website Internet Explorer compatible.



blog comments powered by Disqus
Anh Do
Anh Do