Check for end-user HTML5 compatibility

[collusion]

I am building a site that will be heavy in HTML5 and I want to check that the visitors browser is compatible. If not, I want to display a message that they need to upgrade their browser. Any ideas on how this should/could be done? I am a beginner with actually writing PHP.

[LD]

What requirements does your page code require for viewing?

As an aside, telling people to upgrade their browsers to view your site may result in a in increased bounce rate or overall decrease in traffic. IMO - if I was told to upgrade my browser (and I've visited sites that content won't display in my browser) I leave. And, my browser at that time was just one or two updates from the latest versions.

[weegillis]

"Upgrade your browser." Bad idea. Don't be telling people to upgrade anything. It's never been a popular thing to do, and has never been warmly received by anybody, as far as I can tell.

Just include the modernizr script and you should be good to go. IE is the only browser with HTML5 incompatibilities, as all the others have supported most of HTML5 for years.

---------- Post added at 03:21 PM ---------- Previous post was at 03:16 PM ----------

modernizr can be made to include Remy Sharps 'shim' which creates the HTML5 elements in the DOM so IE can style them. This takes care of the HTML5. CSS3 is another story. In one instance, I had used RGBA and had to create a separate style sheet for IE (or one might have to create rules that IE can fall back to in the main CSS) in order to work around this discrepancy.

Still, no checking for browser compatibility, just a conditional comment to load the IE CSS.

[DaveSawers]

Depends what support you want to check for. If you want to see if the browser supports a <canvas> tag for example, just put in the tag with some text between the opening and closing of the tag. If the browser doesn't support the tag, the message is displayed, if it does support it, the message is not displayed.

For example:

<canvas id="myCanvas">Jeez!  Get a proper browser won't you?</canvas>

But as others have said, users tend not to like being told such things.

[collusion]

Thanks, but I am not concerned about the issues mentioned with users. If Facebook were to tell you that they are going fully html5, how many people that use it would upgrade their browser instantly? Any basic website and I would totally agree with you on this. The website I am doing will not be something I am using for immediate income and am willing to experiment with for this purpose.

@DaveSawers, thanks. I was kind of thinking maybe jquery or some other clean pop-over perhaps with lightbox.

[HTMLBasicTutor]

If Facebook were to tell you that they are going fully html5, how many people that use it would upgrade their browser instantly?

That would be the final nail in Facebook's coffin for me (as in would never ever visit the site again). Any site where the developers/web designers are so arrogant as to not support everyone on the net does not deserve to be visited IMHO.

You could include some fail safe things (as should be done for those who do not use Flash and Javascript for example) but what happens is some of the techniques used are not future proof and crash the site (as it did with manipulations for IE6).

The very old way was to browser sniff and present the appropriate version of the site (i.e. 2 versions in the days of IE and Netscape or when Flash first came out) but these days that would probably create more problems like duplicate content and the search engines suspecting you are a sneaky website using redirects.

[weegillis]

modernizr does just what DaveSawers suggests - it checks for support of the specified CSS3 properties. Worth reading up on and experimenting with. It is also 'future safe' as HTMLBasicTutor suggests, meaning your implementation will work in future browsers, and will eventually be unnecessary. Removal will be a cinch, if and when that time comes around.