Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detecting support for specific HTML 5 features via jQuery

I'm working on some HTML5 demo code, including stuff like <input type="date" />

This currently works correctly in Opera 10 as-is, but every other browser just displays a normal text input. I'm then using a jQuery.date-input plugin to override this behaviour on browsers that don't support it.

Problem is - the jQuery's running on Opera as well, so in Opera I'm getting two calendar date-pickers (one from the browser, one from jQuery)

I can work around this for now using if (window.opera) - but is there some way using, say, jQuery.support, that I can reliably detect whether the current browser supports a particular HTML5 feature or not?

like image 317
Dylan Beattie Avatar asked Nov 01 '09 13:11

Dylan Beattie


2 Answers

I would take a look at Modernizr. It's an open source, MIT-licensed Javascript library that detects support for many HTML5/CSS3 features and it's REALLY tiny (7kb compressed). To use it, simply:

<script src="modernizr.min.js"></script> 

Within the <head> of your document. After that, it has a variety of functions to check for what you need. Example:

if (Modernizr.canvas) { 
     // do stuff
}

There's many more ways to check for the specific HTML5/CSS3 feature you'd like. Check out their website to get it and see the docs.

like image 169
Bartek Avatar answered Sep 27 '22 23:09

Bartek


Yeah, checking for a particular browser isn't what you want at all. It's occasionally useful for detecting when you need to apply workarounds for browser bugs (usually with IE), but if you want to know whether a browser supports a feature just sniff for it.

Some things are easier to sniff than others. For your example of date-input-support it's very easy. The input.type property tells you what type of control the browser thinks it is; if date inputs aren't supported you'll get 'text'.

<input type="date" class="dateinput" />

if ($('.dateinput')[0].type!=='date') {
     $('.dateinput').addSomeDateScriptingPluginThing();
}
like image 24
bobince Avatar answered Sep 27 '22 21:09

bobince