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

I suggest using one of the ready to use Front-End Development Frameworks like Twitter Bootstrap or Foundation. Both are well documented and pretested , so this will reduce the pain of testing.

They contain :

• CSS Reset/Normalize

• Ready to use components (Buttons, Form Elements, Menus ... etc ).

• Grid Layout (Which is the perfect way to arrange stuff in your web page).

• JavaScript.

Of course you will need to do your own testing as you tweak those frameworks, in addition to all tools mentioned above, i suggest IE-Tester , really awesome debugging tool for IE (Which is the source of the pain).

Finally, And for the sake of perfection , it's better to test your website (as possible as you can) cross all browsers and devices specially if your doing responsive design.

You have no choice but to do it! That's why web designers salary's is usually high x-)

Answer 2

1. Make sure you declare a doc-type.
2. Use reset css.
3. Avoid using width and padding(left and right) on the same element where you can.
4. clean the code in HTML and css.
5. Don't use margin left and right when floating elements and use its parent overflow:hidden, display:inline and height: 1% if the parent does not already have a height.
6. Don't give an element both margin-top or margin-bottom but only margin-top or
   margin-bottom. Because margins of adjacent elements collapse into one another, making the positioning somewhat unpredictable for novices.
7. Don't rely on z-index unless your scripting needs it.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<script type="text/javascript" src="js/html5shiv.js" ></script>
<script type="text/javascript" src="js/html5.js" ></script>

you can download shiv.js form this browser compact

browser compatibility testing tools:

http://crossbrowsertesting.com/

http://browsershots.org/

http://www.browsercam.com/

http://caniuse.com

http://www.findmebyip.com/litmus/

Answer 3

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.

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

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 6

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 7

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