Using the code
If you can write conditional code (remember #if in C) and different browsers/operating systems receive different copy of code then it will solve our problem. The idea is simple, the code like following
window.addEventListener("load", loadfn, false);
The above code in IE will finally look like this:
The client is never aware that there are different scripts for different browsers. This can also be applied to CSS.
If - This tag has two attributes 'browser' and 'os'. If attribute value is empty or if it is not defined it is assumed to be true. This tag can be declared independent of Choose tag.
Choose - This tag can only have If tags as children and as soon as the first one is satisfied, rest are ignored. Since, there is no condition specified in last if in above example it acts as else like in if else statement.
Examples of browser attribute
Valid (IE version greater than 8 OR firefox version not equal to 3.)
Valid (is IE)
Valid (IE version greater than 5.5 OR firefox version not equal to 3.)
Valid (Not a firefox browser AND not a chrome browser.)
Invalid (Not browser condition cannot have version specified.
Does not make sense.)
Invalid (Cannot have a not browser condition with is browser condition. Does not make sense either.)
Invalid (Only major and minor versions supported.)
Allowed browser values
APPLE_MAIL, SAFARI, CAMINO, CFNETWORK, DOLFIN2, CHROME, DOWNLOAD, KONQUEROR, OPERA, IE, LOTUS_NOTES, THEBAT, FIREFOX, BOT, THUNDERBIRD, UNKNOWN, OUTLOOK, SEAMONKEY, MOZILLA, NETFRONT, EVOLUTION, FLOCK, EUDORA, POCOMAIL, OMNIWEB, LYNX
Examples of os attribute
Unlike 'browser' attribute no version support is there.
Allowed OS values
PALM, BLACKBERRY_TABLET, WINDOWS, WII, MAC_OS, BLACKBERRY, SONY_ERICSSON, GOOGLE_TV, LINUX, SYMBIAN, IOS, PSP, ROKU, MAC_OS_X, SERIES40, UNKNOWN, WEBOS, MAEMO, KINDLE, SUN_OS, ANDROID, BADA
The code uses UserAgentUtils
and simple xml parsing. Now the only question remains "Why should I use this when jQuery takes care of browser dependency?". I would highly recommend jQuery as
- jQuery is standard.
- Lots of plug-in support is there.
- The above code may become messy at times.
But use above code for CSS or when jQuery is not able to provide customization for your code. For example,
gives different values in IE and other browsers. IE has always been the exception.
The code additionally replaces following tokens with the appropriate values
Deploy the servlet and open
test.html provided in the source zip in Chrome, Firefox, and IE. The above idea is so simple that even you can write you own implementation from scratch in just