2

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

现在我正在寻找某种 CSS3 媒体查询（???????????在下面的 CSS 中查找“”），它将加载支持原生 SVG 动画的现代 Webkit 和 Gecko 引擎（在桌面和移动设备上）的后备样式，离开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 媒体查询排除浏览器吗？ ”。

4

2 回答 2

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;
}
于 2013-06-24T10:05:05.740 回答
0

无法使用媒体查询来定位 IE10。媒体查询不是为了解决特殊浏览器构建的问题。
但是你可以 - 尽管我建议找到一个完整的其他解决方案 - 可能会去添加一个特殊的类来定位 IE10，然后在你的样式表中<html>去寻找.ie10 {}特定的规则，正如用户在这里描述的
那样我如何只定位 Internet Explorer 10对于某些情况，例如特定于 Internet Explorer 的 CSS 或特定于 Internet Explorer 的 JavaScript 代码？

于 2013-05-11T04:04:33.800 回答