测试浏览器是否支持样式 [英] test browser supports the style or not
问题描述
我可以执行以下操作来检查浏览器是否不支持列计数css3属性,然后使用我自己的代码:
I can do the following to check if the browser doesn't support column-count css3 property then use my own code:
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}
但是如何检查背景图像动画支持?
But how can I check that background-image animation support?
这种类型的变化图像使用css3的源仅适用于Chrome浏览器。
This type of changing image source with css3 only works on chrome browsers.
0%{background-image: url(image-1);}
50%{background-image: url(image-2);}
100%{background-image: url(image-3);}
所以,我想知道是否有任何技术我们可以测试浏览器是否支持它?
So, I wanted to know is there any technique that we can test that it is supported by the browser or not?
更新
我刚试过这个甚至没有检查@keyframes样式支持的代码:
I just tried like this code which is even not checking @keyframes style support:
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是否支持浏览器?
So even can I not test that @keyframes supported by browser or not?
解决方案:
我从 mdn <找到了/ a>
I've found from 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;
}
}
}
推荐答案
除了在评论中提到 现代化者 之外,我们还可以首先添加 供应商前缀 作为背景动画,以获得更多浏览器覆盖率。喜欢:
As well as the mention to modernizer in the comments - we could first add in the vendor prefixes for the background animations to get more browser coverage. like :
#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中对此进行直接检查可能
A blunt check for this in javascript might be
/* 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可以定制:
Our Css can then be tailored :
.cssanimation #animationdiv {
animation: animatedBackground ...
我们可以在这里进行实时游戏 - http://jsbin.com/yamepucu/1/edit
不确定有多少可以帮助你们已经知道的东西,希望某些部分确实。
Not sure how much that helps vrs what you already know , hope some part did.
HTML
<div id="animationdivTest">Testing...</div>
<div id="animationdiv"></div>
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<len; ++i) {
if( el.style[animVendorprefixes[i]] !== undefined ) {
if( el.style['background-image'] !== undefined ) {
does=true; break;
}
}
}
return does;
}
if(hasBgAnimSupport() ) {
document.getElementsByTagName("html")[0].className +=' cssbgAnimation';
}
AFAIK - 这是我们可以检查的最接近和未来的证明方式
AFAIK - this is the closest and future proof way we can check for this
这篇关于测试浏览器是否支持样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!