CODEWITHSUNDEEP
cssinternet-explorer
program247365
program247365

Reputation: 4019

Targeting IE Using Conditional Comments and Just One Stylesheet

Updated: [See third technique at the bottom of this question regarding Paul Irish's technique!]

I'm wondering what the web devs out there think about these two methods? Which is best? Considerations for both?

Method 1:

Single CSS File for all styles, with conditional comments in wrapper divs to apply specific IDs to HTML.

CSS

  /*** For IE 7 and up ***/

#ie7andup #anyelement {
    border-color : blue;
}

HTML

<!--[if gte IE 7]>
<div id="ie7andup">
<![endif]-->

    <!--[if IE 6]>
    <div id="ie6only">
    <![endif]-->

        <!--[if IE 5.5000]>
        <div id="ie5-5only">
        <![endif]-->

            <!--[if lt IE 5.5000]>
            <div id="ie5-01only">
            <![endif]-->

<div id="anyelement">a box with some content</div>

[... more page content ...]


    <!--[if IE]>
    </div>
    <![endif]-->

(via http://www.positioniseverything.net/articles/cc-plus.html)

Method 2:

Separate IE stylesheets, with conditional comments including those CSS files.

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

(via http://reference.sitepoint.com/css/conditionalcomments)

For targeting all the IE's and fixing their issues. Wouldn't the first method be cleaner in your CSS, and simplify it? Or does it make sense to have separate CSS files for IE?

I'd love to see some links to other references/articles defending one method over the other. I see most people using the latter.

Update - Check out this technique from Paul Irish!:

This could be even better. How about this way? That way with Modernizer you could have your one stylesheet have specific section for IEs within it -

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Thoughts on that?

Upvotes: 1

Views: 438

Answers (2)

Tom
Tom

Reputation: 3331

Method two also reduces unnecessary traffic. Internet browsers don't share their caches so IE7 downloading IE6 his styleinfo would be useless. Regarding your comment about 'clean CSS', large applications are often easier to maintain when stylesheets are split per 'subject' like UI, dialogs, IE etc. Also, downloading multiple medium-sized files is faster than a large size file because of pipelining which is present in all modern browsers.

Upvotes: 2

kinakuta
kinakuta

Reputation: 9037

I prefer method 2. Any style information in the body seems less maintainable to me because you have to search for it anytime you want to make changes and also has to be changed on a page by page basis.

Upvotes: 2

Related Questions