Il browser memorizza nella cache un'immagine di sfondo CSS se non viene utilizzata?

Question

Quando si dispone di due regole come questo:

.foo { 
    background-image: url(foo.gif); 
} 

.foo { 
    background-image: url(bar.gif); 
} 

e hanno <div class='foo'>Foobar</div>

Sarà la cache del browser sia, o solo quella realtà sempre visualizzato (bar.gif in questo caso)?

È vero in tutte le configurazioni? (le regole sono in file diversi, applicato a uno, ecc.)

Answer 1

Presumo da "cache" qui, intendi "preload". Il "caching" effettivo ha a che fare con la scadenza delle intestazioni e simili.

Si basa interamente sul comportamento del browser e su ciò che sceglie di fare. Tuttavia, la mia esperienza è che i browser moderni non si preoccupano di caricare un'immagine definita in un file CSS a meno che l'immagine non sia effettivamente richiesta.

Questa è una delle ragioni per cui alcuni scelgono di impostare sia lo stato di default e di passaggio del mouse di un elemento in un'immagine, e quindi di utilizzare la proprietà background-position per modificarla, che è visibile. C'è un po 'più di overhead, ma non vi è alcun ritardo tra il passaggio del mouse e lo stato di hover visualizzato, rendendo l'esperienza più fluida.

Answer 2

Il meglio che posso dire (con FireBug), tira solo le immagini che visualizzi, non quelle definite.

Answer 3

se entrambe le regole hanno la stessa specificità, in seguito verrà applicata. leggi di più su specificity qui.

Answer 4

Il browser non carica le immagini quando legge il css, ma le tiene semplicemente a mente. E quando inizia il rendering della pagina inizia a caricare le immagini.

Quindi nel tuo caso hai già la precedenza sulla regola css, e quando il browser esegue il rendering della pagina ignora la tua regola css e naturalmente non carica la tua prima immagine.

Answer 5

Utilizzare tail -f sul mio log di Apache locale, ho trovato la seguente:

::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.html HTTP/1.1" 200 127 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.css HTTP/1.1" 304 - 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /bar.gif HTTP/1.1" 404 205 

utilizzando Firefox, il browser ha tentato solo di caricare "bar.gif" (che è stato 404 non trovato perché io didn' t avere quell'immagine).

Se sei interessato ad altri browser, posso testare anche quelli.