How to make sure the CSS work fine with all browsers without eye testing on each browser?

Question

Making CSS for one website to support for all browsers in different version is really difficult. Especially, it needs to have different browsers set up. I just wonder is it possible to test the CSS and make sure it works with all browsers without open each browser and manually check the layout? or Is there any quick or standard way to do this?

Answer 1

1. Use a CSS Reset stylesheet
2. Use good CSS frameworks (blueprint, boilerplate etc.)
3. This is not possible.

Answer 2

A few important things to get you started on your journey:

• Use a DOCTYPE or you'll throw browsers into quirks mode.
• Reset your CSS so you can apply the styles you want to elements.
• Use a Javascript library - the popular one around these parts is jQuery, and it is the one I personally recommend. However, it doesn't really matter which one you go with as long as you use one. A lot of smart guys have put a lot of hours into taking care of all the incompatibilities between browsers. Trying to do a lot of dynamic stuff on your website with pure Javascript is bordering on masochistic.

Once I started doing these things, making my site work the same across browsers got a whole lot easier. No matter what, however, you will have to check them all. There's just no way around that.