¿Se descargan las imágenes CSS no utilizadas?

127

¿Se descargan o ignoran las imágenes CSS no utilizadas?

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

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

¿O esto dependería del navegador?

css Alex
fuente

20

+1 por pregunta interesante

Jitendra Vyas

89

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

Chrome: no
Firefox: no
Safari: no
IE8: no
IE7: no
IE6: Desconocido (¿Alguien puede probar y comentar?)

Nick Craver
fuente

1

¿Asumo que has probado en Windows? Si desea agregar comparaciones multiplataforma, entonces puedo ofrecer que Firefox 3.6.xy Chrome 5.0.307.11 (Ubuntu 9.10) tampoco lo hacen . =)

David dice que reinstale a Monica el

Ajá ya veo. Pensé que sería bastante pobre para Firefox, Chrome y Safari cargarlos, pero no lo habría pasado de IE. ¿Es este resultado el mismo para IE 6 y 7?

Alex

@Alex - IE7 Sí, ¿aunque podría engañar una página más compleja? IE6 No puedo probar dónde estoy ... tal vez alguien aquí pueda y actualice mi respuesta.

Nick Craver

49

¿Puedo presentar una protesta contra probar algo en IE6?

Dave Markle

2

@Dave: Todo debería probarse en IE6 (los infieles se marcharon), si funciona correctamente allí, y lo hará en todos los malditos navegadores: P

N 1.1

13

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.

Tatu Ulmanen
fuente

9

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).

mauris
fuente

8

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.

David dice reinstalar a Mónica
fuente

3

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).

Ejemplo:

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.

mkoistinen
fuente

2

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

N 1.1
fuente

0

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>

Eentzel
fuente

11

Bueno, eso es porque está referenciado. Así que no estoy seguro de que calificó de "sin usar" es realmente válida ..

NOTME

@eentzel, elimine "no utilizado" del div, vuelva a hacer la prueba y díganos su resultado.

Anse

¿Se descargan las imágenes CSS no utilizadas?

Respuestas:

Ejemplo: