: What are the best ways to implement cross browser css? What are the best ways to implement cross browser css? Rule: one approach for an answer.

@Alves908

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.

Vote Up Vote Down

@Samaraweera270

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.

Vote Up Vote Down

@Ravi8258870

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.

Vote Up Vote Down

@Holmes151

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

Vote Up Vote Down

@Fox8124981

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 : green9; /* 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.

Vote Up Vote Down

@Cofer257

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.

Vote Up Vote Down

@Welton855

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: Should I bother supporting IE6?

Vote Up Vote Down