IE Browser Detection for CSS (Using Conditional Comments)

12 March 2009 - 1:00 AM / by Dominic Pettifer. 3 Comments for IE Browser Detection for CSS (Using Conditional Comments).

Technical Article - A simple, reliable way to perform browser detection for Internet Explorer browsers, in order to serve certain CSS or JavaScript files (or even HTML mark-up) to specific versions of IE, while ignoring other browsers. If you have to serve a certain style sheet file to a specific version of IE to steer your way around CSS browser rendering bugs, then this may come in handy.

Browser Detection for CSS

If you want to use a specific external StyleSheet file for IE6 users to work around CSS display/rendering bugs in IE6, then you need to perform some form of browser detection, detect that the user is using Internet Explorer 6 then use that particular IE6 only stylesheet, while not serving it to other more standards compliant browsers such as Safari or Firefox. In server-side code you could read the user-agent header in code, check for IE6 then programmatically render an external style sheet link on the page. Or you could use JavaScript to detect the IE version, and then output the correct stylesheet.

But there is a much simpler and better way. In your HTML page <head> section, add the following mark-up:

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

This is called a Conditional Comment. It's saying if the browser is Internet Explorer version 6 or earlier, then use the /css/ie6.css external stylesheet (in addition to other stylesheets you may have declared in the <head>). These are evaluated client-side, and require no server processing, so will work for PHP, JavaServlets, Ruby, plain static HTML files etc. It will only be picked up and read by IE browsers, other browsers (Firefox, Safari, Chrome etc.) will treat it as an ordinary HTML  and ignore it.

Similarly if you want to target IE version 7 only, you could use:

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

Or to target only version 7 and above:

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

Or you can target all non-IE browsers with:

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

Or all IE browsers with:

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

However, I would strongly advice against the last one, as it will blanket target all versions of IE, including potential future versions, and you can't predict how future versions will behave.

There is even speculation that many of the website compatibility issues plaguing the new IE8 are the result of faulty browser detection, with websites serving a special version of the site to IE to work around rendering bugs. However, this borked version is also being served to IE8 which doesn't have these rendering bugs, causing the site to break, and using <!--[if IE]> could be one of the main causes of this.

Other Uses

These Conditional Comments have other uses, as they can be used to conditionally serve any form of HTML. So you can use them to add JavaScript files, HTML content, even direct CSS and Javascript code in the page:

<!--[if lte IE 6]>
    <p class="massiveLetters">You are using Internet Explorer 6, for the love of God please upgrade!!</p>

    <script type="text/javascript">
        alert('Stop Using IE6 now!!');
    </script>
<![endif]-->

I find Conditional Comments a great alternative to normal IE hacks such as the star-HTML hack. They allow you to keep your main CSS file clean of these hacks, and fully Standards Compliant, while you stick all your crappy IE specific rubbish into its own file. Also the file won't be downloaded for other browsers, saving you some bandwidth. Technically is it a form of CSS Hack, but one that doesn't rely on one browser bug to fix another browser bug.

I'll often use the following setup in my websites:

<head>
    ......other heady stuff.....

    <link type="text/css" rel="stylesheet" href="/css/standard.css" />

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

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

</head>

So IE6 will pull down standard.css and ie6.css. ie6.css appears later so with any conflicting styles, ie6.css will take priority, so you can use ie6.css to override any style rules that are causing rendering issues in IE6. Similarly, IE7 will pull down standard.css and ie7.css. All other browsers will pull down standard.css only.

Other Browsers?

Conditional Comments only work for Internet Explorer. You can't use them to detect Opera for instance. You could overcome this with server-side detection, but this is prone to errors, and newer browsers may alter the user agent header, so be careful. However, almost all other non-IE browsers already render in a standards compliant manner, so this has never been an issue for me.

IE Browser Detection for CSS (Using Conditional Comments)

Browser Detection for CSS

Other Uses

Other Browsers?

3 Comments on "Using Conditional Comments"

RE: Using Conditional Comments

Target all non-IE browsers

RE: Using Conditional Comments

Leave a Comment

Random Image

Quick Poll

Latest Tweets