how to test if keyframes is supported or not using Modernizr?

StackOverflow https://stackoverflow.com/questions/22631308

Question

I would like to test if the browser supports keyframes or not. So I found this .

But I'm really confused how to use?

Modernizr.addTest("keyframes", function(){
    //your test code without adding a support class || this will be done by Modernizr
    return [boolean]; // return true if it is supported or false if it is not supported
});
if(Modernizr.addTest()){
    alert('supports');
}

I used it like this but it is adding the class in all browsers:

Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
    if($("html").hasClass('no-keyframe')){
        alert('test');
    }
Was it helpful?

Solution

Modernizr is a javascript library used for feature detection. You can find it here : http://modernizr.com/

there are several guides to help you get started. But basically, once you have downloaded the file, you can add that test to the bottom of if. Then when the script is loaded it will add a css class to the <html> of your document e.g. <html class="keyframes"> or <html class="no-keyframes">.

So, the next step is how to use this?? Well, you chain your selectors, for instance, you could use this jQuery selector:

$("html.keyframes className").on(....)

Which means that this event will only fire on className when it is a descendant of html.keyframes.

In a similar fashion, if you wanted to call something ONLY when keyframes was not available, you would do this:

$("html.no-keyframes className").on(....)

or you can use something like:

if($('html').hasClass('keyframes')) 
{
//do something only if keyframes is supported
}
else
{
//do something different if its not
}

I hope this helps.

UPDATE

Here is a working fiddle to show you how to use it: http://jsfiddle.net/wf_4/hYNy8/

I have included the URL for the CDN in the "External Resources", and I have added the test for keyframes. I have then used jquery to read the class values from the html tag and insert them into the page so that you can see them. All that I would add is that by using the FULL library, you will be performing ALL those tests each page load. What I do is to create a custom build of the library for just the tests that I need.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top