Does browser request images as css is parsed or after rules are formed?

Question

When a browser is parsing css does it load resources as it encounters them or after it has read the css file and constructed a set of valid rules?

Here is some css that uses an image for IE but RGBA background for browsers that support it. I take it that IE will ignore the rgba value and instead load the image while other browsers will never request the image. Is this true?

background:transparent url('../img/content/black-mask.png') repeat top left;
background:rgba(0,0,0,0.7);

Answer 1

Browsers will first always generated a "computed style" as they apply the stylesheet to the document structure. Consequently the background-image: property of your selected boxes will always be empty because the shorthand background: property clears the background-image property because you didn't set anything in the second line - thus abrogating the first.

However even with the computed style, browsers won't necessarily download the image. Try using different images with the :hover psuedo-class and you'll notice a delay as the browser downloads it.

@Andre is correct in that it is largely an implementation detail, but a lot of the behaviour is defined by the CSS specification (such as the computed-style stuff).

I imagine that more browsers might want to improve the browsing experience by pre-emptively downloading resources referenced by stylesheets but you can't count on it (mobile browsers may never do this to consume less data if they're on a cellular network).