我正在玩CSS
动画SVG
元素,并遇到的问题,即使所有技术,使用,一些浏览器支持组合不是,即CSS
动画DIV
s工作,但SVG
元素不。我想知道是否有办法检测浏览器是否能够使用SVG
动画CSS
元素。
Here is a jsFiddle举了一个例子。它适用于最新版本的Chrome,Firefox和Safari。但是用例如打开它时Firefox 5只有div
旋转而rect
没有。
您可以添加一个事件监听器来检查动画迭代的完成情况,并在相应的事件处理程序中设置一个像supportsSVGKeyFramedAnimatedProps = true
这样的标志(如果迭代从未完成,那么它不是动画)。
elem.addEventListener('animationiteration', eventHandler, false)
这将允许您“向前”到您的SVG动画,而不是提供后备。
我想知道是否有办法检测浏览器是否能够使用CSS动画SVG元素
简单回答:是的,你可以按照@jhpratt的说法。
您可以检测浏览器是否仅支持CSS的CSS功能。 @supports
CSS at-rule允许您指定依赖于浏览器对一个或多个特定CSS功能的支持的声明。这称为特征查询。
例:
@supports (display: flex) {
div {
display: flex;
}
}
@supports not (display: flex) {
div {
float: right;
}
}
MDN链接:https://developer.mozilla.org/de/docs/Web/CSS/@supports
答案很长:
你将永远有一些cross-browser
问题。您遇到的问题是困扰每个Web开发人员。仍然有办法解决这个浏览器支持问题:
1.您可以检查“我可以使用”兼容性:
链接:http://caniuse.com/建议查找任何有问题的功能,如动画。
2.在工作流程中使用自动修复器:
在autoprefixer的帮助下,你不必担心大部分时间都会使用带有-moz-,-webkit-等前缀的CSS。这个小帮手可以帮到你,你甚至可以告诉一些autoprefixers您想要支持哪些浏览器。
3.用户第三方 - 聚会图书馆:
有许多库可用于检测浏览器和版本。如果您想确保您的动画可以安全使用,您可以简单地使用库中提供的动画,当然也可以在各自的网站上查看兼容性。
一些大牌:
还有更多,只需搜索万维网。
4.使用CSS Hacks检测特定的浏览器:
可以使用所谓的CSS-Hacks。它们是特定的CSS调用,仅适用于某些浏览器。
一些例子:
Internet Explorer/Edge 8 only: @media \0screen {}
firefox ≥ 3.6 only: @media screen and (-moz-images-in-menus:0) {}
Opera ≤ 9.27 AND Safari 2: html:first-child .selector {}
你可以在这里查找更多Browserhacks:http://browserhacks.com/
结论:
可以检测特定的浏览器,但是不可能检测brwoser是否仅使用CSS支持给定的功能。这就是为什么在浏览器支持下你总会遇到困难的原因。
希望这可以帮助。问候
我相信现代化的SMIL动画检测应该这样做。 https://modernizr.com/download?smil-setclasses
我在一组相当复杂的css / SVG图表动画中使用它。只需在以下标记中包含一个后备:
.no-smil{ }
我还没有完全找到你正在寻找的东西,但是类似的东西(提供了一个动画的剪辑路径,当浏览器支持它时由SVG定义,而当它没有时则返回)。您可以使用查找像素比率的媒体查询来确定broswer是moz还是webkit,并在媒体查询之外提供回退动画,并在媒体查询中提供首选动画,以指示将支持它的浏览器。
//fallback animation here
@media (-webkit-min-device-pixel-ratio: 0) {
// webkit animation here
}
至于旧版本的Firefox?我不知道如何在CSS中做到这一点,但我不确定回过头几个版本的Firefox或Chrome是一个常见的用例。