CSS 'Fallback Images'

Question

So if you have code like this:

background: url('image.png');
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Your browser will use the gradient if it is webkit, but if it isn't, it will fallback and use the image. If you are using webkit, the image will just not even be downloaded. So if you had:

background: url('image1.png');
background: url('image2.png');

Would 'image1' be downloaded at all or do the same rules as the 'fallback' image apply?

Answer 1

Chrome (tested on v9.x) will only download the second image. See Developer Tools on this sample page

Answer 2

The same rules apply - what's happening (crudely) is that webkit reads the second rule, recognises it replaces the first and does so, and then much later actually does something with them when they're used, but it's just a value until then. For non-webkit browsers the second rule looks like garbage so they skip it which leaves the first rule still there, which is why it effectively works as a fallback (even though fall forward would be more correct).

This is not the same for all browsers - although all will apply only one rule IIRC IE6< used the first rule and there were some old school hacks around that "feature".