Question

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

我该怎么做：

如果支持css3 { css1.css 其他{ css2.css } }

谢谢！

Answer 1

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

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

将nowizr添加到页面

将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");  
}

这是工作小提琴：

http://jsfiddle.net/MehjK/

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

2 个答案: