IE-only Styles: Where Should They Be Placed?

Dealing with Internet Explorer is a fact of web design, and it isn’t going to go away anytime soon.

If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.

Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:

Option #1

A single IE-only stylesheet inside of a conditional comment; inside that file, different versions of IE are targeted with hacks.

Drawbacks to #1

• Every version of IE will load the extra styles, even the unused ones
• Potentially adds an extra HTTP request
• Changing something in the main stylesheet may require that you hunt down IE-only styles in a separate file

Benefits to #1

• IE styles are in one file, so they’re easy to maintain

Option #2

Multiple IE-only stylesheets inside conditionals, each targeting a different version of IE.

Drawbacks to #2

• Changing something in the main stylesheet may require that you hunt down IE-only styles in as many as 2 or more extra files

Benefits to #2

• No unnecessary HTTP requests
• No unnecessary lines of code loaded in the main stylesheet

Option #3

A single stylesheet that targets all browser, but within that stylesheet, IE-only hacks are present.

Drawbacks to #3

• Unnecessary lines of code are loaded for all browsers

Benefits to #3

• No extra HTTP requests
• No need to open multiple CSS files to adjust something that’s hacked for IE

Option #4

One or more JavaScript files inside of conditional comments that target different versions of IE, dynamically adding or removing styles and/or class names.

Drawbacks to #4

• IE Browsers without scripting enabled will not see the corrected CSS
• A slow loading script could cause the styles to be applied late, making the layout temporarily look awkward
• Will be complicated to maintain, and could also require extra IE-only stylesheets, adding to the page bloat and slowness

Benefits to #4

• Could work on buggy elements that won’t behave with pure CSS (I’ve seen this happen and have used this method when time/budget was limited and the CSS was too messy to deal with normally)

Option #5

Ignore IE.

Drawbacks to #5

• Locking out a significant portion of your potential traffic/sales
• Client screaming at you because the website looks like crap in IE

Benefits to #5

• Only one hack-less stylesheet to maintain
• Peace of mind (but short-lived because of the screaming client)

Conclusion

In most cases, you’ll be using option #2 (multiple conditionals that target different versions of IE). But don’t rule out using #3. In situations where you’ve only got 2 or 3 lines of CSS to target a single version of IE, I think the best option is to just put those extra styles in the main stylesheet and allow it to load for every browser.

Remember that for most client projects, Internet Explorer is the most used browser. If you’re adding multiple extra files for all those users, that’s more HTTP requests, and so you’re making the pages unnecessarily slow for most of your users. I think a few lines of CSS in the main stylesheet is much better than adding one or more extra HTTP requests.

Feel free to offer your thoughts if there are any benefits/drawbacks (or even methods) I haven’t mentioned.

Source: impressivewebs