CSS «Резервные Изображения»

Question

Так что если у вас есть такой код:

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

Ваш браузер будет использовать градиент, если он WebKit, но если это не так, он будет FALLBACK и использовать изображение. Если вы используете webkit, изображение просто не будет загружено. Так что, если у вас:

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

бы «image1» быть загружены все или делать одни и те же правила, как «запасной» изображения применяются?

Answer 1

Chrome (проверено на v9.x) загружает только второе изображение. См. Инструменты разработчика на этом sample page

Answer 2

Те же правила применяются - то, что происходит (грубо), заключается в том, что webkit читает второе правило, признает, что оно заменяет первое и делает это, а затем намного позже фактически что-то делает с ними, когда они но это только значение до тех пор. Для браузеров, не являющихся веб-сайтами, второе правило выглядит как мусор, поэтому они пропускают его, что оставляет первое правило все еще там, поэтому он эффективно работает как резерв (даже если падение вперед будет более правильным).

Это не то же самое для всех браузеров - хотя все будет применяться только к одному правилу. IIRC IE6 < использовал первое правило, и вокруг этой «функции» были некоторые старые школьные хаки.