How to make sure the CSS work fine with all browse

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

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 2

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 3

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 4

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

Answer 5

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 6

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/