Переопределение стилей фонового изображения CSS - загружаются оба изображения?

Если у меня есть 2 стиля CSS, которые назначают фоновое изображение элементу, а один стиль переопределяет другой. Будут ли оба изображения загружены браузером или просто отменены?

Я думаю, что я спрашиваю, недавно я присутствовал на семинаре по условным таблицам стилей для мобильных устройств. Если я переопределяю свои обычные изображения bg с меньшими, чтобы сохранить пропускную способность, будут ли загружены более крупные изображения? Казалось, это то, о чем говорил этот парень, но мне кажется странным, что так будет работать.

Ответ 1

Кажется, в некоторых случаях ответ да:

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

Ответ 2

Ответ НЕТ. Первый, который был переопределен, не будет загружать свойство фона. Зачем? Поскольку браузер загружает ваш файл css перед загрузкой любых других ресурсов. Сначала они обрабатывают файлы css, а затем загружают изображения на основе порядка и порядка переопределения.

Например:

div {
    border: solid 1px #000000;
    background: url('images/sprites.png') no-repeat x y;
}

.mobile div {
    border: solid 1px #000000;
    background: url('images/sprites_mobile.png') no-repeat x y;
}

Браузеры будут обрабатывать этот css для вашего мобильного телефона, чтобы он выглядел следующим образом:

div {
    border: solid 1px #000000;
    background: url('images/sprites_mobile.png') no-repeat x y;
}

И теперь браузеры уже игнорировали sprites_mobile.png для загрузки.

Ответ 3

Переопределенное изображение не будет загружено.

Просто, чтобы быть ясным, например: http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div>

div {
    background: url(http://dummyimage.com/600x400/000/fff)
}
#test {
    background: url(http://dummyimage.com/200);
    width: 200px;
    height: 200px
}

Загружается только http://dummyimage.com/200.

Это верно, по крайней мере, в Chrome, Safari, Firefox, IE8/9, Opera.

Я бы предположил, что это верно во всех браузерах, потому что это простая и эффективная оптимизация.

Ответ 4

Не можете ли вы провести эксперимент и просмотреть файлы веб-журнала, чтобы узнать, что происходит?

В противном случае, почему бы не иметь немного PHP для выбора соответствующих таблиц стилей в зависимости от устройства.