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

closed as primarily opinion-based by Stephen Ostermiller Jun 30 at 17:48

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise.If this question can be reworded to fit the rules in the help center, please edit the question.

3  
Answer: Drop support for IE –  Kendall Hopkins Jul 16 '10 at 18:38
    
if you can't support IE, you shouldn't be developing on the web. essentially you are writing off a % of your clients customers, from the start. moreover, they tend to be our parents so its pretty disenchanting to ostracize them. but really, thats just the most anti-web stance anyone can take. we aren't talking about native silos, this is webdev: the open web. build for all, or don't build at all. –  albert Jun 30 at 17:02

7 Answers 7

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
    
ie10 and up do support conditional compilation...aka conditional comments for jscript...targeting that, you can then append .ie10 or whatever class to body element via jscript, thus targeting them –  albert Jun 30 at 16:33

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

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

design and develop with web standards
validate your documents, and style sheets constantly!
cross-browser/cross-platform test daily!
at the very least before you submit a pull request or make a commit to a repository.

you should be writing conforming documents anyways, but this is crucial for writing cross-browser/cross-platform css.

note: the true power of validation is not conforming 100% of the time; you'll get super powers once you understand what doesn't need to be validated, can be put off, and should be corrected immediately.
and thats the power: constant validation reinforces the rules of the specifications, and you will be well-versed. constantly cross-browser/cross-platform testing keeps you keen on which browser's user agent style sheets you are doing battle with the most. conform your styles as such, you have even less problems.

you can use libraries and frameworks if you like, but you are abstracting all the hurt and pain out of your workflows and you'll never get the fine-detailed eye for styles that you are requesting here. however, libs/frameworks do a good job of granting you that power, albeit that typically comes with page bloat.

reset.css, normalizr.css, and even the *{border:none; margin:0; padding:0) reset are weapons in your arsenal to equalize the playing field between the browser rending your styles, or its own.

yes, i did recommend the * "hack", with two other options. each has their own place when doing battle with user-agents.

moreover, it is absurd to not take advantage of the flaws certain user-agents have, because said flaws will not render with 100% continuity and need to be addressed. in doing so, the flaws themselves provide you with the perfect hook to feature-detect, or even sniff-sniff them out, so they can be treated accordingly!

use every hack, flaw, feature, non-feature that you can get your hands on to bend the dom and force the browsers inline.

......if you have to. but if you're developing with web standards, you'll find that you won't be needing them as much as you were in the past.

and since you are relying on them less, when you do get an opportunity to use one to address an issue, use it with the quickness! you already know what the problem is, and you also have a solution targeting the problem and nothing else.

each browser has their own ways of being targeted solely, the most obvious being conditional comments.
use conditional comments for ie6-9, and use conditional compilation to render styles for ie10 and ie11.
but again, if you are dwws, and dvwws, you may include them in every document you create, but find the style sheets are barren, hosting a handful of styles merely targeting 1-3 pixel differences, or getting background-colors to stretch out (or not) 100%, etc.

share|improve this answer

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

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

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

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