Asked  6 Months ago    Answers:  5   Viewed   48 times

I am going to play a devil's advocate for a moment. I have been always wondering why browser detection (as opposed to feature detection) is considered to be a flat out as a bad practise. If I test a certain version of certain browser and confirm that, that certain functionality behaves is in some predictable way then it seems OK to decide to do special case it. The reasoning is that it will be in future foolproof, because this partial browser version is not going to change. On the other hand, if I detect that a DOM element has a function X, it does not necessarily mean that:

  1. This function works the same way in all browsers, and
  2. More crucially, it will work the same way even in all future browsers.

I just peeked into the jQuery source and they do feature detection by inserting a carefully constructed snippet of HTML into DOM and then they check it for certain features. It’s a sensible and solid way, but i would say that it would be a bit too heavy if i just did something like this in my little piece of personal JavaScript (without jQuery). They also have the advantage of practically infinite QA resources. On the other hand, what you often see people doing is that they check for the existence of function X, and then based on this, they assume the function will behave certain way in all browsers which have this function.

I’m not saying anything in the sense that feature detection is not a good thing (if used correctly), but I wonder why browser detection is usually immediately dismissed even if it sounds logical. I wonder whether it is another trendy thing to say.

 Answers

97

It seems to me browser detection has been widely frowned upon since this post by Resig a couple of years ago. Resig's comments however were specific to libraries/framework code, i.e. code that will be consumed by other [domain-specific] applications/sites.

I think feature detection is without question a good fit for libraries/frameworks. For domain-specific applications however I'm not so sure browser detection is that bad. It's suitable for working around known browser characteristics that are difficult to feature-detect, or for browsers that have bugs in their implementation of the feature itself. Times that browser detection is appropriate:

  • sites/applications that are not cross-browser and need to show a warning/dialog/DifferentPage tailoring to that client's browser. This is common in legacy applications.
  • Banks or private sites with strict policies on what browsers and versions are supported (to avoid known security exploits that may compromise user's data)
  • micro-optimizations: occasionally one browser is ridiculously faster than the others when performing some operation a certain way. It can be advantageous depending on your user base to branch on that particular browser/version.
  • Lack of png transparency in IE6
  • many display/rendering issues (read: IE css support) that are only witnessed in specific browser versions and you don't actually know what feature to test for.

That said, there are some major pitfalls (probably committed by most of us) to avoid when doing browser detection.

Tuesday, June 1, 2021
 
liquidmotion
answered 6 Months ago
74

Well, in modern Chrome, it's at least possible to know what happens. Chrome uses the HTML5 parser algorithm which describes exactly how invalid mark-up is processed. The gory details are at http://dev.w3.org/html5/spec/tree-construction.html#parsing-main-inbody

What happens in your example is that the first <head> in <body> is discarded. Then the <script src="javascriptfile.js"/> tag is processed, which is a start tag, not a self-closing tag, so everything that follows, including everything that looks like a tag, becomes a text child of the script element. Nothing is displayed and no script is run. If <script src="javascriptfile.js"/> is replaced by <script src="javascriptfile.js"></script>, and ditto for <script src="javascriptfile2.js"/>, the head start and end tags are silent discarded, and the script elements are not moved. "Tile One Content Title Two Content" is displayed and the scripts are run. The DTD makes no difference at all.

IE is somewhat trickier to know, as before IE10, it doesn't use the HTML5 parser algorithm and therefore it's exact behaviour is a mystery. However, a cursory experiment appears to show that it has the same behaviour as described above.

Although some legacy browsers move elements that can only appear in the head - such as <link> - into the head, other browsers do not, and no such behaviour can be relied upon.

All in all, best steer well clear of such constructs.

I don't know about practices for Apache Tiles.

Tuesday, August 17, 2021
 
amustill
answered 4 Months ago
98

This question is indeed a duplicate of Determine whether browser supports printing. See carpetsmoker's comment on this question and the answer referred to. I agree, that may be the best we can do for now.

Even if window.print isn't part of any standard, it'd be nice if browser vendors implemented and agreed upon some API for detection. Perhaps they're all internally working on an appropriate implementation for the function and so don't want to throw out there something temporary that'll be useless later. Oh, well.

Sunday, August 22, 2021
 
Josiah Ruddell
answered 4 Months ago
43

There's apparently a bug in the way Firefox and Chrome handle padding in table cells in HTML5: http://code.google.com/p/chromium/issues/detail?id=50633

When you try your markup and CSS with 0 padding, they're the same. When you switch the DOCTYPE to be not HTML5 they are the same as well.

Thursday, October 7, 2021
 
Mahmoud Saleh
answered 2 Months ago
48

You can test navigator.userAgent for the strings Safari/ and Windows (list of Safari user agent strings), e.g.: Live Example

var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("safari/") !== -1 &&  // It says it's Safari
    ua.indexOf("windows") !== -1 &&  // It says it's on Windows
    ua.indexOf("chrom")   === -1     // It DOESN'T say it's Chrome/Chromium
    ) {
    // Looks like Safari on Windows (but browser detection is unreliable and best avoided)
}

...but browser detection is usually not the best solution to a problem. Much better, where you can, to use feature detection. You can feature-detect nearly everything. Kangax has a great list of feature detects, and of course libs like Moderizr do them as well. But I don't know your use-case...

Saturday, October 16, 2021
 
Saxophlutist
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share