What are the best ways to implement cross browser css?

Question

What are the best ways to implement cross browser css?

Rule: one approach for an answer.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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).

Answer 5

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.

Answer 6

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.