Internet Explorer Conditional Statements Continued

Following on from my previous post on conditionals, this time I'll be looking at building your conditional statements and how to implement conditionals into your styling workflow.

Getting the Right Conditions

In the previous example the stylesheet is called for all versions of IE from 5 and onwards (potentially) forever (with the <!--[if IE]> statement). The problem is that CSS support, and the way different versions render your code, is constantly changing - and will change as long as new versions of browsers come out. That means that lumping fixes for all versions together in one file is likely to:

1. Give you a headache from using CSS hacks to apply rules to different versions of IE – which may not work in future releases
2. Make more work for you when new versions of IE come out and are implicitly broken by the rules you wrote to fix older versions.

Fortunately the conditions available to you give you enough flexibility to pinpoint specific versions of IE. I find that I tend to stick to a handful of identifiers and operators, but there are quite a few that you can use (see the Microsoft Developer Center for the full rundown).

Identifier	What it Does
IE	Returns true for all versions of IE including future releases
IE 6	Returns true for all versions of Internet Explorer 6
IE 7	Returns true for all versions of Internet Explorer 7

As well as using the identifiers for versions you can also additional conditions to broaden the scope or write more complex rules:

Condition	Definition
lte	Less Than or Equal – is the version used the same or earlier than the version given?
lt	Less Than – is the version used earlier than the version given?

There are also a number of others available if you want more complicated conditions such as AND, OR and NOT operators, but I don’t tend to use these. See the Developer Center link above for more details on these.

The reason these are important is that you can be very specific about which versions you’re fixing. You might only need to change a few lines of styling to bring IE6 in line and those same lines might be fine for IE5 too. In this case you only need one separate CSS file and you could implement it like this:

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

Otherwise you might have some real problems and need separate stylesheets for IE6 and IE7 in which case you might do this:

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

You could even overlap your stylesheets if required so that your ie_fixes.css applies to all versions before IE8 and you then have an ie6.css to specifically fine-tune IE6. Whatever you think is simplest to maintain in the long-run. Whatever your solution remember that, aside from the conditional statements, this is simply including consecutive stylesheets and the usual rules on styling precedence apply here. Put your IE-fixing stylesheets after your global styles so that you can actively override rules for IE where you need to.

Putting it Into Your Workflow

Now I know not everyone works in the same way, but I can tell you what works for me and then you can decide for yourself whether you will do the same.

Generally, as I use a Mac, I tend to work in a combination of Safari and CSSEdit. So naturally I get things looking right in these first and foremost. As a byproduct of this things generally behave much the same in Firefox and Opera so in most cases there’s little or no tweaks required to get to a state where the site’s consistent in all of these.

Once I’ve got a good base in the other browsers I then check it over in the appropriate versions of IE, usually starting with the latest and working backwards through them in order down to the earliest version agreed with our client. Again, fixes for IE8 tend to be minor and usually IE7 doesn’t cause too much bother so I’ll put any of these fixes into the main stylesheet if possible while keeping an eye on the other browsers to make sure nothing breaks. Once I’m happy with IE8 then IE7 I move on to six. Here I’m much more likely to find something IE6 specific. If I do then I add an IE6 only stylesheet to tweak and fix where necessary. By doing that I can get a pretty good match and I don’t end up breaking any of the other browsers with some obscure fix. In this case I would end up with something like this in the head:

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

By doing this I can be sure that all browsers (including IE6) will use the main styles.css styling and, by putting the conditional after the main styles, any styles I need to change or override for IE6 can be done easily without affecting anything else.