Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

What are the best ways to implement cross browser css?

Rule: one approach for an answer.

share|improve this question
2  
Answer: Drop support for IE –  Kendall Hopkins Jul 16 '10 at 18:38
add comment

6 Answers

You can use conditional comments to fix issues with Internet Explorer. Aside from that, you shouldn't ever need to target Firefox/Chrome/Opera separately from each other, they all support the standards.

Caching shouldn't enter into it; you should be serving the same code for all browsers.

share|improve this answer
    
IE10 will not support conditional comments - blogs.msdn.com/b/ie/archive/2011/07/06/… –  mvark Jul 16 '11 at 8:55
    
@mvark: well hopefully there will not be a need for conditional comments in IE10, since they are supporting the spec pretty well. Obviously conditional comments will still work with IE6-8 which is their main use. –  DisgruntledGoat Jul 17 '11 at 14:21
add comment

The best, easiest way is to use a library. Libraries like OOCSS, Blueprint, or 960gs are already engineered to replicate their display across the major browsers. All you're left with after that, most of the time, is your making sure your custom styles are cross-browser compliant and that your markup doesn't produce any problems.

Avoid hacks like the plague if at all possible (yes, use conditionals).

share|improve this answer
    
+1 - I do this. The size isn't optimal, but the speed of delivering the site goes way up and I have a built in place to optimize my code when the site takes off. –  MrChrister Jul 16 '10 at 20:20
add comment

When I read questions and answers like this I start to think I might be crazy, but I have written fairly complex websites using quite a bit of css, including css3 and other trickiness, and I have never had to resort even to conditional comments.

I do however constantly check my work accross multiple browsers (I code predominantly in Chrome, and test in firefox and ie7) during coding. When I see issues come up, I just take a step back, figure out why things are rendering differently, and often choose a slightly different approach.

That being said, I do have an intellectual interest it these different hacks and methods. I particularly like reading about techniques used by CSS3 PIE and modernizr.

The best way to approach cross-browser coding is to be aware of the differnt ways different browsers will interpret your code, and write it in a way that they cannot help but get it right.

share|improve this answer
    
+1 It really can be this simple. –  John Conde Mar 3 '11 at 17:27
add comment

CSS3 PIE looks pretty promising as a CSS3 compatibility layer. Of course, there are other cross-browser concerns for previous CSS versions.

Related question regarding IE6, lots of useful info: http://webmasters.stackexchange.com/questions/134/should-i-bother-supporting-ie6

share|improve this answer
    
Their homepage doesn't work on my IE –  MrChrister Jul 16 '10 at 20:23
add comment

Prefacing this with a warning against using CSS hacks.

From a pure performance standpoint, caching will be more effective with a single file if for no other reason than it responds once to a single HTTP request from the client. In addition to serving the same file to every user regardless of browser, Conditional comments block downloads in some situations.

To target all your different Internet Explorer versions in a single file there are various CSS hacks. Keep in mind that these will render your CSS invalid (if validation is a concern for you).

body {  
    color: red;         /* all browsers */  
    color : green\9;    /* IE8 and below */  
    *color : yellow;    /* IE7 and below */  
    _color : orange;    /* IE6 */  
}

The conditional comments blocking is really only an issue in some cases in IE8 when there is a conditional comment. Depending on what you think about supporting Internet Explorer, this may or may not be an issue.

I personally use conditional comments. I personally believe that CSS hacks are awful, and that any performance hit that comes from conditional comments be it real or imagined is not worth the trouble that CSS hacks often cause.

Conditional comments are relatively easy to implement, and there's a great article about their use on Quirksmode. The following will address only IE6:

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

There is syntax that will allow you to target Internet Explorer of version equal to, less than, greater than, less than or equal to, greater than or equal to a given version number. The example above is one of equal to.

share|improve this answer
1  
spare yourself.. never EVER use css hacks, only use conditional statements. –  corymathews Jul 16 '10 at 16:46
add comment

What I do is use a reset CSS and then conditional statements. The reset CSS fixes almost all of the problems and the conditional fix any problems in IE. If there are differences between the other browsers, I usually try to work around them, such as increasing the width for all browsers or a font size.

I personally use the YUI reset CSS.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.