How to target IE6 for CSS styling using CSS Conditional Comments

The Internet Exploer 6 market share has decreased over the years, especially now with IE9 available. However sometimes we still want to target IE6 to apply special CSS styling rules. In this article I will demonstrate the best practice for targeting IE6 for CSS using CSS Conditional Comments.

A common method of targeting IE6 is using Javascript to read the User-Agent. Of course this is not a very accessible solution because of the possibility of Javascript being disabled.

The solution

HTML/CSS Conditional Comments is the solution. Using these, we can effectively target specific versions of Internet Explorer to override style rules.

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

The above code will include the ie6 only stylesheet into the page if the client browser is IE6. We can also insert a style block instead of pulling in an entire stylesheet, like this:

Code <!--[if IE 6]>
    <style type="text/css">
        body
        {
            background-color:red; /* apply red background for IE6 */
        }
    </style>
<![endif]-->

We're also able to target other versions of Internet Explorer using the same method, just change the version number. We can even target all versions of Internet Explorer. See beloe for the alternative syntax uses:

Comments

There are 0 responses. Why not add a comment? No registration required.

Leave a Comment

Enter Code

Refresh code

Menu

Firefox Addons