Making website compatible across most browsers

Question

I am trying to figure out the most efficient way to ensure cross-browser compatibility. I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number. Is there a way to make a CSS work for any browser or is it better to just develop multiple CSS and add code to choose which to use based on the browser being used?

Answer 1

You might use a framework that does this for you, such as GWT, but keep in mind that you will still have some issues.

Answer 2

A good starting point would be to use CSS reset such as: http://developer.yahoo.com/yui/reset/

Answer 3

You might consider using a CSS Framework such as Blueprint. It includes a CSS reset that should help.

Also, you might want to look at Yahoo's CSS reset

Answer 4

Your goal should be CSS that works on all browsers. If you start out with a CSS file per browser, where do you stop? Mobile Safari? Flock? Konqueror? Every version of every supported browser?

Eventually, you might need to compromise, but you can cross that road when you get there.

Answer 5

Regardless of your infrastructure/framework/etc you should test your code on all major browsers. If possible avoid using style sheets for browser specific problems. Browsers will change and adapt which means you might get stuck having to update a bunch of websites when new browsers come out.

CSS is a fickle beast and I haven't found any solution that covers all the quirks except for a lot of due-diligence and testing.

Answer 6

To answer your question: There is no way to make a page using just one universal css and have it displayed equally in all browsers, unless you only use an extremely small sub-set of all available css (selectors, values, etc.).

The way I work is:

1. Use a css reset
2. Develop for a browser that adheres to the standards pretty well (Firefox, Chrome, Safari, Opera)
3. Patch things up for IE using conditional comments (because you'll probably need things that don't validate)

Answer 7

An aside to clarify a point:

... I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number....

Sorry, but that's not a Mozilla limitation, it's in the CSS spec: class names must not start with a number. Any browser that allows them to isn't enforcing the rules properly.

Answered here on StackOverFlow. The relevant part of the spec is at http://www.w3.org/TR/CSS21/syndata.html#characters (see the 2nd paragraph).