As imagens CSS não utilizadas são baixadas?

127

As imagens CSS não utilizadas são baixadas pelo navegador ou ignoradas?

Por exemplo. nas regras CSS que não correspondem a nenhum elemento.

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

Ou isso depende do navegador?

css Alex
fonte

20

+1 para uma pergunta interessante #

Jitendra Vyas

89

Isso depende do navegador, pois é assim que eles decidem implementar as especificações, porém em um teste rápido aqui:

Chrome: não
FireFox: Não
Safari: não
IE8: Não
IE7: Não
IE6: Desconhecido (alguém pode testar e comentar?)

Nick Craver
fonte

1

Estou assumindo que você testou no Windows? Se você quiser adicionar comparações entre plataformas, posso oferecer que o Firefox 3.6.xe o Chrome 5.0.307.11 (Ubuntu 9.10) também não . =)

David diz que restabelece Monica

Aha eu vejo. Eu pensei que seria muito ruim para o firefox, chrome e safari carregá-los, mas eu não teria colocado o IE no passado. Esse resultado é o mesmo para o IE 6 e 7?

21710 Alex

@Alex - IE7 Sim, embora uma página mais complexa possa enganá-lo? IE6 Não posso testar onde estou ... talvez alguém aqui possa e atualize minha resposta.

Nick Craver

49

Posso registrar um protesto contra o teste de algo no IE6?

Dave Markle

2

@ Dave: Tudo deve ser testado no IE6 (o infiel partiu), se ele for executado corretamente lá, e será em todos os malditos navegadores: P

N 1.1

13

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.

Tatu Ulmanen
fonte

9

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

mauris
fonte

8

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.

David diz para restabelecer Monica
fonte

3

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

Exemplo:

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.

mkoistinen
fonte

2

Quase todos os navegadores fazem carregamento lento. Se uma imagem não for necessária, ela não será baixada. Use o firebug (complemento no Firefox / Chrome) para ver o tempo de carregamento dos recursos.

N 1.1
fonte

0

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>

eentzel
fonte

11

Bem, isso é porque é referenciado. Então eu não estou chamando-se de "não utilizado" é realmente válido ..

NotMe

@eentzel, remova "não utilizado" da div, refaça o teste e conte-nos o seu resultado.

Anse

As imagens CSS não utilizadas são baixadas?

Respostas:

Exemplo: