Respostas:
Isso depende do navegador, pois é assim que eles decidem implementar as especificações, porém em um teste rápido aqui:
Não, eles não são baixados, pelo menos no Firefox, IE8 e Chrome.
Uma maneira fácil de testar isso:
<!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.txtfor preenchido com o agente do usuário do navegador, a imagem será baixada. Este não foi o caso em nenhum dos meus testes.
Um teste rápido provou isso.
<!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>A segunda imagem,, tumblr_kxytwr7YzH1qajh4xo1_500.pngfoi baixada, mas não a outra. Isso foi comprovado no Chrome (ferramentas do desenvolvedor) e no Firefox (Firebug).
O Firefox e o Chrome (Ubuntu 9.10) não baixam imagens para classes / IDs que não são aplicados no DOM.
Porém, isso pode depender da plataforma e do navegador.
Às vezes, depende exatamente do que significa "não utilizado". Navegadores diferentes definem de maneira diferente. Por exemplo, no Firefox, os estilos aplicados à <noscript>tag são considerados "não utilizados" e, portanto, nenhuma imagem será baixada.
O Chrome 26 (possivelmente todos eles, sem certeza) faz o download de imagens CSS se forem aplicadas ao <noscript>elemento, mesmo quando o JS estiver ativado. (Não está claro imediatamente para mim porque, talvez, isso seja um bug?).
Ele não transferir imagens CSS aplicado a elementos dentro do <noscript>elemento, no entanto. (esse é o comportamento esperado, é claro).
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>Nesse caso, se o usuário tiver ativado o JS, os arquivos always.png e otherbg.png serão baixados no Chrome. Se o usuário não tiver o JS ativado, apenas o nojsonly.png será baixado no Chrome.
Eu uso essa técnica para medir os níveis de tráfego de usuários não habilitados para JS, pois o Google Analytics falha aqui. Prefiro usar a imagem CSS de plano de fundo em vez de uma <img...>tag normal , porque estou trabalhando com a teoria (não testada) de que os robôs têm menos probabilidade de capturar uma imagem CSS do que uma <img...>imagem, deixando contagens mais precisas para os visitantes humanos.
Curiosamente, porém, o Chrome (pelo menos) fará o download do unused.png no seguinte exemplo:
<!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>