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

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?

thanks,

Answer 1

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

Answer 2

There's not really a standard way to do this - it's just the nature of the beast; however, Adobe is currently working on BrowserLabs which should help to solve this exact issue.

Answer 3

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.

Answer 4

It would be nice if there was an automated tool to do this. Unfortunately, the only way to tell if something is visually correct is by looking at it.

There are services (such as BrowserShots) that will visit your site on different browsers and take a screen capture for you and then let you download a file containing all of the renderings of your site, but you would still have to verify them manually.

Computers aren't very good at telling if something looks "nice" automatically or else all browsers would always do exactly what you mean (make stuff pretty).

If you're looking to test out JavaScript, you could try a test suite called Selenium.

In the future you could look into a project started by the creator of jQuery called Test Swarm, which looks promising, but is still in testing stages and may not ever be released due to bandwidth costs. It would allow you to test your JavaScript on every major browser on every major platform using a distributed system. This is still very much a pipe dream however because of some of the complications involved with such a system.

Answer 5

You cant really get round human UI testing. I agree with the others that you should be standards compliant and reset css.

Rarely will you get HTML + CSS to render exactly the same across all browsers and on all platforms, purely due to the idiosyncrasies of each browsers. But, just because there are slight rendering differences, doesn't necessarily mean something is wrong, this is a good reason for human UI testing.