Question

When you have two rules like this:

.foo {
  background-image: url(foo.gif);
}

.foo {
  background-image: url(bar.gif);
}

and have <div class='foo'>Foobar</div>

Will your browser cache both, or just the one actually getting displayed (bar.gif in this case)?

Is this true in all setups? (the rules being in different files, !important being applied to one, etc)

Answer 1

I assume by “cache” here, you mean “preload”. Actual “caching” has to do with expires headers and the like.

It’s entirely based on the browser’s behavior and what it chooses to do. However, my experience is that modern browsers don’t bother to load an image defined in a CSS file unless the image is actually called for.

This is one reason that some choose to make both the default and hover state of an element into one image, and then use the background-position property to change which is visible. There’s a bit more overhead, but there is also no delay between hover and the hover state being displayed, making for a smoother experience.