2

SVG ファイルに派手な読み込みアニメーションをコーディングしました。私の問題は、Internet Explorer 10 がパラメータ付きのSVG <animate>タグをサポートしていないことです。attributeName私はチャレンジが好きなので、ローディング アニメーション用に SVGとアニメーション GIF の両方のバージョンをデザインしました。

???????????ここで、ネイティブの SVG アニメーションをサポートする最新の Webkit および Gecko エンジン (デスクトップとモバイル デバイスの両方) のフォールバック スタイルをロードする、ある種の CSS3 メディア クエリ (以下の CSS 内の " " を探します) を探しています。CSS3 メディア クエリをサポートしていない古いブラウザーと、IE7 から IE10 までのすべての Internet Explorer ブラウザーの両方への GIF フォールバック。少なくとも、Chrome、Safari、および Safari モバイル (Webkit) には必要ですが、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;
}

SVG アニメーションをサポートするブラウザー専用の CSS

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

実際、本当の問題は、「CSS メディア クエリに基づいてブラウザを除外できるか」ということです。

4

2 に答える 2

0

メディア クエリで IE10 をターゲットにすることはできません。また、メディア クエリは、特別なブラウザー ビルドの問題を解決するためのものではありません。
しかし、完全な他の解決策を見つけることをお勧めしますが、IE10 をターゲットとする特別なクラスを追加して、スタイルシート<html>で.ie10 {}特定のルールを使用
することもできます。 Internet Explorer 固有の CSS や Internet Explorer 固有の JavaScript コードなどの特定の状況では?

于 2013-05-11T04:04:33.800 に答える