2

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?

Improve this question
3
  • Are you targeting specific browsers for any reason other than working around browser bugs? Commented Oct 28, 2009 at 14:22
  • i'm targeting browsers that supports CSS3 and that one that doesn't Commented Oct 28, 2009 at 14:24
  • There are no browsers that support all of CSS 3, and both Internet Explorer and Firefox support some of CSS 3. (For as much of a definition of CSS 3 as you can have given its current status) Commented Oct 28, 2009 at 14:31

5 Answers 5

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

this is exactly what i do, as i hate messing with my standards compliant stylesheets to hack a fix for ie.
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.
Improve this answer

Comments

1

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.

Improve this answer

Comments

1 
<!--[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.

Improve this answer

Comments

1

You can use this way also;Some times the conditions may not work where we need to write the styles in the middle of the code.

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>

Check the $browser with :

IE – “MSIE”

Firefox – “Firefox”

Safari – “Safari”

Opera – “Opera”

Chrome – “Chrome”

Improve this answer

1 Comment

That's only valid if he is using PHP

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.