homepage Welcome to WebmasterWorld Guest from 50.19.199.154
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JavaScript: Check for features instead of browsers (user agents)!
luma




msg:1473106
 1:05 pm on Jul 16, 2002 (gmt 0)

I found an interesting point when reading a Konqueror FAQ. The question was: As an author of a web site, how can I tell Konqueror from other browsers? [konqueror.org]

The answer is quite interesting, simple and true: instead of checking for the user agent, check for the feature you want to use. By doing so, you don't discriminate against any kind of browser and your script in general will be more stable.

 

moonbiter




msg:1473107
 1:35 pm on Jul 16, 2002 (gmt 0)

Peter Paul Koch has a good article on this topic here:

Javascript Section: Object Detection [xs4all.nl]

luma




msg:1473108
 4:40 pm on Jul 16, 2002 (gmt 0)

If I click the link (using Opera 6.02 for Linux), I get an empty white page. Guess that's a good example of how not to do it. :)

He is using "navigator.userAgent.indexOf('Opera') == -1);" and that's exactly on of the things you should avoid.

Maybe the correct answer to the FAQ would have been: instead of checking for the user agent, use straight HMTL that all browsers (and search engines -- have a look at his noframes area) understand.

rewboss




msg:1473109
 9:03 pm on Jul 16, 2002 (gmt 0)

Generally speaking, you want to check for features -- this has always been the way to do it. The classic example is:

if(document.all){
// Code for W3C-compliant browsers
}
if(document.layers){
// Code for NS4
}

People who checked for "Netscape" found their DHTML scripts broke when NS6 was launched.

Sometimes, though, you can fall foul of browser quirks. For example, many preload scripts start with if(document.images), which only attempts to create Image objects and download the files if the images[] array is present. Very sensible; unfortunately, in many browsers, the images[] array is not actually available to JavaScript until the entire document has finished downloading and often even not until the onload handler has returned, so the preload script never executes.

Occasionally, there are features you know are only implemented on certain specific browsers, or bugs you want to work around. If you happen to know exactly what browsers you need to target, and can be sure you don't want to target any others, checking the navigator object may be appropriate.

joshie76




msg:1473110
 11:25 am on Jul 17, 2002 (gmt 0)

Rewboss, I may be wrong but as far as I know document.all is an IE only implementation and not W3C.

A more typical example would be

if (document.all && document.getElementById)
{
IE5+ code
}
else if (document.all)
{
IE4 code
}
else if (document.layers)
{
NN4 code
}
else if (document.getElementById)
{
NN6 code (and most likely W3C)
}

Obviously the order of the if statements is pretty important to the code above. I'm sure you get the gist so you can chop and change as you like. This method is much nicer than handling all the nasty User Agents strings and so on but probably isn't as future proof. One day we can hopefully forget all the above nonsense [enter dream sequence]...

moonbiter




msg:1473111
 2:11 pm on Jul 17, 2002 (gmt 0)

If I click the link (using Opera 6.02 for Linux), I get an empty white page. Guess that's a good example of how not to do it.

He addresses that issue, go figure:

To quote his site:

"However, for the really new scripts this is not enough. Opera 5, for instance, supports enough of the new DOM to do DHTML but not enough to support really advanced scripting. Therefore when you really want to use the new scripting, you should start with this object detect:

"if (document.getElementById && document.createElement)

"This one first checks for the W3C DOM and then for the presence of the crucial createElement() method. If it isn't supported the browser is not sufficiently advanced for true W3C DOM scripting. Explorer 4 supports document.createElement too (though it works differently from the W3C method), but we don't want it to execute the scripts. Therefore we also have to check for getElementById.

"Unfortunately this object detect, too, is not enough. Opera 6 says it supports createElement though it cannot actually add the created element to the document. At the moment I don’t know what to do about it. I hope Opera will either remove support for createElement or add support for actually doing something with the element."

rewboss




msg:1473112
 5:08 pm on Jul 17, 2002 (gmt 0)

Rewboss, I may be wrong but as far as I know document.all is an IE only implementation and not W3C.
Hmm, maybe. I steer well clear of DHTML if I possibly can, so I'm a bit rusty. I just use JavaScript for rollovers and other small enhancements like form validation etc.
moonbiter




msg:1473113
 6:24 pm on Jul 17, 2002 (gmt 0)

document.all is supported in MSIE 4+, Opera 6, iCab, and Omniweb. It is an MS DHTML creation, and the other browsers adopted it due to MSIE being the 800-lb gorilla.

moonbiter




msg:1473114
 9:51 pm on Jul 17, 2002 (gmt 0)

Oh, that and it was a better model than Netscape's document.layers.

starway




msg:1473115
 8:55 am on Jul 18, 2002 (gmt 0)

>>document.all is supported in MSIE 4+, Opera 6, iCab, and Omniweb.

One correction: Opera "understands" document.all only when it's identification is set to IE5.

But it handles getElementById perfectly! So I'd like to tell that joshie76's code should be commented as this:
[1]

if (document.all)
{
IE4 code
}
else if (document.layers)
{
NN4 code
}
else if (document.getElementById)
{
code for standard-compliant browsers: Mozilla/N6, Opera5+, IE5+, ...
}

[/1]

I think that this part:
if (document.all && document.getElementById)
{
IE5+ code
}

is useless as all above listed variants cover all browsers you can find.

rewboss




msg:1473116
 9:32 am on Jul 18, 2002 (gmt 0)

Since document.all is also implemented by MSIE 5 and 6, the code will result in those browsers executing the IE4 script. The first test condition should be:

if(document.all && (!document.getElementById))

[edited by: rewboss at 9:34 am (utc) on July 18, 2002]

joshie76




msg:1473117
 9:32 am on Jul 18, 2002 (gmt 0)

code for standard-compliant browsers: Mozilla/N6, Opera5+, IE5+, ...

When it comes to Javascript (& DOM) there is no way that Opera can be considered 'standards compliant' - it's a real dinosaur. If you're worried about Opera and you're doing any advanced scripting then you'll probably need a separate sniff to leave Opera out of the loop.

is useless as all above listed variants cover all browsers you can find.

But the browsers you list above have some huge scripting differences which people might need, as I said "you can chop and change as you like".

[edited by: joshie76 at 11:08 am (utc) on July 18, 2002]

starway




msg:1473118
 10:23 am on Jul 18, 2002 (gmt 0)

>>...there is no way that Opera can be considered 'standards compliant'...
Yes I know that there are problems with Opera's DOM support. But it supports getElementById and allows to access and change visibility/style/position of a page element. It is sufficient in 90% of all cases if we talk about "real"-life projects.

>>But the browsers you list above have some huge scripting differences...
Yes that's right. If you talk about some specifiñ scripting issues it's not enough. But this thread's topic was general browser identification by their abilities to support some basic DOM/scripting constructions, right?

joshie76




msg:1473119
 11:41 am on Jul 18, 2002 (gmt 0)

Sorry if my last post sounded a little inflammatory, I didn't mean it to. I think between us (all) we've probably got most angles covered now :)

starway




msg:1473120
 12:52 pm on Jul 18, 2002 (gmt 0)

no problem ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved