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.

Solution 1

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.

Solution 2

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

Solution 3

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.

Solution 4

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.

View more solutions

Comments

[Admin]

Answer: Drop support for IE

[Admin]

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.

[corymathews]

spare yourself.. never EVER use css hacks, only use conditional statements.

[MrChrister]

+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]

Their homepage doesn't work on my IE

[mvark]

IE10 will not support conditional comments - blogs.msdn.com/b/ie/archive/2011/07/06/…

[DisgruntledGoat]

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

[albert]

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