Test Browser Supports The Style Or Not

I can do the following to check if the browser doesn't support column-count css3 property then use my own code: if (!('WebkitColumnCount' in document.body.style || 'MozColu

Solution 1:

As well as the mention to modernizer in the comments - we could first add in the vendor prefixes for the background animations to get more browser coverage. like :

#animationdivTest { 
   animation: animatedBackground 20s linear infinite;
   -ms-animation: animatedBackground 20s linear infinite;
   -moz-animation: animatedBackground 20s linear infinite;
   -webkit-animation: animatedBackground 20s linear infinite;
}

I'm guessing at what animation you are doing

---

A blunt check for this in javascript might be

/* check a doc.fragment div or test div on page */var el = document.getElementById('animationdivTest');
/* create a function here to test for ALL the vendor prefixes 
( this is where modernizer comes in v handy )

 one example - */if( el.style['-webkit-animation'] !== undefined ) {
   document.getElementsByTagName("html")[0].className +=' cssanimation'; 
}

Our Css can then be tailored :

.cssanimation#animationdiv { 
       animation: animatedBackground ...

---

We can have a live play here - http://jsbin.com/yamepucu/1/edit

Not sure how much that helps vrs what you already know , hope some part did.

---

Update: showing how testing for style.animation can be combined with the check for style.background-image ( checking for background-image tells us whether the @keyframes have been applied )

Try live demo

HTML

  <div id="animationdivTest">Testing...</div>
  <div id="animationdiv"></div>

CSS

@-webkit-keyframes bgAnimation {
  0% {
    background-image: url('http://www.new4.co.uk/flip/flip-3.gif');
  }
  40% {
    background-image: url('http://www.new4.co.uk/flip/flip-2.gif');
  }
  70% {
    background-image: url('http://www.new4.co.uk/flip/flip-1.gif');
  }
  100% {
    background-image: url('http://www.new4.co.uk/flip/flip-0.gif');
  }

}

#animationdivTest, .cssbgAnimation#animationdiv {

  width: 90px;
  height: 240px;
  -webkit-animation-name: bgAnimation;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;

}

#animationdiv:after { content:"Sorry not supported"; }  
.cssbgAnimation#animationdiv:after { content:""; }
.cssbgAnimation#animationdivTest { position:absolute; left:-999px; top:-9999px; }

Example JSadded in a function loop to check for the other vendor prefixes this time.

var el = document.getElementById('animationdivTest');
functionhasBgAnimSupport() {
  var does =false, 
  animVendorprefixes = ['animation','-ms-animation','-moz-animation','-webkit-animation'];

  for(i=0, len = animVendorprefixes.length; i<len; ++i) {
    if( el.style[animVendorprefixes[i]] !== undefined ) { 
      if( el.style['background-image'] !== undefined ) {
        does=true; break;
      }
    }
  }
  return does;
 } 


if(hasBgAnimSupport() ) { 
   document.getElementsByTagName("html")[0].className +=' cssbgAnimation';
}

AFAIK - this is the closest and future proof way we can check for this