Databases
StackOverflow2013
Postsdbo
POSVG animation: Isolating IE10 from other modern browsers with CSS3 media queries
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSVG animation: Isolating IE10 from other modern browsers with CSS3 media queries
    text
    copied!<p>I've coded a fancy loading animation in an SVG file. My problem is that Internet Explorer 10 does not support the <strong>SVG</strong> <code>&lt;animate&gt;</code> tags with the <code>attributeName</code> parameter. Since I like some challenge, I've designed both an SVG <strong>and</strong> an animated GIF version for my loading animation.</p> <p>Now I looking for some kind of CSS3 media query (look for the "<code>???????????</code>" within the CSS below) that would load the fallback style for modern Webkits and Gecko engines (on both desktops and mobile devices) that do support the native SVG animations, leaving the GIF fallback to both older browsers that don't support CSS3 media queries and ALL Internet Explorer browsers, from IE7 to IE10. At least I would need it for Chrome, Safari &amp; Safari mobile (Webkits), having it for Firefox is a nice to have.</p> <p><strong>HTML SOURCE</strong></p> <pre><code>&lt;div id="container" class="loadingAnim"&gt; &lt;div class="loading"&gt;&lt;span class="anim"&gt;&lt;/span&gt;&lt;/div&gt; ... &lt;/div&gt; </code></pre> <p><strong>CSS for all browsers</strong></p> <pre><code>.loadingAnim &gt; .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; } </code></pre> <p><strong>CSS only for browsers that support SVG animations</strong></p> <pre><code>@media screen and (??????????? HELP ME HERE ???????????) .loadingAnim .loading .anim { background-image: url(loadingAnim.svg); background-size: 100% 100%; opacity: 1; } } </code></pre> <p>In fact, the real question is: "<strong><em>Can we exclude a browser based on CSS media queries?</em></strong>".</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload