Чи завантажуються невикористані зображення CSS?

127

Чи невикористані зображення CSS завантажуються браузером або ігноруються?

Напр. в правилах CSS, які не відповідають жодним елементам.

.nothingHasThisClass{background:url(hugefile.png);}

Або це залежатиме від браузера?

css

— Олексій
джерело

20

+1 за цікаве запитання

— Jitendra Vyas

89

Це буде залежати від браузера, оскільки саме вони вирішили реалізувати специфікацію, проте у швидкому тесті тут:

Chrome: Ні
FireFox: Ні
Сафарі: Ні
IE8: Ні
IE7: Ні
IE6: Невідомо (Чи може хтось перевірити та прокоментувати?)

— Нік Крейвер
джерело

1

Я припускаю, що ви протестували в Windows? Якщо ви хочете додати порівняння між платформами, то я можу запропонувати, що Firefox 3.6.x і Chrome 5.0.307.11 (Ubuntu 9.10) також цього не роблять . =)

— Девід каже повернути Моніку

Ага, бачу. Я подумав, що завантажувати їх Firefox, хром та сафарі буде дуже погано, але я б не поставив це поза IE. Чи такий результат однаковий для IE 6 та 7?

— Олексій

@Alex - IE7 Так, хоча більш складна сторінка може її обдурити? IE6 Я не можу перевірити, де я ... можливо, хтось тут може і оновити свою відповідь.

— Нік Крейвер

49

Чи можу я подати протест проти тестування чого-небудь в IE6?

— Дейв Маркл

2

@Dave: Все слід перевірити на IE6 (невірний відійшов), якщо він працює там правильно, і це буде в кожному проклятому браузері: P

— N 1.1

13

Ні, вони не завантажуються, принаймні в 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населено агентом користувача браузера, зображення завантажується. Це не було в жодному з моїх тестів.

— Тату Ульманен
джерело

9

Швидкий тест це довів.

<!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>

2-е зображення, tumblr_kxytwr7YzH1qajh4xo1_500.pngбуло завантажено, але не інше. Це було доведено правдою в Chrome (Інструменти для розробників) та Firefox (Firebug).

— маври
джерело

8

Firefox та Chrome (Ubuntu 9.10) не завантажують зображення для класів / ідентифікаторів, які не застосовуються в DOM.

Це може залежати як від платформи, так і від браузера.

— Девід каже повернути Моніку
джерело

3

Іноді, залежить саме те, що означає "невикористаний". Різні браузери визначають це по-різному. Наприклад, у 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...>зображення, залишаючи більш точні підрахунки для відвідувачів.

— mkoistinen
джерело

2

Практично всі браузери роблять ледачий навантаження. Якщо зображення не потрібно, воно не завантажується. Використовуйте firebug (додаток у Firefox / Chrome), щоб побачити час завантаження ресурсів.

— N 1.1
джерело

0

Цікаво, однак, що 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>

— eentzel
джерело

11

Ну, це тому, що на нього посилається. Тож я не впевнений, що називати його "невикористаним" дійсно дійсно ..

— NotMe

@eentzel, будь ласка, видаліть "невикористаний" з div, повторіть тест і повідомте нам свій результат.

— Анс