未使用のCSS画像はダウンロードされますか？

127

未使用のCSS画像はブラウザによってダウンロードされるか、無視されますか？

例えば。どの要素にも一致しないCSSルール。

.nothingHasThisClass{background:url(hugefile.png);}

または、これはブラウザに依存しますか？

css 
— アレックス
ソース
20
興味深い質問の+1
— Jitendra Vyas

回答:

89

これは、仕様を実装することを決定する方法であるため、ブラウザに依存しますが、ここでの簡単なテストでは、

  • Chrome：しない
  • FireFox：しない
  • Safari：しない
  • IE8：しない
  • IE7：しない
  • IE6：不明（誰かがテストしてコメントできますか？）
— ニッククレイバー
ソース
1
私はあなたがWindowsでテストしたと仮定していますか？クロスプラットフォーム比較を追加したい場合は、Firefox 3.6.xとChrome 5.0.307.11（Ubuntu 9.10）もサポートしないことを提供できます。=）
— Davidはモニカを
ああ、なるほど。Firefox、Chrome、Safariでそれらをロードするのは非常に悪いと思いましたが、IEを通過することはなかったでしょう。これはIE 6と7で同じ結果ですか？
— Alex
@Alex-IE7はい、より複雑なページでだまされる可能性はありますか？IE6私はどこにいるかテストできません...多分ここの誰かが私の答えを更新できます。
— Nick Craver
49
IE6でのテストに対する抗議を提出できますか？
— Dave Markle
2
@Dave：それが正しく実行されている場合すべてが、（浮気は出航）IE6でテストしなければならない、そしてそれはすべての田舎者の白人野郎のブラウザになります：P
— N 1.1
13

いいえ、少なくともFirefox、IE8、Chromeではダウンロードされません。

これをテストする簡単な方法：

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
        .nonexistent {
            background: url('index.php?foo');
        }
        </style>
    </head>
    <body>
<?php if(isset($_GET['foo'])) {
    file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
    </body>
</html>

にtest.txtブラウザのユーザーエージェントが入力されている場合、画像がダウンロードされます。これは私のテストのいずれにも当てはまりませんでした。

— タツ・ウルマネン
ソース
9

簡単なテストで証明されました。 

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css"><!--

.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}

--></style>

</head><body>

<div class="hassomething"></div>

</body></html>

2番目のイメージtumblr_kxytwr7YzH1qajh4xo1_500.pngはダウンロードされましたが、他のイメージはダウンロードされていません。これは、Chrome（開発者ツール）とFirefox（Firebug）で真実であることが証明されました。

— モーリス
ソース
3

時々、それはまさに「未使用」が何を意味するかによります。ブラウザによって、定義は異なります。たとえば、Firefoxでは、<noscript>タグに適用されたスタイルは「未使用」と見なされるため、画像はダウンロードされません。

JSが有効になっている場合でも、要素に適用されている場合、Chrome 26（おそらくすべてではないかもしれませんが）が CSS画像をダウンロードします<noscript>。（しかし、なぜそれがバグなのか、すぐにはわかりません）。

ただし、要素内の要素に適用されているCSS画像はダウンロードされません。（もちろん、これは予想される動作です）。<noscript>

例：

CSS：

noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }

HTML：

<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome.  Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>

この場合、ユーザーがJSを有効にすると、 always.pngとotherbg.pngの両方がChromeにダウンロードされます。ユーザーがJSを有効にしていない場合、nojsonly.pngのみがChromeにダウンロードされます。

ここではGoogle Analyticsが失敗するため、JSに対応していないユーザーからのトラフィックレベルを測定するためにこの手法を使用します。<img...>ボットは画像よりもCSS画像を取得する可能性が低く<img...>、人間の訪問者により正確なカウントを残すという（テストされていない）理論の下で作業しているため、私は通常のタグよりも背景のCSS画像を使用することを好みます。

— ムコイスティネン
ソース
2

ほとんどすべてのブラウザが遅延読み込みを行います。画像が不要な場合はダウンロードされません。firebug（Firefox / Chromeのアドオン）を使用して、リソースの読み込み時間を確認します。

— N 1.1
ソース
0

興味深いことに、次の例では、Chromeは（少なくとも）未使用の.pngをダウンロードします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .unused {
                background: url(unused.png) no-repeat;
            }
            .used {
                background: url(used.png);
            }
        </style>
    </head>
    <body>
        <div class="unused used">
            hello world
        </div>
    </body>
</html>
— エンツェル
ソース
11
まあ、それはそれが参照されているためです。私は確かにそれを呼び出していないよので、本当に有効な「未使用」..です
— NotMe
@ eentzel、divから「未使用」を削除し、テストをやり直して結果をお知らせください。
— アンス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.