1

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');
    }
Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
Navin Rauniyar
  • 10,127
  • 14
  • 45
  • 68

1 Answers1

1

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.

wf4
  • 3,727
  • 2
  • 34
  • 45
  • 1
    Keep in mind that `html.keyframes .className` is a potentially expensive selector, as it has to check all ancestors for the tag name and class name. It may be more efficient to use `document.documentElement.classList.contains('keyframes')` (or a compatibility shim thereof for older browsers) especially if you'll be using this a lot. This is particularly true of animations where you want code to be as realtime as possible to ensure smooth animation. – Niet the Dark Absol Mar 25 '14 at 10:29
  • By "compatibility shim thereof" I mean something like `document.documentElement.className.match(/\bkeyframes\b/)` – Niet the Dark Absol Mar 25 '14 at 10:30
  • Thanks @NiettheDarkAbsol , I may need to take a look back over some of my recent work :-) – wf4 Mar 25 '14 at 10:33
  • @wf4 I've linked this http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js is that okay? – Navin Rauniyar Mar 25 '14 at 10:39
  • -chuckles- I spend hours squeezing efficiency out of my code - not micro-optimising, but rather... macro-optimising. Various page speed tests have become a game to me, such as [my Pingdom score](http://tools.pingdom.com/fpt/#!/c5JWQf/q.pokefarm.org) and my [PageSpeed score](https://developers.google.com/speed/pagespeed/insights/?url=q.pokefarm.org&tab=desktop) (on that last one, anyone know how to tell PageSpeed that the mobile site should be viewed in landscape?) – Niet the Dark Absol Mar 25 '14 at 10:41
  • @NavinRauniyar I have updated my answer and included a working fiddle to show you that it is working (using your liked URL) – wf4 Mar 25 '14 at 11:26