Risposte:
Ciò dipende dal browser, poiché è il modo in cui decidono di implementare le specifiche, tuttavia in un rapido test qui:
No, non vengono scaricati, almeno in Firefox, IE8 e Chrome.
Un modo semplice per testare questo:
<!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>Se test.txtviene popolato con l'agente utente del browser, l'immagine viene scaricata. Questo non è stato il caso in nessuno dei miei test.
Un rapido test lo ha dimostrato.
<!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>La seconda immagine, è tumblr_kxytwr7YzH1qajh4xo1_500.pngstata scaricata ma non l'altra. Ciò è stato dimostrato vero in Chrome (strumenti per sviluppatori) e Firefox (Firebug).
Firefox e Chrome (Ubuntu 9.10) non scaricano immagini per classi / ID che non sono applicati nel DOM.
Tuttavia, ciò può dipendere sia dalla piattaforma che dal browser.
A volte, dipende esattamente dal significato di "non utilizzato". Browser diversi lo definiscono in modo diverso. Ad esempio, in Firefox, gli stili applicati a<noscript> tag sono considerati "non utilizzati" e, di conseguenza, le immagini non verranno scaricate.
Chrome 26 (forse tutti, non ne sono sicuro), lo fa immagini scaricare CSS se sono applicati al <noscript>elemento, anche se JS è abilitato. (Non è immediatamente chiaro per me perché, forse questo è un bug?).
Essa non scaricare le immagini CSS applicati agli elementi all'interno della<noscript> elemento, però. (questo è il comportamento previsto, ovviamente).
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 questo caso, se l'utente ha abilitato JS, sia always.png che otherbg.png vengono scaricati in Chrome. In caso contrario ha JS abilitato, solo nojsonly.png viene scaricato in Chrome.
Uso questa tecnica per misurare i livelli di traffico da utenti non abilitati per JS, in quanto Google Analytics non ci riesce. Preferisco usare l'immagine CSS di sfondo piuttosto che un normale <img...>tag, perché sto lavorando secondo la teoria (non testata) secondo cui i robot hanno meno probabilità di catturare un'immagine CSS rispetto a <img...>un'immagine, lasciando conteggi più accurati per i visitatori umani.
È interessante notare che Chrome (almeno) scaricherà unused.png nel seguente esempio:
<!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>