Menu
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?
317
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.
169
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();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
