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

Question

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

我该怎么做：

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

谢谢！

Answer 1

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

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

将modernizr添加到页面

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

如果浏览器不支持 css 动画，那么“no-cssanimations”将被添加到类中

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

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

检查这个使用相同技术的讨论

Answer 2

我想这对你有用..

你可以在javascript中做到这一点。 资源

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/