Werden nicht verwendete CSS-Bilder heruntergeladen?

127

Werden nicht verwendete CSS-Bilder vom Browser heruntergeladen oder ignoriert?

Z.B. in CSS-Regeln, die keinen Elementen entsprechen.

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

Oder wäre dies browserabhängig?

css Alex
quelle
20
+1 für interessante Frage
Jitendra Vyas

Antworten:

89

Dies wäre browserabhängig, da sie sich so für die Implementierung der Spezifikation entscheiden, jedoch in einem kurzen Test hier:

  • Chrome: Nicht
  • FireFox: Nicht
  • Safari: Nicht
  • IE8: Nicht
  • IE7: Nicht
  • IE6: Unbekannt (Kann jemand testen und kommentieren?)
Nick Craver
quelle
1
Ich gehe davon aus, dass Sie unter Windows getestet haben? Wenn Sie plattformübergreifende Vergleiche hinzufügen möchten, kann ich anbieten, dass Firefox 3.6.x und Chrome 5.0.307.11 (Ubuntu 9.10) dies ebenfalls nicht tun . =)
David sagt, Monica am
Aha, ich verstehe. Ich dachte, es wäre ziemlich schlecht für Firefox, Chrome und Safari, sie zu laden, aber ich hätte es nicht hinter IE gebracht. Ist dieses Ergebnis für IE 6 und 7 dasselbe?
Alex
@Alex - IE7 Ja, obwohl eine komplexere Seite es austricksen könnte? IE6 Ich kann nicht testen, wo ich bin ... vielleicht kann jemand hier meine Antwort aktualisieren.
Nick Craver
49
Kann ich gegen das Testen von IE6 protestieren?
Dave Markle
2
@ Dave: Alles sollte in IE6 getestet werden (der Untreue ist abgereist), wenn es dort korrekt läuft, und es wird in jedem gottverdammten Browser: P
N 1.1
13

Nein, sie werden nicht heruntergeladen, zumindest nicht in Firefox, IE8 und Chrome.

Ein einfacher Weg, dies zu testen:

<!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>

Wenn test.txtder Benutzeragent des Browsers vorhanden ist, wird das Bild heruntergeladen. Dies war bei keinem meiner Tests der Fall.

Tatu Ulmanen
quelle
9

Ein schneller Test hat es bewiesen. 

<!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>

Das 2. Bild tumblr_kxytwr7YzH1qajh4xo1_500.pngwurde heruntergeladen, das andere jedoch nicht. Dies wurde in Chrome (Entwicklertools) und Firefox (Firebug) nachgewiesen.

Mauris
quelle
8

Firefox und Chrome (Ubuntu 9.10) laden keine Bilder für Klassen / IDs herunter, die nicht im DOM angewendet werden.

Dies kann jedoch sowohl plattform- als auch browserabhängig sein.

David sagt, Monica wieder einsetzen
quelle
3

Manchmal kommt es genau darauf an, was "unbenutzt" bedeutet. Verschiedene Browser definieren es unterschiedlich. In Firefox werden beispielsweise auf das <noscript>Tag angewendete Stile als "nicht verwendet" betrachtet, sodass keine Bilder heruntergeladen werden.

Chrome 26 (möglicherweise alle von ihnen, nicht sicher), macht herunterladen CSS Bilder , wenn sie auf die angewendet werden<noscript> Element, auch wenn JS aktiviert ist. (Mir ist nicht sofort klar, warum, vielleicht ist das ein Fehler?).

Es werden jedoch keine CSS-Bilder heruntergeladen, die auf Elemente innerhalb des <noscript>Elements angewendet werden . (Dies ist natürlich erwartetes Verhalten).

Beispiel:

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>

In diesem Fall werden, wenn der Benutzer JS aktiviert hat, sowohl always.png als auch otherbg.png in Chrome heruntergeladen. Wenn der Benutzer nicht nicht haben JS aktiviert ist , dann nur nojsonly.png wird in Chrome heruntergeladen.

Ich verwende diese Technik zum Messen des Verkehrsaufkommens von nicht JS-fähigen Nutzern, da Google Analytics uns hier nicht unterstützt. Ich bevorzuge die Verwendung des CSS-Hintergrundbilds anstelle eines normalen <img...>Tags, da ich nach der (ungetesteten) Theorie arbeite, dass Bots weniger wahrscheinlich ein CSS-Bild als ein <img...>Bild erfassen und den menschlichen Besuchern genauere Zählungen hinterlassen.

mkoistinen
quelle
2

Fast alle Browser laden faul. Wenn ein Bild nicht benötigt wird, wird es nicht heruntergeladen. Verwenden Sie Firebug (Add-On in Firefox / Chrome), um die Ladezeit für Ressourcen anzuzeigen.

N 1.1
quelle
0

Interessanterweise lädt Chrome (zumindest) im folgenden Beispiel unused.png herunter:

<!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>
eentzel
quelle
11
Nun, das liegt daran, dass darauf verwiesen wird. Ich bin mir also nicht sicher, ob es wirklich gültig ist, es "unbenutzt" zu nennen.
NotMe
@eentzel, bitte entfernen Sie "unbenutzte" aus dem div, wiederholen Sie den Test und teilen Sie uns Ihr Ergebnis mit.
Anse