Developing for Microsoft Internet Explorer has always been a bit of a chore for client-side developers.  In particular IE6, still the staple of corporate offices across the globe was released almost eight years ago and although admittedly IE7 and IE8 have both been huge improvements in reducing the gap between “proper CSS rendering” and the way Microsoft like to do things.

I’m sure many will share the same sense of relief I feel every time I log into my analytics and see that Microsoft’s browsers are continuing to dwindle in number. Sadly though, for the foreseeable future it is still a very definite requirement that website should be cross-browser compatible. This doesn’t always mean perfectly identical in every single way, but websites should always gracefully degrade without reducing functionality for those poor saps still using these antiquated technologies.

There are numerous hacks out there that allow you to take advantage of the quirks of a browser to force-feed CSS styles to it, but there is a much more robust and not so hack-dependant way of feeding Internet Explorer browsers additional data: Conditional Statements. These are propitiatory Microsoft tags which appear inside comments (so other browsers ignore them) and are very useful for feeding an additional style sheet to specific versions of IE (I usually end up with one for IE6 at the end of my development cycle just to clean things up a little), overwriting the declarations from your other stylesheets. For this reason, they should always appear in the head beneath your generic style sheet.

These statements look like this:

    <!--[if IE]>
        <i>anything in here will only be applied to
        Internet Explorer browsers</i>
    <![endif]-->

You can also use them to target specific browsers or groups of browsers using condition modifiers:

    <!--[if lte IE 7]>
        <i>anything in here will be applied to IE browsers with
        version number 7 or lower</i>
    <![endif]-->

    <!--[if gte IE 6]>
        <i>anything in here will be applied to IE browsers with
        version number 6 or higher</i>
    <![endif]-->

    <!--[if IE 8]>
        <i>anything in here will be applied only to IE8</i>
    <![endif]-->

The two modifiers are:
lt : less than
gt : greater than
and either can be followed by an e to make the statements or equal to.

The most common use for these statements is to feed specific CSS to the browsers to compensate for differences in CSS rendering, but you can also use it to feed the browser any other pieces of propitiatory code in your quest for cross-browser similarity.