foxsoft ltd

The debate over whether it’s good practice to use Internet Explorer conditionals continues, but for many they’re a necessary evil when trying to get Explorer to play nice with your styles. Personally I believe that sensible use of conditionals is much better than the alternatives.

How Conditionals Work

IE’s conditionals are a very simple idea that has been around for an age. They were introduced in IE5 as a lightweight alternative to scripts that identify the client browser being used and allows you to execute code accordingly. With it you can implement HTML code depending on the specific version of IE being used.

Their format is based upon an HTML comment and the idea is that, because they’re comments, most browsers will ignore conditionals. This allowed Microsoft to hide a bit of logic in plain sight so as not to affect other browsers and tell IE to look out for code hidden there. For example:

      <!--[if IE]><p>Hey there, Internet Explorer user!<![endif]-->
    

You’ll often see conditionals split over several lines for better clarity, but I’ve kept it to one line to illustrate that it’s just a glorified comment. If you ignore the noise from the if and endif parts you can see that this is simply a commented paragraph with some trimmings:

      <!-- <p>Hey there, Internet Explorer user! -->
    

Great, So How Does This Fix IE Styling?

Well, you’re not limited to putting paragraphs of text into your conditionals, you can pretty well put any bit of HTML in there. You can put it in the page’s head and fill it with a JavaScript snippet or a few lines of CSS. Better yet, you can use it to include a separate file:

      <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="ie_fixes.css" />
      <![endif]-->
    

So now you have a separate stylesheet that loads for IE browsers and fixes any styling inconsistencies you have. This might look like the perfect answer, but this is actually a bad example which highlights one of the pitfalls of conditionals.

Are Conditionals Right (for You)?

I’ll be the first to admit that this isn’t the perfect solution to the problem of styling on different browsers, but it does have some advantages:

• It’s a native function of all current IE browsers and is likely to continue in newer versions
• It validates despite observations that it doesn’t strictly adhere to the HTML spec (comments are usually ignored by browsers and validators)
• It doesn’t rely on bugs – unlike the many CSS hacks that would act as alternatives to this method. Relying on hacks would mean a higher chance that new releases of browsers interpret your styling in unexpected ways

But conditionals also have their share of criticisms:

• It’s not strictly standards compliant (as mentioned above)
• It goes against the principles of graceful degradation and fools clients into think that sites can and should look identical in all browsers
• Maintaining the site becomes more complicated as future design changes need to be made to multiple files, sometimes affecting the same items

To me, Internet Explorer conditional statements are a useful tool that every developer should know about and understand. Hopefully as browser consistency improves so conditionals will fade into the past with the browsers that they aid. Until then they should be used intelligently and sparingly and care should be taken not to cause yourself or your colleagues problems in the future.

For now I'm going to have to leave it there, but hopefully I've given you a little bit of background and understanding on the subject. In my next post I'll go into some more detail on best practice when using conditionals and how I approach them in the course of developing a website.