Antworten:
Dies wäre browserabhängig, da sie sich so für die Implementierung der Spezifikation entscheiden, jedoch in einem kurzen Test hier:
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.txt
der Benutzeragent des Browsers vorhanden ist, wird das Bild heruntergeladen. Dies war bei keinem meiner Tests der Fall.
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.png
wurde heruntergeladen, das andere jedoch nicht. Dies wurde in Chrome (Entwicklertools) und Firefox (Firebug) nachgewiesen.
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.
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).
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.
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>