separate CSS for IE and firefox

Question

What's the best way to have separate CSS for IE and other browsers? I'm thinking of just targeting IE, Firefox and Safari users. Especially now with CSS3 support in most browsers but IE.

The various ways to do this that I've come across are

1. loading separate stylesheets conditionally using <!--[if IE]>
2. underscore hack and various other inline IE hacks

I prefer (2) as (1) is extra work especially when developing. But (2) doesn't seem to work all the time. What's the most efficient way?

Answer 1

I would have one style sheet that everything picks up at the top of your document.

underneath this do your [!--[if IE]] conditional style sheet.

In here just override styles that are causing problems in IE. - the last style for a particular class that is picked up is the one that will be followed.

Answer 2

Our team handles CSS following three rules:

1. Make sure general/common CSS files work as they should with all browsers as close as they possibly can.
2. Handle all IE "bugs" in separate files, control loading the stylesheets with IE conditions.
3. No hacks allowed unless it is not possible to make it work following first two rules.

Answer 3

I agree with keeping all your core CSS in a single file. If you are using ASP.NET then you can use a WebHandler to manage which CSS actually gets sent. I'm sure other languages have similar solutions. This allows you to only send what you need and allow it to be cached. The other benefit is you can combine multiple css files (if that's how you do it) and present only one. This is GOOD practice as you reduce the number of requests to the web server.

You can then write things like [if lt IE 8] margin: 0px; and it wouldn't be sent to IE8 or FF etc.

If you are just using HTML then you have to go with the [!--[if IE]] style conditions mentioned above.

We use a WebHandler in our very large project and I wouldn't ever do it any other way.

See http://www.conditional-css.com/download. It's available for PHP, C# and C

Good luck.

Answer 4

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

This trick widely using Yandex (aka "russian google") to reduce HTTP requests. market.yandex.ru using this, for example.

Answer 5

Thanks Its works for me.