How to Detect HTML 5 Compatibility in Browser

How to detect HTML 5 compatibility in browser

Have a look at Modernizr:

Taking advantage of the new capabilities of HTML5 and CSS3 can mean
sacrificing control over the experience in older browsers. Modernizr 2
is your starting point for making the best websites and applications
that work exactly right no matter what browser or device your visitors
use.

Thanks to the new Media Query tests and built-in YepNope.js
micro-library as Modernizr.load(), you can now combine feature
detection with media queries and conditional resource loading. That
gives you the power and flexibility to optimize for every
circumstance.

It has a lot of built in methods to test for browser features and provides a useful way of providing fallback code for when features you want to use are not supported.

More info: http://www.modernizr.com/

Check browser compatibility for HTML5 History API support?

Checking for the existence of a pushState() method on the global history object should be sufficient.

function supports_history_api() {
  return !!(window.history && history.pushState);
}

For more general HTML 5 feature detection I'd look at Modernizer

http://diveintohtml5.info/detect.html#modernizr

This will insulate your code from the messy specifics of each test, making the code more readable and less error prone. With the Modernizer script on your page you'd just do:

if (Modernizr.history) {
  // history management works!
} else {
  // no history support :(
  // fall back to a scripted solution like History.js
}

html5 incompatible browser testing

Since you're on Mac (so am I), the images provided through modern.ie might be more helpful. They have vm images for VirtualBox and VMWare, in addition to VirtualPC.

How can I consistently detect browser support for HTML5 search inputs?

This article describes quite a robust way of detecting the event support itself - as your case is yet another one when it's different from the feature support.

Basically, one has to test a corresponding property (onsearch for search event, for example) of the corresponding elements. Like...

'onsearch' in document.documentElement; // true in Chrome, false in Firefox/Opera

It's noted in the article that Firefox will fail the check if it's done on the wrong element, but I actually found only Opera behaving that way:

'onchange' in document.documentElement; // false in Opera, true in Firefox/Chrome
'onchange' in document.createElement('input'); // true in Opera too

As a final resort, one can attempt to assign a handler for this element, then check this property again:

var el = document.createElement('input'); 
el.setAttribute('onsearch', 'return;'); 
typeof el.onsearch; // 'function' in Chrome, 'undefined' in Firefox/Opera

Detect whether HTML5 History supported or not

if (window.history && window.history.pushState)

See also this All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything

How to detect support for the HTML5 download attribute?

Use the Modernizr approach: create the element, and check if the attribute is defined:

var a = document.createElement('a');
if (typeof a.download != "undefined") {
    alert('has support');
}

---

Related Topics