2

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?

Bryan
  • 1,801
  • 10
  • 32
  • 55

7 Answers7

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

Colin Brock
  • 20,219
  • 9
  • 43
  • 61
3

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

Community
  • 1
  • 1
Val
  • 2,203
  • 7
  • 32
  • 60
  • Good to know although I try to avoid starting any name with a number. I got the information from www.w3schools.com/css/css_syntax.asp. Near the bottom of the page it says: Do NOT start a class name with a number! It will not work in Mozilla/Firefox. – Bryan Jun 29 '09 at 21:37
2

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)
jeroen
  • 88,615
  • 21
  • 107
  • 128
1

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

Gu1234
  • 3,306
  • 2
  • 20
  • 24
1

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.

Nosredna
  • 74,873
  • 15
  • 91
  • 122
1

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.

Paulo
  • 3,985
  • 2
  • 17
  • 20
0

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

Don Branson
  • 13,237
  • 10
  • 54
  • 98