How would I go about migrating to HTML5 without alienating the majority of my user audience?

Question

I'd really like to implement some of the new features that come standard with HTML5 but I want to be able to do it in a way that doesn't break my site.

I know that Progressive Enhancement and checking the useragent is always an option. Are there any better alternatives out there?

Answer 1

A much more accurate way to determine the type of browser you're dealing with is by feature dectection, not by reading useragent.

jQuery has .support() that is a great way to do this.

As with any feature, just make sure that if you want to implement something that it degrades gracefully for older browsers.

Answer 2

2 Possible approaches:

• HTML5 Shims, which are code snippets to allow you to use HTML5 features but with error correcting backstops
• Modernizr, which is a toolkit to apply CSS classes on the body that you can use as part of detecting individual features and displaying warnings or disabling code if those classes are present or not present.

The Detecting HTML 5 Features chapter of Dive Into HTML 5 is a great reference as well.

Answer 3

In addition to these responses, a lot of HTML5 elements like the form elements degrade gracefully to simple textboxes because if a browser doesn't recognize the type attribute, it defaults to text. Also, if a browser doesn't recognize an attribute (like placeholder) it just ignores it. This graceful degradation means that you can implement these elements without having to worry about things messing up if a user's browser doesn't support HTML5. They just simply won't see anything special.

Answer 4

Gmail is the epitome of progressive enhancement, it goes all the way from straight html to all the bells and whistles. Which is why it has such a large audience. So that's a good model to emulate.

I suggest relegating html5 features to something that gets turned on by javascript for compatible browsers. Which still means you'll want to start with html 4.