SVG 动画：使用 CSS3 媒体查询将 IE10 与其他现代浏览器隔离开来
Posted
技术标签:
【中文标题】SVG 动画：使用 CSS3 媒体查询将 IE10 与其他现代浏览器隔离开来【英文标题】：SVG animation: Isolating IE10 from other modern browsers with CSS3 media queries 【发布时间】：2013-04-19 15:58:42 【问题描述】：我在 SVG 文件中编写了精美的加载动画。我的问题是 Internet Explorer 10 不支持带有 attributeName 参数的 SVG <animate> 标记。
因为我喜欢挑战，所以我为加载动画设计了 SVG 和 GIF 动画版本。
现在我正在寻找某种 CSS3 媒体查询（在下面的 CSS 中查找“???????????”），它可以加载支持现代 Webkit 和 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 媒体查询排除浏览器？”。
【问题讨论】：
简短的回答是不，你不能通过 CSS 媒体查询阻止浏览器，你也不应该。更长的答案是，如果一个浏览器支持另一个不支持的查询（例如首先添加新查询，或使用前缀等），那么您可以，但这是一个非常糟糕的想法。有一个 IE10 特定的查询在循环，人们会用它来攻击 IE10，但是如果 IE11 或其他版本修复了这个错误，它将破坏那个浏览器。开发人员过去常常使用媒体查询来定位 Opera。它延迟了其他浏览器的实现，因为它们没有相同的错误。后来的 Opera 版本也没有。 【参考方案1】：无法通过媒体查询来定位 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?
【讨论】：
【参考方案2】：回复较晚，但理想情况下，您应该针对功能支持而不是浏览器。
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;
【讨论】：
以上是关于SVG 动画：使用 CSS3 媒体查询将 IE10 与其他现代浏览器隔离开来的主要内容，如果未能解决你的问题，请参考以下文章
带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题
css3 media媒体查询器用法总结 兼容ie8以下的方法