Respuestas:
Esto dependería del navegador, ya que es cómo deciden implementar la especificación, sin embargo, en una prueba rápida aquí:
No, no se descargan, al menos en Firefox, IE8 y Chrome.
Una manera fácil de probar esto:
<!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>
Si test.txtse rellena con el agente de usuario del navegador, la imagen se descarga. Este no fue el caso en ninguna de mis pruebas.
Una prueba rápida lo demostró.
<!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 segunda imagen, tumblr_kxytwr7YzH1qajh4xo1_500.pngfue descargada pero no la otra. Esto se demostró cierto en Chrome (Herramientas para desarrolladores) y Firefox (Firebug).
Firefox y Chrome (Ubuntu 9.10) no descargan imágenes para clases / identificadores que no se aplican en el DOM.
Sin embargo, esto puede depender tanto de la plataforma como del navegador.
A veces, depende exactamente de lo que significa "sin usar". Diferentes navegadores lo definen de manera diferente. Por ejemplo, en Firefox, los estilos aplicados a la <noscript>etiqueta se consideran "no utilizados" y, por lo tanto, las imágenes no se descargarán.
Chrome 26 (posiblemente todos ellos, no estoy seguro), hace imágenes descarga CSS si se aplican al <noscript>elemento, incluso cuando está activado JS. (Sin embargo, no está claro de inmediato por qué, ¿tal vez esto es un error?).
Sin embargo, no descarga imágenes CSS aplicadas a elementos dentro del <noscript>elemento. (Este es el comportamiento esperado, por supuesto).
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>
En este caso, si el usuario tiene JS habilitado, ambos always.png y otherbg.png se descargan en Chrome. Si el usuario no tiene JS habilitado, solo se descarga nojsonly.png en Chrome.
Utilizo esta técnica para medir los niveles de tráfico de usuarios no habilitados para JS, ya que Google Analytics nos falla aquí. Prefiero usar la imagen CSS de fondo en lugar de una <img...>etiqueta normal , porque estoy trabajando bajo la teoría (no probada) de que es menos probable que los bots capturen una imagen CSS que una <img...>imagen, dejando recuentos más precisos para los visitantes humanos.
Curiosamente, sin embargo, Chrome (al menos) descargará unused.png en el siguiente ejemplo:
<!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>