What is the means, benefit and differences between User Agent detection and Feature Detection?

What is the means, benefit and differences between User Agent detection and Feature Detection? and which one is 开发者_开发百科better?

And please give usages examples for both.

The main reason to use feature detection as opposed to user agent sniffing is future proofing.

Let's say, for example, that you want to use some new XMLHttpRequest 2.0 features (just making this up). You know IE doesn't support it but Firefox does, and so you have code like this in your JS:

if (!IE) {
    UseNewAjax();
} else {
    UseOldAjax();
}

Later, a new version of IE comes out which supports the new features, but because you are agent-sniffing, your IE viewers can't get this feature goodness without you making a change to your code.

On the other hand, if you feature detection:

if (document.hasCoolNewAjax) {
    UseNewAjax();
} else {
    UseOldAjax();
}

You can be assured in the future that if a browser supports a feature they didn't before, they can start using these features immediately, and you don't have to change your code to support it.

Browser / User Agent sniffing: Using a programming language to determine what browser a visitor is using, so special logic can be written against that browser. Inefficient and considered a bad practice in the development community.

Feature detection: Using a programming language to determine whether a browser supports a particular feature. Considered a best practice in the developer community because it is fool-proof and future-proof.

From Wikipedia:

User agent sniffing is mostly considered poor practice, since it encourages browser-specific design and penalizes new browsers with unrecognized user agent identifications. Instead, the W3C recommends creating HTML markup that is standard,[citation needed] allowing correct rendering in as many browsers as possible, and to test for specific browser features rather than particular browser versions or brands.

JavaScript isn't the only language which you can user-agent sniff or feature detect from. For example, the .NET framework has properties that let you read all sorts of information about the browser:

http://msdn.microsoft.com/en-us/library/3yekbd5b.aspx

http://modernizr.com

Feature detection is always better than user agent detection because users can spoof their user agent string, so it's unreliable.

Aside from the other very good reasons given by the other answers, here's some psuedo code to give a different kind of example:

 if (new_feature_available)
 {
    use_new_feature();
 }
 else
 {
    use_old_feature();
 }

VS:

// We had to look up what features are available in each to make this list
// There are probably browsers we're missing here as well...
// TODO: Make this list really big and include all known browsers
// TODO: Double check that this feature is not supported in listed browsers

 if (
         browser not IE5, IE6, IE7, Opera8, Firefox1.8, Seamonkey,
         OR browser is Chrome10, Firefox4, IE9
     )
 {
    use_new_feature();
 }
 else
 {
    use_old_feature();
 }

Seeing this, doesn't feature detection make more sense?

Browser sniffing is unreliable and hard to maintain.

It's unreliable because:

• user agent spoofing can turn an iPad into a desktop PC running IE6 and vice-versa
• the coupling between user agent version/OS version/JS engine version is very low if not completely non-existing

It's hard to maintain because:

• user agents evolve all the time forcing you to fork and fork and fork
• your code is tightly coupled to specific browsers/engine forcing many compromises and workarounds
• your code is mostly based on assumptions and thus is very fragile

Feature detection makes for simpler and cleaner code. Said code is -in a way - abstracted from the browsers and almost totally future-proof.