Internet Explorer Conditional Comments

Internet Explorer: the bane of any web developer trying to make their pages cross-browser compatible. Sure it has improved a lot with the last couple of versions, but because it has always been such a popular browser its older versions are still in use by an arguably large percentage of the public. Not long ago I was at the library only to find that their computers are still equipped with IE6! The problem of course is that these old versions don’t seem to follow any logic other than their own in interpreting HTML and CSS. How many times have you worked hard on a webpage when, after hours of toiling away at it, you decide to check it on an old version of IE only to find that it doesn’t know how to interpret what you’ve created at all and your masterpiece is displayed as something else entirely — something that probably doesn’t make any sense!? Worse yet, each version of IE will display a unique kind of mess.

The importance of cross-browser compatibility

Trying to write HTML and CSS in such a way that every browser will interpret it in the same way can be very difficult, possibly impossible and most likely very time consuming. This is the reason a lot of web developers throw in the towel and decide to ignore outdated browsers. I do agree that the web needs to move on and the less lip service we pay to outdated browsers the faster we will achieve that goal — but we don’t always have that choice. Sometimes clients demand that their websites be compatible with old browsers. Other times we can check statistics and see that the percentage of users accessing a website with outdated browsers really is significant — of course that percentage varies with each website and the type of audience that has an interest in it.

How IE conditional comments work

So it seems the problem is writing one absolute piece of code that is interpreted equally by every web browser, or at least every modern browser and Internet Explorer versions going back to 6 (everything else is probably negligible despite the site’s audience and this might need to be explained to certain clients). Then let’s eliminate the problem: we will not write an absolute piece of code for every browser; we will write code that is conditional. Since we are not worried about the outdated versions of any browsers besides IE6 these “conditional comments” will specifically target IE and will be ignored by any other browsers. It sounds almost like we will be programming using if-else statements. In principle that’s how conditional comments work, but in practice it just involves writing a couple extra lines of HTML, no programming knowledge required. These comments are only read by IE browsers. It’s as if its developers unleashed an unspeakable evil upon us and then felt guilty and decided to throw us a bone.

Writing conditional comments

Conditional comments can be used either within the head of your page (to present different stylesheets depending on the browser, for example) or directly in the body. They look like this:

<!--[if IE]>
According to the conditional comment this is IE.
<![endif]-->

Simple, isn’t it?  If the website is being accessed through IE (any version in this case) the text between the opening and closing comments will be displayed; otherwise it will be completely ignored.

If we wanted to target a specific version of IE, this is how it would look:

<!--[if IE 6]>
According to the conditional comment this is IE6.
<![endif]-->

<!--[if IE 7]>
According to the conditional comment this is IE7.
<![endif]-->

<!--[if IE 8]>
According to the conditional comment this is IE8.
<![endif]-->

<!--[if IE 9]>
According to the conditional comment this is IE9.
<![endif]-->

As of this writing we have conditional comments up to IE9 available to us. It’s just as well since IE10 seems to have finally caught up with the times.

“What if I want to target all IE versions under or above a specific one?” I’m glad you asked. In this case we would use lt (lower than), lte (lower than or equal), gt (greater than) or gte (greater than or equal) in our syntax. Like so:

<!--[if lte IE 9]>
According to the conditional comment this is all versions of IE up to and including version 9.
<![endif]-->

Finally it is also possible to target every browser except IE. There are two ways to do achieve this:

<![if !IE]>
According to the conditional comment this is not IE.
<![endif]>

<!--[if !IE]><!-->
According to the conditional comment this is not IE.
<!--<![endif]-->

Note that the first way required that we remove the dashes from the conditional comments! The second way looks more complicated but if you write your code in a program with color coding, or which in some way modifies your text to make it easier to visualize its different parts (comments in this case) the second method might be preferrable. Try it out and see which works better for you. The output to the browser will be exactly the same.

Similarly we have the option of target every browser except a certain version of IE. Once more, we have two ways of doing this, as shown below:

<![if !IE 6]>
According to the conditional comment this is not IE6.
<![endif]>

<!--[if !IE 6]><!-->
According to the conditional comment this is not IE6.
<!--<![endif]-->

Again, notice the missing dashes in the first method!

Finally, there might be times when we need to target more than one browser without using greater/less than [or equal]. For this we can use operators! Available in our arsenal are the subexpression operator (), the OR operator (|) and the AND operator (&). Here’s an example using OR:

<!--[if (IE 6)|(IE 7)]>
According to the conditional comment this is IE6 or IE7.
<![endif]-->

As with the other “not IE” conditional comments we have a choice of two different syntaxes when using “not IE” with operators. This is how they look:

<![if (!IE)|(gt IE 7)]>
According to the conditional comment this is either not IE or it is IE8+.
<![endif]>

<!--[if (!IE)|(gt IE 7)]><!-->
According to the conditional comment this is either not IE or it is IE8+.
<!--<![endif]-->

More tools that help development for different browsers/versions of IE

IE7.js is “a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.”

Also check out my article about testing on different browsers and browser versions using VirtualBox and go make your pages cross-browser compatible!

Test on different browser versions with VirtualBox

