Browser Detection, do's and dont's. Is this ok?_问答_开发者

So, I understand that browser detection (ie. navigator.userAgent) shouldn't be used to decide which object method/property to use; yet, I want to set some simple CSS with JavaScript depending on the browser. However, it's not enough to justify a completely new StyleSheet. So is it OK if I use Browser Detection to decide what CSS to apply to an element?

EDIT

Ok, let's be SPECIFIC. I'm talking about a text-shadow inside a button (<input type="button"/>) The text inside the button isn't vertically centered in all browsers, so I tweak this with JS dependin开发者_开发百科g on the browser.

Dos and don'ts are absolutely fine! ...browser detection, on the other hand, seem to have been superseded by 'object detection':

SitePoint's take on the use of browser sniffing: http://blogs.sitepoint.com/2009/05/31/why-browser-sniffing-stinks/
Stackoverflow's very own investigation: Why is browser sniffing not a recommended practice?

If you're wanting to detect the browser version or vendor so that you can avoid using CSS or other features that are not supported by that browser, it's best to test for existence of the feature instead of testing for the browser version.

You seem to want an IE CSS workaround without having to specify a complete new stylesheet. You can have that using conditional comments, eg to target IE6:

<!--[if lt IE 7]><body class="browser-ie6"><![endif]-->
<!--[if gte IE 7]><!--><body class="browser-ok"><!--<![endif]-->

then you can use a CSS rule like:

body.browser-ok .troublesome_thing { troublesome-style: something; }

in your main stylesheet.

There is almost never a good reason to look at navigator.userAgent, which is troublesome and unreliable even by browser-sniffing standards.

ETA:

I'm adding a text-shadow inside a button.

You don't need to browser-sniff for that. Just include the rule. If it works, it works, if it doesn't you've lost nothing.

If you want to provide a backup style for browsers that don't support it, you could use alternative rules:

button { text-shadow: 2px 2px 2px white; }
body.support-noshadow button { background: white; }

with some JS to detect the case:

if (!('textShadow' in document.body.style))
    document.body.className+= ' support-noshadow';

The solution for text-shadow is quite simple since it's a standard. You make yourself a test DIV and check that the style is not undefined:

if(div.style.textShadow !== undefined){ return true; }else{ return false; }

Note you don't need to, nor should you set the style. IE will regurgitate the style as it would if you set any other object property. The above code will be undefined in IE and all others will be... well, something other than undefined.

It gets trickier with other CSS3 styles because you need to account for all of the browser prefixes:

if(
    div.style.MozBoxShadow !== undefined ||
    div.style.WebkitBoxShadow !== undefined ||
    div.style.OBoxShadow !== undefined ||
    div.style.KhtmlBoxShadow !== undefined ||
    div.style.msBoxShadow !== undefined ||
    div.style.boxShadow !== undefined // don't forget this one!
){return true}

Sure, browser detection would be a fine method of choosing your CSS style. (Based on your question).

Typically the reason you want to change CSS for a browser is for IE. For this you should use IE's conditional comments support to include either a stylesheet or inline styles just for IE. For example:

<link rel="stylesheet" type="text/css" href="common.css" />
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Only IE6 and earlier will include the second stylesheet, in which you may override earlier styles or fix problems. No JavaScript is needed.

The way that you've phrased the question, the answer is yes, use browser detection to set simples CSS with JavaScript depending on the browser. But, I don't think this is what you really intend to ask.

The more progressive approach is to use feature detection as opposed to browser detection i.e. "does the browser support x?" - if it does then do this, otherwise do something else.

Sometimes however, this isn't always so easily possible to do in that it may not be so straightforward to write the code that allows to test for a feature. I'd say in these cases, the pragmatic approach may be to browser detect as specifically as possible, with a view to feature detecton in the future when there are known/reliable ways to test for a feature.

If you could provide more details by editing your question, we may be able to help further.

You may want to look into Modernizr (or at the very least its text-shadow test). It is a JavaScript library that does this feature detection for you, letting you target both your CSS and your JS based on the results.