Is there any good fallbacks for HTML5 and CSS3?

Question

I'm looking for a good fallback for both HMLT5 and CSS3 so I could use it and it would still look ok in other browsers.

Thanks

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

This information may help in respect of HTML 5 aspect of this question.

It is a test of HTML 5 on lots of browsers.

http://www.stevefenton.co.uk/Content/Blog/Date/200907/Blog/HTML-5-Browser-Test/

Answer 3

You should review this site: http://html5test.com/

Answer 4

Look at Google Chrome Frame and see if it is possible to reach more users with the fully-featured version of your website. And also do feature checking for specific features.

What is Modernizr?

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Lastly, Modernizr also adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

What Modernizr doesn't do

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

I read about it at Dive Into HTML5

Some samples:

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

if (Modernizr.video) {
  // let's play some video!
} else {
  // no native video support available :(
  // maybe check for QuickTime® or Flash® instead
}

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {
  // no native support for local storage :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.webworkers) {
  // window.Worker is available!
} else {
  // no native support for web workers :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.applicationcache) {
  // window.applicationCache is available!
} else {
  // no native support for offline :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.geolocation) {
  // let's find out where you are!
} else {
  // no native geolocation support available :(
  // maybe try Gears or another third-party solution
}
...

Sometimes the website suggests fall-back techniques such as Explorercanvas (excanvas.js) for IE or geo.js for Geolocation