As web developers it is imperative to be constantly checking the websites we are working on in different browsers since they each have their specific ways of interpreting the code we write. The point is to make sure that our sites are presentable for as many different users as possible. There are other factors to consider like operating system and screen resolution, but in this article I want to concentrate on browsers, specifically their different versions and how we can get them to co-exist in the same machine — something that a browser like Internet Explorer doesn’t normally allow.  One way of doing this is by setting up virtual machines. In this article you will learn how to do that using VirtualBox, an incredibly powerful program that is free and will, for our purposes, grant us separate environments in which to install several versions of each browser.

A consistently usable and attractive browsing experience

Although it is a good start to check our websites in different browsers as we are coding them it is perhaps even more important to check them on different versions of those browsers: we can usually count on all of the latest versions supporting — to varying degrees — new technologies like HTML5 and CSS3, but at the same time we can always count on a significant number of users not having the latest versions of those browsers installed. That means they may miss out on those features specific to HTML5 and CSS3. It is generally agreed upon that it is bad practice to tell users to upgrade their browsers. Much better and more effective is to make sure that our code smoothly “downgrades” in those situations, presenting those users with an experience that is still relatively attractive and completely usable.

browsers

As I’ve mentioned the dilemma is that certain developers do not actually allow us to install several versions of their browsers. This is notoriously true for Internet Explorer. I also experienced it with Firefox, but apparently there is a very simple way around this. I have not tried it with other browsers, but considering that Internet Explorer is one of the most used browsers out there, it is critical to test on its older versions as well. This is particularly true since this specific browser comes pre-installed with Windows and less tech-savvy people may never upgrade it.

How does VirtualBox work?

vbox_logoHaving access to several computers in which to install the different versions of our browsers might technically seem like the perfect solution — if it weren’t severely impractical assuming that we even had access to several physical machines and were allowed to overwrite their browser installations.

Enter VirtualBox: a “virtualizer” that allows us to install several virtual machines (in essence operating systems) in just one physical machine. VirtualBox is free, user-friendly, chock-full of features and in contrast to some other virtualizers/emulators it is FAST! Plus it supports shared folders and virtual USB controllers in addition to the usual floppy and CDROM drive support.

The list of operating systems to choose from is huge; in fact I can’t think of any OS that is missing. But it is not a completely free ride for pirates: you do need to have the installation disk for your desired OS. The installation will be done as if on a physical machine.

Installing and using VirtualBox

To begin, grab a copy of VirtualBox here. After you’ve installed it, setting up different virtual machines is pretty straight-forward: just click on “New” and follow the wizard. Once you’re up and running with an OS installed in your virtual machine, there are several things you can do to make your VirtualBox experience even easier:

  • Clone your virtual machines. This is the first thing you should do after installing an OS in your virtual machine. It means that you will have a fresh copy of the installation ready for your next project or in case you mess something up. Always have a fresh copy available to avoid having to install the OS again. You can clone a virtual machine simply by right-clicking it in the VirtualBox Manager and choosing “Clone…”
  • Set up shared folders. This is very important if you’re planning to use your virtual machines to check your websites on different browsers.1 Failing to set up virtual folders means that you will have to constantly be copying updated files of your website to each individual virtual machine — killing your time, creativity, and sanity! It couldn’t be much easier to share folders between your host and your virtual “guest” OS:
    1. First you will need to install “Guest Additions.” From your virtual machine’s window, go to “Devices -> Install Guest Additions…” and follow the wizard. You only need to do this once in VirtualBox; shared folders will then work for all of your virtual machines.
    2. Now you are ready to set up shared folders. Go to “Devices -> Shared Folders…” and add the folders you would like access to by clicking on the little folder with a plus sign. Make sure to check “Make Permanent” for each folder you add, otherwise they will not be available when you restart the virtual machine.
    3. The folders you’ve shared from your host machine should now be available in your virtual machine. If it is running Windows you can access them by going to Start -> Run…, typing “explorer” and hitting enter.  On the window that pops up click the + arrow next to “My Network Places,” then the + arrow next to “Entire Network.” Finally click the + arrow next to “VirtualBox Shared Folders” and select the folder that is revealed. Note the address of that folder. An alternative to these steps is to simply type in that address. It may vary in different versions of VirtualBox, but for me the address is “\Vboxsvr”
  • Shutting down your virtual machine. Actually don’t do it. There isn’t actually anything wrong with shutting down your virtual machine, but there is seldom a point. Saving the machine state instead, will make it much faster to start up again the next time you want to use that particular virtual machine. You can do this by going to Machine -> Close… and choosing “Save the machine state.” Also be aware that it’s not necessary to exit a virtual machine in order to use another: you can run as many of them as you want, simultaneously.

1 If your website is running off a server (e.g. Apache HTTP server) on your host machine it is not necessary to set up shared folders since you should be accessing the website through the server and not directly from its folder. To see a website that is on a server, simply go to its IP address.

I personally use DesktopServer for my server needs. It is aimed at developing WordPress websites, but works just as well for regular sites. Websites hosted on DesktopServer are usually accessed from fictional “.dev” domain names, but from the program’s window it is possible to assign an IP address to a site. Following are the directions, originally written by Stephen Carroll at the ServerPress forums:

  1. From DesktopServer’s main list of options, select “Import, export or share…”
  2. Select “Share…”, followed by clicking the next button. You’ll then be presented with a list of sites.
  3. Select the website you wish to share and select the “LAN” option (please make a note of the IP Address).
  4. Be sure to click next to save your options and automatically restart the server. You will now be able to access your site via the IP address on both your local and remote computers and mobile devices on you LAN. 

A few more things…