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 div
s 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:
- angular: https://angularjs.org/ (use ng-animate)
- jquery: https://jquery.com/
- greensock: https://greensock.com/
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
Post a Comment