1

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 depending on the browser.

John Saunders
  • 160,644
  • 26
  • 247
  • 397
JCOC611
  • 19,111
  • 14
  • 69
  • 90
  • 1
    Clarify *why* you want to do this, as a better solution may solve your underlying problem. – Josh Lee Dec 24 '10 at 21:14
  • depends on the browser and the CSS properties that you are setting – Šime Vidas Dec 24 '10 at 21:15
  • let's say for example I'm setting the padding of an element, but on each different browser it will look different if I set it to the same. So I have to set it differently on each browser.. – JCOC611 Dec 24 '10 at 21:23
  • @JCOC Hm, that sounds like a button element. What element is it? And also, what browsers are we talking about. Be specific. – Šime Vidas Dec 24 '10 at 21:25
  • I'm talking about `` and: IE 7+, Chrome, Firefox, and Opera. – JCOC611 Dec 24 '10 at 21:31
  • A `reset.css` stylsheet (such as [Eric Meyer's Reset Reloaded](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/), [YUI 2 reset](http://developer.yahoo.com/yui/reset/#code), among quite a few others) can reduce the impact of browser differences by explicitly styling away the vast majority of browser defaults. It's not a cure-all panacea, but it should deal with cross-browser differences in the rendering of an `input` element; with the exception of those styled by the underlying OS, in which case *nothing* can be done, except using some form of JS and a hidden field or something. – David Thomas Dec 25 '10 at 00:29

8 Answers8

2

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

  1. SitePoint's take on the use of browser sniffing: http://blogs.sitepoint.com/2009/05/31/why-browser-sniffing-stinks/
  2. Stackoverflow's very own investigation: Why is browser sniffing not a recommended practice?
Community
  • 1
  • 1
David Thomas
  • 249,100
  • 51
  • 377
  • 410
1

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';
bobince
  • 528,062
  • 107
  • 651
  • 834
  • I know IE is usually the only browser with..ermm..issues...lol but this time I'm setting different CSS for Firefox, IE, **and** Opera. – JCOC611 Dec 24 '10 at 21:21
  • Really? To what end? Significant, unavoidable Firefox/Opera CSS bugs are quite rare. If you're doing something different to account for presence of new CSS3 features, you should key this on presence or absence of the `styleName` property in a `style` object, rather than on the awful `navigator.userAgent`. – bobince Dec 24 '10 at 21:24
  • I guess it *is* CSS3. I'm adding a `text-shadow` inside a button. – JCOC611 Dec 24 '10 at 21:28
1

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.

dthorpe
  • 35,318
  • 5
  • 75
  • 119
1

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}
mwilcox
  • 4,065
  • 23
  • 20
0

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

WrightsCS
  • 50,551
  • 22
  • 134
  • 186
0

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • I have the same issue as with *bobince's* answer. – JCOC611 Dec 24 '10 at 21:21
  • @JCOC611 This is because we are all trying to guess at your intent, since you asked a very broad question without sufficient information to really help you. – Phrogz Dec 24 '10 at 21:22
  • I understand, but I just asked if there is a reason not to do it with browser detection, I didn't ask "how can I do this without using browser detection" – JCOC611 Dec 24 '10 at 21:25
  • @JCOC But that depends on the specific browser and on the specific property. There is no general answer to that question. – Šime Vidas Dec 24 '10 at 21:27
  • @JCOC611 The answer is, _"Yes, there is a reason not to do something if a better way to accomplish the same thing is available."_ So the answer in your case depends on what you are really trying to do. Perhaps browser detection and the use of JavaScript are unavoidable; we can't help answer this, however, without knowing what—specifically—you are needing to do. – Phrogz Dec 24 '10 at 21:28
0

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.

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
  • I know this, but I don't think I can test: `if(some css will cause certain effect on the webpage)` – JCOC611 Dec 24 '10 at 21:19
  • what exactly do you want to test? There may be a known way to feature detect it. – Russ Cam Dec 24 '10 at 21:20
  • I know how the webpage is rendered on each browser, so I tweak the CSS for it to look the same on all browsers, or at least that it works on all of them (IE...) – JCOC611 Dec 24 '10 at 21:29
  • @JCOC611- you know how the web page is rendered, but there may be a known way to detect the underlying feature that causes the page to be rendered in a specific way. Could you add more specific details to your question about what it is exactly you're trying to achieve by attempting to browser detect? – Russ Cam Dec 24 '10 at 21:34
0

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.

rmurphey
  • 552
  • 3
  • 7