测试浏览器是否支持样式

我可以执行以下操作来检查浏览器是否不支持列计数css3属性，然后使用我自己的代码：

if (!('WebkitColumnCount' in document.body.style || 'MozColumnCount' in document.body.style || 'OColumnCount' in document.body.style || 'MsColumnCount' in document.body.style || 'columnCount' in document.body.style)) {//my own code here} 

但是，如何检查背景图像动画支持？

这种带有css3的更改图像源仅适用于Chrome浏览器。

 0%{background-image: url(image-1);} 50%{background-image: url(image-2);} 100%{background-image: url(image-3);} 

所以，我想知道是否有任何技术可以测试浏览器是否支持它？

更新

我只是尝试这个代码，甚至没有检查@keyframes样式支持：

 if (('@keyframes' in document.body.style || '@-webkit-keyframes' in document.body.style)) { //if(!('from' in @keyframes || 'from' in @webkit-keyframes)){ //code in here alert('test'); //} } 

那么我甚至不能测试浏览器支持的@keyframes吗？

---

解：

我从mdn找到了

 var animation = false, animationstring = 'animation', keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = ''; if( elm.style.animationName !== undefined ) { animation = true; } if( animation === false ) { for( var i = 0; i < domPrefixes.length; i++ ) { if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { pfx = domPrefixes[ i ]; animationstring = pfx + 'Animation'; keyframeprefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } } } 

Answer 1

除了在评论中提到现代化器之外 – 我们可以先添加背景动画的供应商前缀以获得更多的浏览器覆盖率。 喜欢 ：

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

我猜你正在做什么动画

---

在javascript中对此进行直接检查可能是

 /* 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'; } 

我们的Css可以定制：

 .cssanimation #animationdiv { animation: animatedBackground ... 

---

我们可以在这里进行现场表演 – http://jsbin.com/yamepucu/1/edit

不知道有多少可以帮助你已经知道的东西，希望有些人做了。

---

更新：显示如何将style.animation测试与style.background-image的检查结合起来（ 检查background-image告诉我们是否已应用@keyframes ）

试试现场演示

HTML

  
Testing...
 
 

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; } 

示例JS 在函数循环中添加，以检查此次的其他供应商前缀 。

 var el = document.getElementById('animationdivTest'); function hasBgAnimSupport() { var does =false, animVendorprefixes = ['animation','-ms-animation','-moz-animation','-webkit-animation']; for(i=0, len = animVendorprefixes.length; i 

AFAIK - 这是我们可以检查的最接近和未来的certificate方式