0

How do I use feature detection to make a plugin, which was written by someone else, to work on all those browsers where it could actually work/is supported. The plugin's documentation says it is supported in IE 8 but it doesn't actually work. I know it is because of the unreliable browser detection but what can I do to make it work in all those browsers where it could actually work?

Details

Just to give a particular example, I am using jQuery chosen plugin version 0.9.7 and as the documentation says -

All modern browsers are supported (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled.

However, I found that it does not work in many IE 8s but works on IE tester IE 8. Then inside the plugin code I found this browser detection logic which simply escapes out of the plugin logic - 

if ($.browser.msie && ($.browser.version === "6.0" || $.browser.version === "7.0")) {
   return this;
}

And I found that $.browser.version was returning 7.0 on my IE 8 and that's why it was not working. Well, nothing to be surprised of, I know. I tried removing the $.browser.version === "7.0" condition, just to check if it actually works on my IE 8 and it worked. But, I cannot remove that condition since the author of the plugin has done that and he must be knowing better.

Now, my question is how do I use feature detection to make it work on all those browsers it can actually work. I guess the logical step would be to find out which all browser features are used by this plugin. Then how do I find that out? Please pardon my limited knowledge regarding this. I just have theoretical knowledge of feature detection, how it is better than browser detection etc. but never actually used any code which does feature detection. I learned about this some 1-2 years ago.

And this time when I searched, I came to know about Modernizer. Could this be helpful? I am not sure because it says it for building the next generation of HTML5 and CSS3-powered websites and we don't use HTML5, CSS3 much yet. Or is jQuery.support enough for me once I know which all features are needed by the plugin.

Some further Reasoning

I found this question Browser detection via object/feature detection where the author asks whether it is possible to use feature detection to figure out what the browser actually is. One comment says - "The whole point of feature detection is so that you can find out whether the browser actually has the features you need. When you do that right, you don't actually care what browser it is, you just care whether it has the feature you need to do your job." I understand and agree to this, but then what is the point in saying that a given plugin is supported in these browsers. Why don't plugin authors list out all the features that are needed, thereby making it easy for people to use? But, then it looks for me like the point behind listing the supported browsers is just giving an idea of the compatibility by assuming ideal browsers.

e.g., two ideal IE 6 browsers will have the same select drop-down z-index issue interfering with popup divs. Suppose, a plugin has issues with this, then saying this plugin is not compatible with IE 6 means an ideal IE 6 browser and not another IE 8 browser whose user agent is tempered with and which returns IE 6 as the browser version.

In that case (point behind listing the supported browsers is just giving an idea of the compatibility by assuming ideal browsers), does it make sense to identify browsers using feature detection? If, so why aren't there much example snippets available?

Lots of questions.. :) I guess, today I asked it all...

Community
  • 1
  • 1
Sandeepan Nath
  • 9,966
  • 17
  • 86
  • 144
  • 2
    Why not just remove the browser detection entirely and test it in all the relevant browsers? BTW: I would not trust IE Tester... it's just a simulation and contains it's own rendering bugs. – Sparky Feb 09 '12 at 16:32
  • Question is contradictory: You acknowledge the developer must _"knowing better"_ by having the browser detection. Then you ask about how you could cheat the browser detection without removing it. There is no point in keeping the browser detection in place when you're also looking for a way to get around it. – Sparky Feb 09 '12 at 16:36
  • 2
    **Quote**: _"And I found that $.browser.version was returning 7.0 on my IE 8"_ Maybe the real problem is that your HTML is [not validating](http://validator.w3.org/) and IE is slipping into either Compatibility mode and/or Quirks mode. – Sparky Feb 09 '12 at 16:39
  • 1
    Your IE8 browser is likely returning IE7 because you've got it in compatibility mode, which is intended to act like IE7, so the plugin is likely doing exactly what it is supposed to. – random_user_name Feb 09 '12 at 16:40
  • Yes, my IE 8 was running in combaitibility mode. I turned that off and now my plugin is working fine. But, isn't there possibility of incorrect version detection in some cases when not running in compatibility mode? That is the point behind why browser detection is not reliable. My question actually is how can I use feature detection here? But thanks btw... And does my question deserve closing? Really? I just put some reasoning... – Sandeepan Nath Feb 09 '12 at 16:49

1 Answers1

0

You may try to execute this in a plugin or before You use the plugin:

var checkString = '<!--[if lt IE 7 ]> <div id="my-id" class="lt-ie7" > <![endif]--><!--[if IE 7 ]> <div id="my-id" class="ie7"> <![endif]--><!--[if IE 8 ]> <div id="my-id" class="ie8"> <![endif]--><!--[if IE 9 ]> <div id="my-id" class="ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <div id="my-id" class="other"> <!--<![endif]-->';

$('body').append(checkString);

$('body').append('Your browser is: '+$('#my-id').attr('class'));

Example: http://jsbin.com/inisol

Btw: Don't have IE to test it. Hope it works.

czerasz
  • 13,682
  • 9
  • 53
  • 63