Czy pobrano nieużywane obrazy CSS?

127

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?

css

— Alex
źródło

20

+1 za interesujące pytanie

— Jitendra Vyas

89

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ć?)

— Nick Craver
źródło

1

Zakładam, że testowałeś w systemie Windows? Jeśli chcesz dodać porównania między platformami, mogę zaoferować, że Firefox 3.6.x i Chrome 5.0.307.11 (Ubuntu 9.10) również nie . =)

— David mówi, że przywróć Monikę

Aha widzę. Myślałem, że ładowanie ich przez Firefox, Chrome i Safari byłoby dość kiepskie, ale nie dałbym tego za IE. Czy ten wynik jest taki sam dla IE 6 i 7?

— Alex

@Alex - IE7 Tak, chociaż bardziej złożona strona może to oszukać? IE6 Nie mogę sprawdzić, gdzie jestem ... może ktoś tutaj może zaktualizować moją odpowiedź.

— Nick Craver

49

Czy mogę złożyć protest przeciwko testowaniu czegokolwiek w IE6?

— Dave Markle

2

@Dave: Wszystko powinno być przetestowane w IE6 (niewierny odszedł), jeśli działa tam poprawnie i będzie w każdej cholernej przeglądarce: P

— N 1.1

13

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.

— Tatu Ulmanen
źródło

9

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).

— Mauris
źródło

8

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.

— David mówi, że przywróć Monikę
źródło

3

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.

— mkoistinen
źródło

2

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.

— N 1.1
źródło

0

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>

— eentzel
źródło

11

To dlatego, że się do niego odwołuje. Więc nie jestem pewien, czy nazwanie tego „nieużywanym” jest naprawdę ważne ..

— NotMe

@eentzel, usuń „nieużywane” z div, powtórz test i podaj nam swój wynik.

— Anse