如果浏览器不支持css3，如何提供不同的样式表？

Question

我在我的网站上添加了很多css3的关键帧动画。假设我从左到右设置了一个div动画。最初，这个div的位置是-50px，我将动画设置为0px，但是如果浏览器不支持css3，用户将看到div的位置是-50px，这是不好的。

我如何做一些事情，比如：

如果支持css3 { css1.css否则{ css2.css }}

谢谢!

Answer 1

不需要2个不同的css文件。您可以结合使用modernizr和css来检查浏览器是否支持css3动画，并决定测试。

如果不支持动画，您只需重新定位div即可。

在页面中添加现代版

将class="no-js“添加到html标签

如果浏览器不支持css动画，则会将"no-cssanimations“添加到类中

然后，可以为不支持的浏览器添加自定义规则

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

检查这个使用相同技术的discussion

Answer 2

我想这对你来说是可行的..

你可以在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");  
}  

下面是working fiddle：

http://jsfiddle.net/MehjK/