Browser detection

[fooman]

Hey guys,

I know this has been talked about a LOT, but I think I’m just hard-headed :(

I have a page that is uploading images for a photogallery.
I already have an uploader working, but it utilizes flash. I’d like that to become the fallback to lesser-browsers.
However, flash is a no-go for mobile (yay iPhone haha). So, I’m working on an upoader that utilizes HTML5’s multiple file input, along with the FormData object.

Only modern browsers can use this newer object according to [CanIUse](http://caniuse.com/#search=FormData).

Is there a very simply way (or ‘correct’ way) to detect exact browser versions and load things (dom elements and Javascript) based on the browser version being used?

[Vermaas]

You could take a look at this: http://www.quirksmode.org/js/detect.html. But jQuery will do the job too: http://api.jquery.com/jQuery.browser/

[TheDoc]

It sounds like you don’t really want to detect browsers, you want to detect features which is exactly what Modernizr does.

http://modernizr.com/

[Andy Howells]

@TheDoc is bang on. Modernizr is your new best friend.

Note that Modernizr does not provide fixes for what it detects, but rather detects features all allows you to conditionally load functions/scripts.

For example;

$(document).ready(function() {

if (Modernizr.touch) {

$('.portfolio-grid').addClass('touch');

}

});

So I'm saying, if Modernizr finds that the device is "touch" ready - add a class of touch to my portfolio-grid element.

That then allows me to style it separately from that which non-touch visitors will see and use.

[Author]

Posts