How to write backwards compatible HTML5?

Question

I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ?

Additionally, what browsers should I support so that my app. is functional for at least 95% of visitors? What are the ways to test those browsers painlessly ?

Answer 1

When talking about HTML5 or CSS3, you should head over to:

When can I use...

As can be seen, we are still far far away from using that.

Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:

Progressive Enhancement and Graceful Degradation

Here are some resources also:

• Gallery of HTML5 Sites (You can learn and get the idea from them)
• Create modern Web sites using HTML5 and CSS3

Answer 2

A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.

Answer 3

Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8. The best way to test them is to install them on your computer.

Answer 4

I was going to make this a comment, but then I got carried away..

w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.

Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.

As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.

The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.

Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add -webkit-border-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.

Answer 5

Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.

Answer 6

You want to use html tags and css compatible with mobile browsers.

For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.

You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.

For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013

Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html