We Keep Coding

Test if current browser is any version of Internet Explorer

I don't usually do this and do not support this approach myself. However, my current use case concerns work with MS Sharepoint, and I need to discover if a user is in any version of MSIE or not.
There does seem to be some native Sharepoint functionality that only works in MSIE but I am unable to find how it works - and of course browser sniffing is not a good approach either. I came across this snippet (reference to author at bottom) which looks like an ok test to use:
if(window.ActiveXObject || "ActiveXObject" in window){
// Always true if browser is Internet Explorer
}
Can anyone offer comment on the long term validity of this test. I also thought about testing if the CSS3 selector prefix '-ms-' is supported, but this will of course only work on more modern versions of IE.
Any comments/advice/suggestions much appreciated.
Reference to source of
proposed solution author.

I suggest looking at http://browserhacks.com/
they have a list of several methods to test for IE11 and below.
Ones I personally use are,
// IE <= 10
var ieVersion = (function() { if (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) { return parseFloat( RegExp.$1 ); } else { return false; } })();
// IE 11
var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
ieVersion returns a number if true, false if not true. isIE evaluates to true or false

If you decide to go with a solution involving the user agent string, it's a safe bet that every IE version from 8 through 11 will include the Trident token:
/Trident/.test(navigator.userAgent)
This is the approach I'd use if I couldn't figure out what feature actually needed to be tested for.

Alternative to the Now-Removed $.browser Property [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why is $.browser deprecated - and what is a better alternative?
I have historically used the $.browser property in my jQuery to determine the browser. I found it tremendously helpful and useful.
I also have historically linked to the latest version of jQuery. Like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Well, apparently jQuery 1.9 is out not and the support for this property is REMOVED.
Does anyone know a good jQuery plugin to use as an alternative?
I do know that the recommended method is to use $.support, and I will use that sometimes.
But sometimes it's just easier to know what browser someone is using.
Can anyone help?

The browser object simply parsed the navigator.userAgent for you. You could always parse that yourself if you are so inclined.
Nothing stops you from plucking the code from an older JQuery version and then putting that into your own jquery plugin.
The Jquery docs recommend against the browser object and even state that it is vulnerable to spoofing:
Because $.browser uses navigator.userAgent to determine the platform,
it is vulnerable to spoofing by the user or misrepresentation by the
browser itself. It is always best to avoid browser-specific code
entirely where possible. The $.support property is available for
detection of support for particular features rather than relying on
$.browser.

You could always go to the source.
This is not my code, this is adapted from jQuery source code
DEMO: http://jsfiddle.net/KKwqU/
js:
function ExtendJqueryBrowser(){
jQuery.extend({browser:{}});
function uaMatch(ua){
ua = ua.toLowerCase();
var rwebkit = /(webkit)[ \/]([\w.]+)/,
ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
rmsie = /(msie) ([\w.]+)/,
rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/;
var match = rwebkit.exec( ua ) || ropera.exec( ua ) || rmsie.exec( ua ) || ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) || [];
return { browser: match[1] || "", version: match[2] || "0" };
}
var browserMatch = uaMatch( navigator.userAgent );
if ( browserMatch.browser ) {
jQuery.browser[ browserMatch.browser ] = true;
jQuery.browser.version = browserMatch.version;
}
// Deprecated, use jQuery.browser.webkit instead
if ( jQuery.browser.webkit ) {
jQuery.browser.safari = true;
}
}

Writing Conditional Code for Internet Explorer WITHIN a Javascript file

I'd like to know if it's possible to write conditional javascript within a javascript file for Internet Explorer.
i.e. something like this...
if (is IE7) {
do this } else {
do this instead
});
I know I can load a completely different script for IE using conditional comments in the head, but I only want to change a small piece of code and so loading a completely different sheet would be an 'expensive' way to do that.

When writing Javascript, doing feature detection is always the way to go instead of browser detection. So instead of doing if (IE7) do if (feature).
For example, if you want to know if your browser supports getElementsByClassName(), instead of checking the browser version, you check for the existence of the function ( if (document.getElementsByClassName) ).
Please read this great article:
Object detection on Quirksmode
If you want to know whether the
browser that views your page supports
certain objects you want to use in
your code, you should never EVER use a
browser detect. Sure, you know that
this–and–that browser will support
your code while such–and–so browser
won’t. But how about other browsers,
obscure browsers?

