If Browser, Use Javascript?

Question

I have a script that detects what browser (and version) someone is using, and I'd like to set it up so that for certain browsers, a div class gets an animation on hover. I'd like to do this using jQuery, but I'm open to whatever.

My idea for the JavaScript is this...

if (browser == IE || browser < Firefox 4) {
      // somehow animate a div class on hover (could be id-based too)
    } else {
      // do nothing
    }

The CSS I have set up for this is something like this

.item {
  height: 100px;
  width: 100px;
  /* css3 */
  transition: height .5s, width .5s;
  -moz-transition: height .5s, width .5s;
  -webkit-transition: height .5s, width .5s;
}

.item:hover {
  height: 200px;
  width: 200px;
}

And then the HTML is (obviously)

<div class="item" id="item">
  <p>Content here</p>
</div><!-- end item -->

The purpose is a CSS3 fix for older browsers. Transitions are, in my opinion, one of the best things about CSS3, and it annoys the hell out of me that IE9 doesn't include support for them.

Answer 1

Instead of this, how about using something like the Modernizr library?

http://www.modernizr.com/

Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.

You can then do stuff like this:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Answer 2

You're going down a very dangerous path here using browser sniffing like that.

What you should be trying to do instead is use feature detection. There are libraries out there like the fantastic Modernizr which can do this for you.