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

Question

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

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

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

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

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

Answer 1

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

Answer 2

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

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