Not within the JavaScript file directly.
A few alternatives would be:
Using a global variable before the script is loaded to check in your JavaScript file. This is a bit of a hybrid approach and could get messy, but it's guaranteed IE detection.
<!--[if IE]>
<script type="text/javascript">
var is_ie = true;
</script>
<![endif]-->
<script type="text/javascript" src="somefile.js"></script>
Or, a more traditional approach using browser or object detection within the JavaScript file.

Conditional compilation is exactly what you are looking for.
<script>
/*#cc_on
#if (#_jscript_version == 5.7 && window.XMLHttpRequest)
document.write("You are using IE7");
#end
#*/
</script>

My go-to script for this is PPK's BrowserDetect script. It's lightweight, easily understandable, and doesn't require you to use a library. When it's loaded, you can write code like:
if (BrowserDetect.browser == "Explorer" && BrowserDetect.version >= 6 && BrowserDetect.version <= 8) {
// IE6-8 code
{
Of course, you should avoid using this at all (reasonable) costs, but there's times where it's cleaner to quarantine IE-specific code away rather than try to hack around IE-specific functions and bugs.

Despite the fact that this is an answer to the original question, this is NOT what you should do. So don't do it!
Why not work out which browser you are using and store that in a variable in javascript. Then you can have if statemenets and the like in your javascript. e.g. If I am IE then do this, otherwise do that. You get the idea!
Have you seen this? Browser sniffing
The salient bit:
var is = {
ff: window.globalStorage,
ie: document.all && !window.opera,
ie6: !window.XMLHttpRequest,
ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera,
ie8: document.documentMode==8,
opera: Boolean(window.opera),
chrome: Boolean(window.chrome),
safari: window.getComputedStyle && !window.globalStorage && !window.opera
}

If you are using jquery you code do this
if ($.browser.msie && $.browser.version == '6.0') {
//do IE specific code
}

If you want to use jquery, it has a built in browser detect.
http://api.jquery.com/jQuery.browser/

Dynamic CSS3 prefix user agent detection

Is there a better way then using jQuery.browser, or equivalents, for determining css 3 prefixes (-moz, -webkit, etc), as it is disencouraged? Since the css is dynamic (the user can do anything with it on runtime), css hacks and style tag hacks can't be considered.

I don't see the issue with using the navigator.userAgent to determine if you need to cater for Webkit / Gecko CSS3 prefixes. Or better yet, just stick with CSS2 until CSS3 becomes a W3C Recommendation.
The reason use of the navigator object is discouraged is because it was used over Object detection when (java)scripting for different browsers, your situation is one where it is fine to use user agent detection, because your'e specifically targeting certain quirks with different rendering engines.
Edit:
Picking up from where cy left off, you can use javascript object detection to detect whether a prefix is used, I made some quick code to do so:
window.onload = function ()
{
CSS3 = {
supported: false,
prefix: ""
};
if (typeof(document.body.style.borderRadius) != 'undefined') {
CSS3.supported = true;
CSS3.prefix = "";
} else if (typeof(document.body.style.MozBorderRadius) != 'undefined') {
CSS3.supported = true;
CSS3.prefix = "-moz-";
} else if (typeof(document.body.style.webkitBorderRadius) != 'undefined') {
CSS3.supported = true;
CSS3.prefix = "-webkit-";
}
if (CSS3.supported)
if (CSS3.prefix == "")
alert("CSS3 is supported in this browser with no prefix required.");
else
alert("CSS3 is supported in this browser with the prefix: '"+CSS3.prefix+"'.");
else
alert("CSS3 is NOT supported in this browser.");
};
Remember to watch out for strange quirks such as -moz-opacity which is only supported in older versions of Firefox but has now been deprecated in favour of opacity, while it still uses the -moz- prefix for other new CSS3 styles.

Array.prototype.slice.call(
document.defaultView.getComputedStyle(document.body, "")
)
.join("")
.match(/(?:-(moz|webkit|ms|khtml)-)/);
Will return an array with two elements. One with dashes and one without dashes, both lowercase, for your convenience.
Array.prototype.slice.call(
document.defaultView.getComputedStyle(document.body, "")
);
Without the browser check will return an array of nearly all the css properties the browser understands. Since it's computed style it won't display shorthand versions, but otherwise I think it gets all of them. It's a quick hop skip and a jump to auto detect whatever you need as only vendor prefixed stuff starts with a dash.
IE9, Chrome, Safari, FF. Opera won't let you slice CSSStyleDeclaration for you can still use the same getComputedStyle code and loop through the properties or test for a specific one. Opera also wanted to be the odd man out and not report the vendor prefix dasherized. Thanks Opera.
Object.keys(CSSStyleDeclaration.prototype)
Works in IE9 and FF and reports the TitleCased (JavaScript) version of the vendor property names. Doesn't work in WebKit as the prototype only reports the methods.
Here's an interesting and very dangerous function I just wrote along these lines:
(function(vp,np){
Object.keys(this).filter(function(p){return vp=vp||p.match(/^(Moz|ms)/)}).forEach(function(op){
this.__defineGetter__(np=op.replace(vp[0], ""), function() { return this[op] });
this.__defineSetter__(np, function(val) { this[op] = val.toString() });
}, this);
}).call(CSSStyleDeclaration.prototype);
I didn't test anything Konquerer.

It's adding in another library, but would Modernizr work for you? It adds CSS classes to the <html> tag that can tell you what the browser supports.
It does muddy up the code a bit, but can certainly be helpful in appropriate situations.

Speculatively: Yes. You can try adding a vendor prefix css rule (that's what they're called), and then test to see if that rule exists. Those vendor-specific rules won't be added to the DOM in browsers in which they're not supported in some cases.
For example, if you try adding a -moz rule in webkit, it won't add to the DOM, and thus jQuery won't be able to detect it.
so,
$('#blah').css('-moz-border-radius','1px');
$('#blah').css('-moz-border-radius') //null in Chrome
Conversely,
$('#blah').css('-webkit-border-radius','1px');
$('#blah').css('-webkit-border-radius'); //returns "" in Chrome
This method works in WebKit browsers; I'm testing to see if it works in others. Pending.
Edit: Sadly, this isn't working in Firefox or Opera, which just returns "" no matter compatibility. Thinking of ways to do this cross-browser...
Final Edit: Andrew Dunn's answer does this in a way that works (at least in FF and Webkit, which is better than my method).

I use ternary operator to have it only in 1 line. If it's not webkit nor gecko, I'll just use the standard property. If it has no support, who really cares then?
var prefix = ('webkitAnimation' in document.body.style) ? '-webkit-' : ('MozAnimation' in document.body.style? '-moz-' : '');
Basically I found Animation is one of the properties never changed. As soon as the browser starts supporting the Draft / Candidate Recommendation of a CSS3 property, it drops the prefix on JS side. So you will need to be careful and take in mind that, before copy-pasting.

Can you test for browser support for -moz-linear-gradient?

I would like to use feature detection to tell whether the user's version of Firefox supports the CSS style value -moz-linear-gradient. (This was added in Gecko 1.9.2. Version 3.6 of Firefox uses this.)
I can't use document.body.style.mozLinearGradient (or something similar) because -moz-linear-gradient is not a style property but a style value.
Does anyone know how to test for this without using version numbers?

I'm not sure how, but Modernizr (a nice little feature-detection script) appears to do it.
I guess you could create an (offscreen?) element, set that as it's style, and then poke around in the DOM to see if the browser successfully applied it?

Just assign it as style value and check afterwards if it is there.
Kickoff example:
function supportsMozLinearGradient() {
var element = document.getElementsByTagName('script')[0]; // Just grab an "invisible" element.
var oldstyle = element.style.background; // Backup old style.
try {
element.style.background = '-moz-linear-gradient(top, black, white)';
} catch(e) {
// Ignore failures.
}
var supports = element.style.background.indexOf('-moz-linear-gradient') > -1; // Did it accept?
element.style.background = oldstyle; // Restore old style.
return supports;
}

You should check for -moz-background-size (which was introduced in Firefox v3.6). The inference won't be picked up by other browsers since the property is prefixed.
if ('MozBackgroundSize' in document.body.style)

This is how MooTools detects Gecko (Firefox) engine (I'm "paraphrasing" slightly)
gecko = (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18)
So if it's FF it'll return 19 or 18, I believe 19 is 3.x and 18 is 2.x
And apparently FF3.6 stopped supporting document.getBoxObjectFor, so to detect 3.6 I basically do
isFF36 = gecko && !document.getBoxObjectFor
Works like a charm from a few tests I did.
If you're not using MooTools you can probably combine the two into one statement that would return something like false or 'ff' or 'f36' but I'm too lazy to work through that logic :)