Do browsers load CSS-specified resources immediately or as needed?

[Jim Higson]

Say I have a CSS file with the star-html hack:

..some-class
{ background-image:url(foo.png);
}
* html .some-class
{ background-image:url(foo.gif);
}

(yes, I know IE can load transparent PNGs using AlphaImageLoader. Let's
pretend it can't for this example)

The question is, will most current browsers apply the CSS rules, then decide
which images to load, or will any see the background-image rules and
immediately load both images?

If the later then the added bandwidth probably overcomes any advantages of
giving out different images.

 

[Dylan Parry]

As if the love poetry wasn't enough, Jim Higson just had to say:

[Do browsers load CSS-specified resources immediately or as needed?]

...

I asked a similar question some time back, and IIRC the answers were
that Firefox/Opera et al load as needed, but IE seems to load everything
whether it needs it or not.

The question I asked was pertaining to background images for objects
with "display:none;" but I presume that the same will apply here too.

 

[Jim Higson]

As if the love poetry wasn't enough, Jim Higson just had to say:

[Do browsers load CSS-specified resources immediately or as needed?]

...

I asked a similar question some time back, and IIRC the answers were
that Firefox/Opera et al load as needed, but IE seems to load everything
whether it needs it or not.

Ouch! That should really hit performance on IE if it has to load the normal
PNG image *and* the IE compromise GIF image.

 

[Dylan Parry]

As if the love poetry wasn't enough, Jim Higson just had to say:

Ouch! That should really hit performance on IE if it has to load the normal
PNG image *and* the IE compromise GIF image.

Actually, looking at your case again, as the CSS for IE literally
overrides the CSS for other browsers, it /should/ (will?) only load the
GIF image, so shouldn't (won't?) affect performance.

 

[Jim Higson]

As if the love poetry wasn't enough, Jim Higson just had to say:


Actually, looking at your case again, as the CSS for IE literally
overrides the CSS for other browsers, it /should/ (will?) only load the
GIF image, so shouldn't (won't?) affect performance.

But if IE "load everything whether it needs it or not", surely it would
load both, unless there is some kind of inference engine that logically
proves the PNG will never be needed

I suppose the only way to find out for sure would be a packet sniffer
(probably ethereal). Shame I don't have a Windows box to test this out on.

 

[Els]

As if the love poetry wasn't enough, Jim Higson just had to say:


Actually, looking at your case again, as the CSS for IE literally
overrides the CSS for other browsers, it /should/ (will?) only load the
GIF image, so shouldn't (won't?) affect performance.

But if IE "load everything whether it needs it or not", surely it would
load both, unless there is some kind of inference engine that logically
proves the PNG will never be needed

I suppose the only way to find out for sure would be a packet sniffer
(probably ethereal). Shame I don't have a Windows box to test this out on.

If you upload a page with a test case, I don't mind visiting it with
my Windows machine, and you can see in your logs which images are
loaded.
My guess is both though, largely based on the earlier background-image
and display:none issue as mentioned by Dylan.

 

[Jim Higson]

As if the love poetry wasn't enough, Jim Higson just had to say:

Ouch! That should really hit performance on IE if it has to load the
normal PNG image *and* the IE compromise GIF image.

Actually, looking at your case again, as the CSS for IE literally
overrides the CSS for other browsers, it /should/ (will?) only load the
GIF image, so shouldn't (won't?) affect performance.

But if IE "load everything whether it needs it or not", surely it
would load both, unless there is some kind of inference engine that
logically proves the PNG will never be needed

I suppose the only way to find out for sure would be a packet sniffer
(probably ethereal). Shame I don't have a Windows box to test this out
on.

If you upload a page with a test case, I don't mind visiting it with
my Windows machine, and you can see in your logs which images are
loaded.
My guess is both though, largely based on the earlier background-image
and display:none issue as mentioned by Dylan.

Ok, I'll email you when the test page is up, then post the results here
later.