How to write Internet Explorer specific CSS

If you work with CSS, you know that at times you will need to write IE-specific styles… or worse, IE-version specific styles. Some particularly common examples would be when you’re working with the position property, or padding/margins, where it’s quite common for the placement to vary between IE and other browsers. There are a number of different approaches that have been tried, including JavaScript plugins that (only somewhat reliably) detect the browser type and version, CSS hacks that for reasons that don’t need to be stated, should probably be avoided (they’re hacks), conditional comments, and probably more.

Conditional comments are one of the prefered ways, and probably the most valid and reliable. A conditional comment is a type of HTML comment that IE has been built to recognize since IE5+, for cases such as these. All other browsers simply see them as regular HTML comments and ignore them, while IE on the other hand will parse the contents. In addition, you can specify version conditions, so IE will ONLY parse the contents if certain version conditions are met. For example:

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

<!--[if IE 7]>
    <link rel="stylesheet" href="IE7only.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" href="greaterThanIE8.css" /> 
<![endif]-->

<!--[if lt IE 9]>
    <link rel="stylesheet" href="lessThanIE9.css" /> 
<![endif]-->

This, as is apparent, gives you the ability to write styles for specific versions of IE. The drawback of this is now you have to have different CSS files for each different condition, which might become cumbersome.

While this is great for providing IE-version specific CSS, is there more that we can do with it? What about cases where we may want to run different (or variations of) JS/jQuery scripts in IE (usually still related to styling in some way).

Using a technique developed by Paul Irish, we can provide a reliable way to identify IE (and version) in JS/jQ, as well as get around the CSS-file-for-each-version problem. We do this by wrapping the <html> in a conditional comment instead:

<!--[if lt IE 7]>      <html class="ltIE7 ltIE8 ltIE9"> <![endif]-->
<!--[if IE 7]>         <html class="isIE7 ltIE8 ltIE9" > <![endif]-->
<!--[if IE 8]>         <html class="isIE8 ltIE9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

The first three cases are fairly clear in what they are trying to accomplish, but what about the fourth case? The fourth case takes a little cognitive deduction to figure out what is going on, but the simple answer is: IE9+, and non-IE browsers will parse the contents. I’ll leave it to you to figure out why.

This allows us to write style such as the following, all in a single CSS file:

.myStyle
{
    <!-- some styles -->
}

.isIE7 .myStyle
{
    <!-- some styles specifically for IE7 -->
}

For jQuery, we can also do something such as:

if($("html").hasClass("ltIE7"))
{    
    // tell the user IE versions previous to IE7 are not supported
}

One thought on “How to write Internet Explorer specific CSS

  1. John Pillion Post author

    Edit: The HTML tags were incorrectly formatted in the original post, with the “class” coming before the “html”, which is now corrected.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>