If Browser, Use Javascript?

I have a script that detects what browser (and version) someone is using, and I'd like to set it up so that for 开发者_Python百科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.

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 */
}

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.

Use $.support to check if the browser supports it and not even have to mess with version detecting. This helps future proof your code and more accurately models what you really want to do.

In fact, there's already a jQuery plugin to do this specifically. :D

Browser sniffing is not the best way to write JS-code.

If you prefer jQuery, here is jQuery.browser object

Some examples:

 if ($.browser.webkit) {
    alert( "this is webkit!" );
  }

var ua = $.browser;
  if ( ua.mozilla && ua.version.slice(0,3) == "1.9" ) {
    alert( "Do stuff for firefox 3" );
  }

if ( $.browser.msie ) {
    $("#div ul li").css( "display","inline" );
 } else {
    $("#div ul li").css( "display","inline-table" );
 }

You could do something like this:

<![if (IE 6)|(IE 7)|(IE 8)]-->
<link type="text/css" rel="stylesheet" href="nocss3.css" />
<script type="text/javascript" src="nocss3.js"></script>
<![endif]-->

You can use the library Modernizer (http://www.modernizr.com) which detects and fixes support of various HTML 5 and CSS3 features on different browsers.

Here's what they have in their documentation about CSS3 transitions:
http://www.modernizr.com/docs/#csstransitions

CSS Transitions are an incredibly useful new part of CSS3. Using them, you can let the browser animate—or rather, transition—from one state to the other. You only have to specify a start and end and the browser takes care of the rest.

In Modernizr we test for CSS Transitions using the transition property with all vendor prefixes.

Transitions can typically be used without using Modernizr's specific CSS class or JavaScript property, but for those occasions you want parts of your site to look and/or behave differently they are available. A good example use case is to build Modernizr into an animation engine, which uses native CSS Transitions in the browsers that have it, and relies on JavaScript for the animation in browsers that don't.

Sample Usage:

a {
   color: #090;
   -webkit-transition: color .2s ease-out;
}
a:focus,
a:hover {
   color: #9f9;
}

You might look in to this tutorial https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support