CODEWITHSUNDEEP
cssimagehtml-parsinghttprequestcss-parsing
daGUY
daGUY

Reputation: 28753

Do browsers request images that have been overwritten in CSS?

Let's say I have CSS that looks like this:

#element {background-image: url("image1.png");}
#element {background-image: url("image2.png");}

Will the browser:

Upvotes: 3

Views: 107

Answers (4)

Ryan McDonough
Ryan McDonough

Reputation: 10012

If you implement a website running this in chrome you can see that the browser parses the CSS first, creates the rules & requests it needs then makes the request.

In CSS rules at the bottom of the CSS override any from the top, so the browser knows to only request images that are the final rules.

Upvotes: 0

andyb
andyb

Reputation: 43823

From some quick testing with Chrome and the Developer Tools:

  • If #element does not exist then neither image is downloaded, since the browser has no matching element to apply the style to
  • If #element exists the usual CSS cascading and specificity rules apply and only image2.png will be downloaded since that rule appears after the image1.png rule.

That said, other browsers may behave differently.

Upvotes: 1

Andy
Andy

Reputation: 14575

It parses the CSS first, and then requests the image, so image1.png would not be downloaded

Upvotes: 3

Vintage
Vintage

Reputation: 238

When you first request a page, your browser sends arequest to the server, as you know. The browser then starts parsing the page.

When it finds a reference to an external resource, it will do yet another request for that resource. So I think that it will still load it.

Upvotes: -1

Related Questions