Question

I’m using a 3d card flip animation in my project.
As show on this site ( http://css3.bradshawenterprises.com/flip/ )

I want to detect when the browser supports this kind of animation.
Chrome for example might not default support it if you have windows xp/old drivers because it can give crashes.
When Chrome doesn’t support it, it will show the names mirrored and the animation wont be 3d (for me).

I checked two different detection methods:
How to detect CSS translate3d without the webkit context?
And from
Detecting 'transform: translate3d' support

var has3d = function() {
return (‘WebKitCSSMatrix’ in window && ‘m11’ in new WebKitCSSMatrix());
}

Both give me back a value that is true. What is not being supported and how can i detect that property without using a library like Modernizr.

Answer 1

You should use something Modernizr to detect if the user’s browser supports everything you need to do the card flip. It is created for just that purpose and does the job far more efficiently than when you would have to find and maintain your own solution. As browsers evolve, modernizr will as well and you won’t have to worry about wether your feature detection will break