treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Browser detection

  • fooman
    Permalink to comment #

    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.

    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
    Permalink to comment #

    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
    Permalink to comment #

    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/

  • AndyHowells
    Permalink to comment #

    @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.

  • fooman
    Permalink to comment #

    I've used Modernizr before and it's great and all.. but what if we need to detect specific browsers?? Just taking the table from CanIUse.com and setting up a few statements that summarize to "if any of these browsers, do this"... otherwise I'll have to default to the flash uploader.

    I hate flash, but it does the job and the clients we've used it with haven't complained (yet). So it's an ok fallback.

    There are a few times I'd have liked to use Modernizr to detect if a browser supports a specific feature of HTML5 or something of that nature, and it did not. So what do you guys do for that scenerio where there's a wide array of browser support (or lack thereof), and not a specific test in Modernizr? Do you try to equate the test to a similar feature... or do you peruse google and see if something of this nature comes up?

  • fooman
    Permalink to comment #

    On a related note... What browser does Blackberry use and is there a site that emulates or allows testing of it? Browserstack doesn't seem to have anything for BB?

    Specifically, I'd like to know if BB works with the "multiple" attribute of file inputs.

  • fooman
    Permalink to comment #

    I decided to go with Modernizr, as suggested earlier. I had to test for a few things.

    1. If the FormData object is supported.
    2. If multiple files can be selected at once.
    3. An overall fileinput test to determine if the OS can talk to the browser and allow file selection/upload (iOS <6 has issues).

    
if(Modernizr.fileinput)
{
  Modernizr.load({
    test:   (window.FormData !== undefined) && Modernizr.input.multiple,
    yep :   {   'ajax':     'scripts/ajax-uploader/uploader.js',
          'ajaxstyles': 'css/ajax-uploader.css'
        },
    nope:   {
          'swfobject':  'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js',
          'upload':   'scripts/swfuploader/js/swfupload/swfupload.js',
          'jquploader': 'scripts/swfuploader/js/jquery.swfupload.js',
          'handlers':   'scripts/swfuploader/swfupload_handlers.js',
          'admin_add':  'scripts/swfuploader/admin_add_main.js',
          'swfstyles':  'css/swfuploader.css'
        },
    callback: function (url, result, key){
      if(result)
        $("body").addClass("ajax-upload");
      else
        $("body").addClass("swfupload");
    }
  });
}
else
  $("#disclaimer").show();

    So I ended up with this. Tests for fileinput availability. If fail, show a disclaimer message. If pass, test to see if we should load the AJAX-uploader or a flash-based uploader.

    One thing that's kinda still got me stuck is on Blackberry. I only know one person with a BB (Curve 9900 I think). It passes all test but does not allow him to select multiple images. Am I not doing the test correctly? Or is this a BB thing that I must test for somehow?

Add a Comment