1

I added lots of keyframe animations with css3 to my site. Lets say I am animating a div from left to right. Initialy the position of this div is -50px and I am animating to 0px, but if browser do not support css3 the user will see div at -50px which is bad.

How can I do something like:

if css3 is supported { css1.css else { css2.css } }

thanks!

user1568049
  • 51
  • 2
  • 8

2 Answers2

4

there is no need to 2 different css files . you can use modernizr with css to check if a browser supports css3 animation and decide upon the test .

all you need is to relocate the div if animation is not supported .

add modernizr to the page

add class="no-js" to html tag

if browser doesn't support css animations then "no-cssanimations" would be added to the class

then you can add custom rules for not-supporting browsers

.no-cssanimations #yourDiv
{
   top:0px;
}

check this discussion that uses the same technique

Community
  • 1
  • 1
mohsen dorparasti
  • 8,107
  • 7
  • 41
  • 61
0

I think this would work for you..

you can do this in javascript. Source

var supports = (function() {  
   var div = document.createElement('div'),  
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),  
      len = vendors.length;  

   return function(prop) {  
      if ( prop in div.style ) return true;  

      prop = prop.replace(/^[a-z]/, function(val) {  
         return val.toUpperCase();  
      });  

      while(len--) {  
         if ( vendors[len] + prop in div.style ) {  
            // browser supports box-shadow. Do what you need.  
            // Or use a bang (!) to test if the browser doesn't.  
            return true;  
         }   
      }  
      return false;  
   };  
})();  

if ( supports('textShadow') ) { 
  $('#support').html("Your browser supports textShadow property");  
}

here is working fiddle :

http://jsfiddle.net/MehjK/

Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
  • I'm not sure this is a good way to check if a browser supports css3 . supporting css3 new features in different browsers is not the same and even one browser support some features but not others . for example opera supports text shadow but not keyframes as far as I know – mohsen dorparasti Aug 04 '12 at 10:24
  • @reza good point.. it is better to know if a perticular property is supported before using it, instead of checking FULL CSS3 support. – Adil Shaikh Aug 04 '12 at 10:31