Czy pobrano nieużywane obrazy CSS?

Czy nieużywane obrazy CSS są pobierane przez przeglądarkę lub ignorowane?

Na przykład. w regułach CSS, które nie pasują do żadnych elementów.

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

A może zależy to od przeglądarki?

Byłoby to zależne od przeglądarki, ponieważ decydują się na wdrożenie specyfikacji, jednak w krótkim teście tutaj:

• Chrome: nie
• FireFox: nie
• Safari: nie
• IE8: nie
• IE7: nie
• IE6: nieznany (czy ktoś może przetestować i skomentować?)

Nie, nie są one pobierane, przynajmniej w przeglądarkach Firefox, IE8 i Chrome.

Prosty sposób na sprawdzenie tego:

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

Jeśli test.txtjest wypełniony agentem użytkownika przeglądarki, obraz jest pobierany. Nie miało to miejsca w żadnym z moich testów.

Szybki test to udowodnił.

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

Drugi obraz tumblr_kxytwr7YzH1qajh4xo1_500.pngzostał pobrany, ale drugi nie. Udowodniono to w Chrome (narzędzia programistyczne) i Firefox (Firebug).

Firefox i Chrome (Ubuntu 9.10) nie pobierają obrazów klas / identyfikatorów, które nie są stosowane w DOM.

Może to jednak zależeć zarówno od platformy, jak i przeglądarki.

Czasami zależy tylko, co dokładnie oznacza „nieużywane”. Różne przeglądarki definiują to inaczej. Na przykład w przeglądarce Firefox style zastosowane do <noscript>tagu są uważane za „nieużywane”, a zatem żadne obrazy nie zostaną pobrane.

Chrome 26 (ewentualnie ich wszystkich, nie jestem pewien), robi zdjęcia do pobrania CSS, jeżeli są one stosowane do <noscript>elementu, nawet gdy JS jest włączony. (Nie jest dla mnie od razu jasne, dlaczego, może to jest błąd?).

To nie pobrać obrazy CSS stosowany do elementów w całym tym <noscript>elementem, choć. (jest to oczywiście oczekiwane zachowanie).

Przykład:

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>

W tym przypadku, jeśli użytkownik ma włączoną obsługę JS, zarówno always.png , jak i otherbg.png są pobierane w przeglądarce Chrome. Jeśli użytkownik nie ma włączonego JS, tylko plik nojsonly.png jest pobierany w przeglądarce Chrome.

Używam tej techniki do pomiaru poziomów ruchu od użytkowników nie obsługujących JS, ponieważ Google Analytics zawodzi nas tutaj. Wolę używać tła obrazu CSS zamiast normalnego <img...>tagu, ponieważ pracuję zgodnie z (nieprzetestowaną) teorią, że boty rzadziej przechwytują obraz CSS niż <img...>obraz, pozostawiając dokładniejsze liczby dla ludzi odwiedzających.

Prawie wszystkie przeglądarki ładują się z opóźnieniem. Jeśli obraz nie jest wymagany, nie jest pobierany. Użyj firebug (dodatek w przeglądarce Firefox / Chrome), aby zobaczyć czas ładowania zasobów.

Co ciekawe, Chrome (przynajmniej) pobierze plik unused.png w poniższym przykładzie:

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