Les images CSS inutilisées sont-elles téléchargées?

127

Les images CSS inutilisées sont-elles téléchargées par le navigateur ou ignorées?

Par exemple. dans les règles CSS qui ne correspondent à aucun élément.

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

Ou cela dépendrait-il du navigateur?

css Alex
la source

20

+1 pour une question intéressante

Jitendra Vyas

89

Cela dépendrait du navigateur, car c'est ainsi qu'ils décident d'implémenter la spécification, mais dans un test rapide ici:

Chrome: pas
FireFox: Non
Safari: pas
IE8: pas
IE7: pas
IE6: Inconnu (quelqu'un peut-il tester et commenter?)

Nick Craver
la source

1

Je suppose que vous avez testé sur Windows? Si vous souhaitez ajouter des comparaisons multiplateformes, je peux proposer que Firefox 3.6.x et Chrome 5.0.307.11 (Ubuntu 9.10) ne le font pas non plus . =)

David dit de réintégrer Monica

Aha je vois. Je pensais que ce serait assez pauvre pour Firefox, Chrome et Safari de les charger, mais je ne l'aurais pas mis au-delà d'IE. Ce résultat est-il le même pour IE 6 et 7?

Alex

@Alex - IE7 Oui, bien qu'une page plus complexe puisse le tromper? IE6 Je ne peux pas tester où je suis ... peut-être que quelqu'un ici peut mettre à jour ma réponse.

Nick Craver

49

Puis-je déposer une réclamation contre tout test dans IE6?

Dave Markle

2

@Dave: Tout devrait être testé dans IE6 (les infidèles sont partis), si cela fonctionne correctement là-bas, et ce sera dans tous les navigateurs: P

N 1.1

13

Non, ils ne sont pas téléchargés, du moins dans Firefox, IE8 et Chrome.

Un moyen simple de tester ceci:

<!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.txtest rempli avec l'agent utilisateur du navigateur, l'image est téléchargée. Ce n'était le cas dans aucun de mes tests.

Tatu Ulmanen
la source

9

Un test rapide l'a prouvé.

<!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 2ème image,, a tumblr_kxytwr7YzH1qajh4xo1_500.pngété téléchargée mais pas l'autre. Cela s'est avéré vrai dans Chrome (outils de développement) et Firefox (Firebug).

Mauris
la source

8

Firefox et Chrome (Ubuntu 9.10) ne téléchargent pas d'images pour les classes / identifiants qui ne sont pas appliqués dans le DOM.

Cela peut cependant dépendre à la fois de la plate - forme et du navigateur.

David dit de réintégrer Monica
la source

3

Parfois, cela dépend exactement de ce que signifie «inutilisé». Différents navigateurs le définissent différemment. Par exemple, dans Firefox, les styles appliqués à la <noscript>balise sont considérés comme "inutilisés" et par conséquent, aucune image ne sera téléchargée.

Chrome 26 (peut - être tous, pas sûr), ne les images télécharger CSS si elles sont appliquées à l' <noscript>élément, même lorsque JS est activé. (Ce n'est pas tout de suite clair pour moi pourquoi cependant, c'est peut-être un bug?).

Cependant, il ne télécharge pas les images CSS appliquées aux éléments de l' <noscript>élément. (c'est un comportement attendu, bien sûr).

Exemple:

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>

Dans ce cas, si l'utilisateur a JS activé, les deux always.png et otherbg.png sont téléchargés dans Chrome. Si l'utilisateur n'a pas activé JS, seul nojsonly.png est téléchargé dans Chrome.

J'utilise cette technique pour mesurer les niveaux de trafic des utilisateurs non compatibles JS, car Google Analytics nous échoue ici. Je préfère utiliser l'image CSS d'arrière-plan plutôt qu'une <img...>balise normale , car je travaille selon la théorie (non testée) selon laquelle les bots sont moins susceptibles de saisir une image CSS qu'une <img...>image, laissant des décomptes plus précis pour les visiteurs humains.

mkoistinen
la source

2

Presque tous les navigateurs effectuent un chargement paresseux. Si une image n'est pas requise, elle ne se télécharge pas. Utilisez Firebug (module complémentaire dans Firefox / Chrome) pour voir le temps de chargement des ressources.

N 1.1
la source

0

Fait intéressant, cependant, Chrome (au moins) téléchargera non utilisé.png dans l'exemple suivant:

<!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
la source

11

Eh bien, c'est parce qu'il est référencé. Donc, je ne suis pas sûr de l'appeler "inutilisé" est vraiment valable ..

NotMe

@eentzel, veuillez supprimer "non utilisé" du div, refaire le test et nous dire votre résultat.

Anse

Les images CSS inutilisées sont-elles téléchargées?

Réponses:

Exemple: