HTML5 and CSS3: How can I make sure my code is compatible with all browsers?

Question

Whenever I work with web design, each browser displays something else that destroys the layout. Are there any tools or recommendations for creating web design without any problems?

Thanks in advance!

Answer 1

There are many different tools and technologies that can help make this better / easier, but nothing compares to the old old cross-browser testing. Here are some tools you might like:

• http://browsershots.org/
• http://spoon.net/Browsers/
• http://www.modernizr.com/

Answer 2

I do not think that all projects should look the same in all browsers. This is almost impossible with a growing range of browsers and devices that should be supported, but I understand that things should not break.

This may require case by case, but some things to learn:

• Use HTML5 Shiv, so IE browsers can recognize HTML5 elements: http://code.google.com/p/html5shiv/
• You can also learn HTML5 Boilerplate, but this may be redundant http://html5boilerplate.com/
• During the design process, make sure that any CSS3 properties are not so important to the design that they violate it.

Answer 3

Apparently, you need to customize the design for each particular type of browser.

Answer 4

Using a CSS framework like http://twitter.github.com/bootstrap/ or http://documentcloud.github.com/backbone/ can certainly help with this process.

Answer 5

If you start with CSS reset (here's another one ) or some HTML template , you can at least reduce most of the weirdness with different browsers.

Answer 6

Grab Modernizr for a start, which uses selectivizr . I believe!

For Lee, I would use

li{ display: inline-block; //NO Floats *display: inline; /* < target IE7 */ *zoom:1; } 

Duplicate fields: fix those that have IE conditional style sheet OR html5boilerplate

Most other elements will depend on the type of display

For CSS3, maybe use CSSPie

Cleans:

 :after{ content: '.'; clear:both; visibility: hidden; *zoom:1; height:0; display:block; } 

Some other problems are fixed quite easily!

For screen width use% instead of PX for more control