2

If I comment a line ex. /* background: url(images/header_overlay.png) */ on CSS on page load on browser does this image get downloaded? What if I let it as it is and include a second CSS that take priority with a second image background: url(images/header_overlay2.png) During the load time on user browser does this images downloaded both and then the second get priority? I want to be carefully and precise on css to reduce the page load time. I am interested on big pages where I can't get the fully ideal clean css and css overwrite it's necessary.

Arra Alb
  • 154
  • 6

3 Answers3

2

It is useless to have commented code in your css. It is not parsed, therefore the image will not be downloaded, but if you have some code which might be useful later, then write some notes to yourself somewhere and remove the commented code. This reduces file size as well, so it is also a micro optimization.

Also, if you have two conflicting rules referring to two different images, then the one with greater priority will take effect and the other will be ignored, therefore only one image from the conflicting two will be extracted.

You can check what image is downloaded in your browser. For instance, with chrome, click inspect element anywhere and in your console click on the network tab and see what images are downloaded. Make sure you clear your cache before such tests.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
0

CSS don't parse commented lines, it's just a text and no image can be inside.

If you see in your dev tools that header_overlay.png was downloaded, probably is define elsewhere.

pavel
  • 26,538
  • 10
  • 45
  • 61
0

No- anything within comments is not parsed within the scope of CSS, images within comment wrappers will not be downloaded, nor will it impact any other (uncommented) rules- this can be found in the spec

(...)their contents have no influence on the rendering

SW4
  • 69,876
  • 20
  • 132
  • 137
  • what about the second case, where both background are un commented and the render choose the second command to display. in this case are both dowloaded ? – Arra Alb Jan 12 '15 at 11:28
  • If two uncommented rules exist, the one with the greatest specificity will be applied, if they are equal, the second. If a rule isnt applied- see here: http://stackoverflow.com/questions/2396909/are-unused-css-images-downloaded – SW4 Jan 12 '15 at 11:29
  • I know the priority, i am interested if both images are loaded on the browser or not – Arra Alb Jan 12 '15 at 11:34
  • Sure- hence the provided link – SW4 Jan 12 '15 at 11:36