ansaurus

Question

Detecting support for specific HTML 5 features via jQuery

Answer 1

+6 A:

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.

Bartek 2009-11-01 13:34:36

Answer 2

+2 A:

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();
}

bobince 2009-11-01 13:44:12

ansaurus

tags:

views:

answers:

Detecting support for specific HTML 5 features via jQuery

related questions