Let's say I have my whole sites CSS in 1 css file so it is fairly large, I am wanting to know if a page uses 3 classes with something like below that request 3 images from the server, lets say there is something like 50 of these in the whole css file, does everyone get called/requested from the server or just the 3 that a page needs?
background-image:url(http://localhost/images/btn3.gif);
The browser will load what it needs to display a page. Although I can imagine various browsers could employ certain caching techniques and prefetch everything they see in a CSS file.
There's one easy way to find out (ok, not easier than just asking Stack Overflow). Put this into a CSS file:
#nonExistantElement {
background-image: url(myScript.php);
}
and make that script record the hit by writing to a file or something.
Ok, I've just done that myself now. Turns out: no it doesn't get the file. (Tested on Firefox 3.5.2, IE7, Chrome 2.0)
I don't think so. Images required for hover pseudo-class (mouseover) are loaded when you hover, and there can be a noticeable lag on the first appearence (unless you use a cheat to get it preloaded).
No, a request for the image is made only when the class, or id is present on the page.
If you do want an image that's not visible on page load to "preload", then there are a variety of tricks you can use, such as displaying the image off screen on load. The most common case where "preloading" is necessary is in the case of background images that change on hover, where there would otherwise be an unacceptable lag the first time the user hovers and causes the image to change. The most common solution to this problem is called "CSS Sprites". You combine the default, hover, and (if present) active images into one file, one above the other, and you simply change the background image offset on :hover and :active.