Question

我在SVG文件中编写了一个奇特的加载动画。我的问题是Internet Explorer 10不支持带有<animate>参数的 SVG attributeName标记。由于我喜欢一些挑战，我为我的加载动画设计了SVG 和动画GIF版本。

现在我正在寻找某种CSS3媒体查询（在下面的CSS中查找“???????????”），它将为现代Webkits和Gecko引擎（在桌面和移动设备上）加载回退样式支持原生SVG动画，让GIF回退到不支持CSS3媒体查询的旧浏览器和所有Internet Explorer浏览器，从IE7到IE10。至少我需要它用于Chrome，Safari和Safari移动版（Webkits），拥有它适用于Firefox是一件好事。

HTML来源

<div id="container" class="loadingAnim">
    <div class="loading"><span class="anim"></span></div>
    ...
</div>

适用于所有浏览器的CSS

.loadingAnim > .loading {
    position: absolute;
    z-index: 5;
    width: 100%;
    min-width: 100px;
    height: 100%;
    min-height: 100px;
    text-align: center;
    background-color: white;
    opacity: .85;
}
.loadingAnim .loading .anim {
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    background: white url(loadingAnim.gif) no-repeat center center;
    opacity: .7;
}

CSS仅适用于支持SVG动画的浏览器

@media screen and (??????????? HELP ME HERE ???????????)
    .loadingAnim .loading .anim {
        background-image: url(loadingAnim.svg);
        background-size: 100% 100%;
        opacity: 1;
    }
}

事实上，真正的问题是：“ 我们可以根据CSS媒体查询排除浏览器吗？ ”。

Answer 1

延迟回复，但理想情况下，您应该定位对功能而非浏览器的支持。

Modernizr（http://modernizr.com/docs/#features-html5）能够检测对SVG和SMIL（SVG动画）的支持。它可以为您的html元素添加一个类，让您知道浏览器是否支持SMIL。然后，您可以使用它将SVG样式定位到支持它的浏览器，如果不支持，则提供后备gif。

使用gif作为默认设置动画。

.loadingAnim > .loading {
    position: absolute;
    z-index: 5;
    width: 100%;
    min-width: 100px;
    height: 100%;
    min-height: 100px;
    text-align: center;
    background-color: white;
    opacity: .85;
}

.loadingAnim .loading .anim {
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    background: white url(loadingAnim.gif) no-repeat center center;
    opacity: .7;
}

然后使用modernizr提供的类，如果支持，则使用SMIL添加SVG。

.smil .loadingAnim .loading .anim {
    background-image: url(loadingAnim.svg);
    background-size: 100% 100%;
    opacity: 1;
}

Answer 2

使用媒体查询定位IE10是不可能的。并且媒体查询不是用于解决特殊浏览器构建的问题但你可以 - 虽然我建议找到一个完整的其他解决方案 - 可能会在<html>中添加一个特殊类来定位IE10，然后在样式表中找到.ie10 {}个特定规则，如此处所述按用户
How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

SVG动画：使用CSS3媒体查询将IE10与其他现代浏览器隔离

2 个答案: