¿Se descargan las imágenes CSS sin usar?

¿Las imágenes CSS no utilizadas son descargadas por el navegador o ignoradas?

P.ej. en las reglas de CSS que no coinciden con ningún elemento.

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

¿O sería esto dependiente del navegador?

Esto dependería del navegador, ya que es la forma en que deciden implementar la especificación, sin embargo, en una prueba rápida aquí:

  • Chrome: no
  • FireFox: no lo hace
  • Safari: no lo hace
  • IE8: no
  • IE7: no lo hace
  • IE6: Desconocido (¿Alguien puede probar y comentar?)

No, no se descargan, al menos en Firefox, IE8 y Chrome.

Una manera fácil de probar esto:

          

Si test.txt se 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ó.

       

La segunda imagen, tumblr_kxytwr7YzH1qajh4xo1_500.png , se descargó pero no la otra. Esto fue comprobado en Chrome (herramientas de desarrollo) y Firefox (Firebug).

Firefox y Chrome (Ubuntu 9.10) no descargan imágenes para clases / ID que no se aplican en el DOM.

Aunque esto puede depender tanto de la plataforma como del navegador.

Casi todos los navegadores hacen cargas perezosas. Si no se requiere una imagen, no se descarga. Use firebug (complemento en Firefox / Chrome) para ver el tiempo de carga de los recursos.

A veces, depende exactamente de lo que significa “sin usar”. Los diferentes navegadores lo definen de manera diferente. Por ejemplo, en Firefox, los estilos aplicados a la etiqueta se consideran “no utilizados” y, por lo tanto, no se descargarán las imágenes.

Chrome 26 (posiblemente todos ellos, no estoy seguro), descarga imágenes CSS si se aplican al elemento , incluso cuando JS está habilitado. (Aunque no tengo claro de inmediato por qué, quizás esto es un error).

Sin embargo, no descarga imágenes CSS aplicadas a elementos dentro del elemento . (este es el comportamiento esperado, por supuesto).

Ejemplo:

CSS:

 noscript { background-image: url('always.png') 0 0 repeat; } noscript p ( background-image: url('nojsonly.png') 0 0 repeat; } 

HTML:

   

En este caso, si el usuario tiene habilitado JS, tanto always.png como otherbg.png se descargan en Chrome. Si el usuario no tiene habilitado JS, solo nojsonly.png se descarga 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 normal, porque estoy trabajando bajo la teoría (no probada) de que los robots son menos propensos a tomar una imagen CSS que una imagen , dejando conteos más precisos para los visitantes humanos.

Curiosamente, sin embargo, Chrome (al menos) descargará unused.png en el siguiente ejemplo:

    test    
hello world