Detect browser support for CSS-animated SVG -


i playing around css-animated svg elements , came across problem though technologies, used, supported browsers combination not, i.e. css-animated divs work svg elements don't. wondering if there way detect if browser capable of animating svg elements using css.

here jsfiddle example. works in latest versions of chrome, firefox , safari. when opening e.g. firefox 5 div rotates while rect doesn't.

i wondering if there way detect if browser capable of animating svg elements using css

simple answer: no.

you can't detect if browser supports css-functionality css.

the problem have encountered bothering every webdeveloper. still there ways around browser-support-problem:

1. can check "can use" compatibility:

link: http://caniuse.com/ recommend functionality questionable animations.

2. use autoprefixer in workflow:

with of autoprefixer don't have worry of time using css prefix -moz-, -webkit-, etc. tiny helper trick you, can tell autoprefixers browsers want support.

3. user 3rd - party libraries:

there many libraries out there can use detect browser , version. if want sure animation secure use, can use provided animation libraries , of course compatibility before on respective websites.

some big names:

there many more, jsut search world wide web.

4. use css hacks detect specific browsers:

it possible use called css-hacks. specific css calls, apply on browsers.

some examples:

internet explorer/edge 8 only: @media \0screen {}  firefox ≥ 3.6 only: @media screen , (-moz-images-in-menus:0) {}  opera ≤ 9.27 , safari 2: html:first-child .selector {} 

you can more browserhacks here: http://browserhacks.com/

conclusion:

it possible detect specific browsers, not possible detect if brwoser supporting given feature css. why have hard times browser support.

hope helps. regards


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -