Ответы:
Это будет зависеть от браузера, поскольку именно так они решают реализовать спецификацию, однако в кратком тестировании здесь:
Нет, они не загружаются, по крайней мере, в Firefox, IE8 и Chrome.
Простой способ проверить это:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nonexistent {
background: url('index.php?foo');
}
</style>
</head>
<body>
<?php if(isset($_GET['foo'])) {
file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
</body>
</html>Если test.txtзаполняется пользовательским агентом браузера, изображение загружается. Ни в одном из моих тестов этого не было.
Быстрая проверка это доказала.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"><!--
.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}
--></style>
</head><body>
<div class="hassomething"></div>
</body></html>Было tumblr_kxytwr7YzH1qajh4xo1_500.pngзагружено 2-е изображение , но не другое. Это было доказано в Chrome (инструменты разработчика) и Firefox (Firebug).
Firefox и Chrome (Ubuntu 9.10) не загружают изображения для классов / идентификаторов, которые не применяются в DOM.
Однако это может зависеть как от платформы, так и от браузера.
Иногда это зависит от того, что именно означает «неиспользованный». В разных браузерах это определяется по-разному. Например, в Firefox стили, примененные к <noscript>тегу, считаются «неиспользуемыми» и, следовательно, никакие изображения не загружаются.
Chrome 26 (возможно , все из них, не уверена), делает загрузку CSS изображений , если они применяются к <noscript>элементу, даже если JS включен. (Мне не сразу понятно, почему, возможно, это ошибка?).
Это не скачать CSS изображения применяется к элементам в пределах от <noscript>элемента, хотя. (это, конечно, ожидаемое поведение).
CSS:
noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }HTML:
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>В этом случае, если пользователь имеет JS-включено, как always.png и otherbg.p загружаются в Chrome. Если у пользователя не включен JS, в Chrome загружается только nojsonly.png.
Я использую эту технику для измерения уровней трафика от пользователей, не использующих JS, поскольку Google Analytics здесь нас не подводит. Я предпочитаю использовать фоновое изображение CSS, а не обычный <img...>тег, потому что я работаю в соответствии с (непроверенной) теорией, согласно которой боты с меньшей вероятностью захватят изображение CSS, чем <img...>изображение, оставляя более точные подсчеты для посетителей-людей.
Интересно, однако, что Chrome (по крайней мере) загрузит unused.png в следующем примере:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.unused {
background: url(unused.png) no-repeat;
}
.used {
background: url(used.png);
}
</style>
</head>
<body>
<div class="unused used">
hello world
</div>
</body>
</html>