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?
Réponses:
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:
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.
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).
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.
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).
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.
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>