Are unused CSS images downloaded by the browser or ignored?
Eg. in CSS rules which don't match any elements.
.nothingHasThisClass{background:url(hugefile.png);}
Or would this be browser-dependant?
views:
242answers:
6
+5
A:
A quick test proved it.
<!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>
The 2nd image, tumblr_kxytwr7YzH1qajh4xo1_500.png, was downloaded but not the other one. This was proven true in Chrome (Developer tools) and Firefox (Firebug).
thephpdeveloper
2010-03-07 16:17:13
+3
A:
No, they are not downloaded, not at least in Firefox, IE8 and Chrome.
An easy way to test this:
<!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>
If test.txt is populated with the browser's user agent, then the image is downloaded. This was not the case in any of my tests.
Tatu Ulmanen
2010-03-07 16:18:02
+6
A:
Firefox and Chrome (Ubuntu 9.10) don't download images for classes/ids that aren't applied in the DOM.
This may be both platform and browser dependant, though.
David Thomas
2010-03-07 16:18:05
+15
A:
This would be browser dependent, since it's how they decide to implement the spec, however in a quick test here:
- Chrome: Doesn't
- FireFox: Doesn't
- Safari: Doesn't
- IE8: Doesn't
- IE7: Doesn't
- IE6: Unknown (Can someone test and comment?)
Nick Craver
2010-03-07 16:18:09
I'm assuming that you've tested on Windows? If you'd like to add cross-platform comparisons then I can offer that Firefox 3.6.x and Chrome 5.0.307.11 (Ubuntu 9.10) also **don't**. =)
David Thomas
2010-03-07 16:22:06
Aha, I see. I thought it would be quite poor for firefox, chrome and safari to load them, but I wouldn't have put it past IE. Is this result the same for IE 6 and 7?
Alex
2010-03-07 16:24:26
@Alex - IE7 Yes, though a more complex page might trick it? IE6 I can't test where I am...maybe someone here can and update my answer.
Nick Craver
2010-03-07 16:27:31
Can I file a protest against testing anything in IE6?
Dave Markle
2010-03-07 16:32:47
@Dave - I'm not sure anyone will test and comment...if so I'll update. Since there's an unspoken requirement of bleaching your eyes after looking at IE6......
Nick Craver
2010-03-07 16:42:55
Sadly, some people just can't let their beloved IE6 go (about 20%).
Alex
2010-03-07 16:51:07
@Dave: Everything should be tested in IE6 (the unFaithful departed) , if it runs correctly there, and it will in every goddamn browser :P
N 1.1
2010-03-07 16:51:26
I thought the funeral was done. Why did the grave again?!
thephpdeveloper
2010-03-07 17:41:41
I don't think anyone wants to test it in IE6 because that would require them *admitting* they still use it.
gnovice
2010-03-07 17:47:09
+2
A:
Almost all browsers do lazy-loading. If an image is not required, it does not download. Use firebug (add-on in Firefox/Chrome) to see load time for resources.
N 1.1
2010-03-07 16:19:07
+1
A:
Interestingly, though, Chrome (at least) will download unused.png in the following example:
<!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
2010-06-14 22:51:04
Well, that's because it's referenced. So I'm not sure calling it "unused" is really valid..
Chris Lively
2010-06-14 22:55:40