测试浏览器是否支持该样式
test browser supports the style or not
我可以做以下检查,如果浏览器不支持列计数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);}
所以,我想知道有没有什么技术可以测试它是否被浏览器支持?
更新strong>
我只是尝试像这样的代码,甚至不检查@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;
}
}
}
以及在评论中提到的现代化器 -我们可以首先添加供应商前缀用于背景动画以获得更多的浏览器覆盖率。如:
#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
的检查相结合(检查背景图像告诉我们是否已经应用了@keyframes )
尝试现场演示