-1

I only need to detect if the browser is Internet Explorer, regardless of version, and add an "IE" class to my document body, using jQuery 1.9 or Javascript.

I want to avoid using plugins like modernizr because it seems overkill for this.

Context: I'm trying to change some SVG CSS3 styles that are set-up for keyframed animations, which IE doesn't support).

Diego R
  • 77
  • 2
  • 9
  • possible duplicate of [How to detect Safari, Chrome, IE, Firefox and Opera browser?](http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser) – Huangism Jul 10 '14 at 20:00
  • possible duplicate of [Jquery check if browser is IE](http://stackoverflow.com/questions/15056620/jquery-check-if-browser-is-ie) – dwitvliet Jul 10 '14 at 20:01
  • 1
    I'd say you could use IE conditionals to add the `body` tag a la HTML 5 Boilerplate (see the `html` tag`). However, I've just heard IE11 dropped support for conditionals, if that does or doesn't work for you. – Jared Farrish Jul 10 '14 at 20:12
  • You can also [detect for a vendor-specific `style` property](http://jsfiddle.net/4nFDT/1). Note, you'd probably want to find which vendor-specific style properties work per version of IE; it looks like `msTransform` does for IE9-11. Also, testing it on an SVG could be risky; SVG DOM elements are not the same as HTML DOM elements and things don't always work the same way. – Jared Farrish Jul 10 '14 at 20:23

3 Answers3

1

Instead of using browser detection you should use feature detection, i.e. use modernizer or some such script on your page. this will cater for all browsers and feature variances.

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
  • 2
    While good advice, this doesn't answer the question and should be a comment instead. – JJJ Jul 10 '14 at 20:03
  • Yeah I thought about modernizr, but a full-fledged feature detection plugin seems overkill for just this single task. – Diego R Jul 10 '14 at 20:11
  • Actually I don't think modernizr can detect CSS animation support specifically for elements inside an SVG object. – Diego R Jul 11 '14 at 00:18
1

JQuery used to provide $.browser but it has been removed in more recent versions of the library. They now suggest that you do what they call "feature detection". Read here:

http://learn.jquery.com/code-organization/feature-browser-detection/

And consider using something like modernizr:

http://modernizr.com

oliakaoil
  • 1,615
  • 2
  • 15
  • 36
0

If you want to change some CSS style, the best way is probably to add a stylesheet after your normal stylesheets with the overrides you want, and hide it behind an IE conditional comment. Something like this:

<head>
  <link src='your normal css' />
  <!--[if lt IE 10]>
  <link src='your IE < 10 css' />
  <![endif]-->
</head>

Note I didn't just use <!--[if IE]> because you should not detect IE regardless of version. This is a very bad practice that will most probably break your site as future IE gets the features that you want to use.

In fact, you want CSS animation (I guess), which is supported unprefixed since IE 10...

jods
  • 4,581
  • 16
  • 20
  • IE10 and higher ignores conditional comments, so this won't work. And while IE does support CSS keyframed animation, it does not support it on elements inside SVG objects. – Diego R Jul 11 '14 at 00:03