Come impedire ai browser di memorizzare nella cache i file CSS?

Question

Quando creo una pagina, link in un file CSS, e la apro in un browser, funziona perfettamente. Ma se si apporta una modifica e si aggiorna nuovamente la pagina tra periodi di tempo molto brevi, la modifica non viene riflessa. Ma dopo qualche tempo, quando aggiorno di nuovo la pagina, appaiono le modifiche.

Quindi, in qualche modo il browser mantiene il file CSS memorizzato nella cache e lo espande dopo un po '. Come rendere la cache del browser senza file CSS o HTML. Sarebbe meglio se riesco a bloccarlo su un dominio particolare.

Sono su Ubuntu, utilizzando Chrome e Firefox, cercando di impedire ai browser di memorizzazione nella cache i file CSS su 'localhost' ... Come fare ...

Grazie ...

Answer 1

Puoi aprire Developer Tools premendo Ctrl+Shift+J e poi troverai un'icona a forma di ingranaggio in basso a destra. Quando fai clic su di esso dovresti vedere un'opzione per disabilitare la memorizzazione nella cache.

Answer 2

Sarebbe utile sapere come è ospitato il sito Web, poiché è possibile configurarlo nella maggior parte dei server Web.

Inoltre, è una buona idea introdurre un meccanismo di busting della cache che modifichi i collegamenti ai file CSS in questione quando si modificano i contenuti dei file CSS. I browser ricaricheranno quindi il file CSS perché l'HTML si riferisce a un URL diverso.

Un buon esempio di una cache busting meccanismo è il Ruby on Rails 3.1 patrimoniale gasdotto che minifies anche i file e li gzip se il browser li supporta:

Rails 3 - Asset Pipeline -- What does it mean to me?

http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/

Answer 3

Qualcosa di semplice come questo dovrebbe funzionare:

<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}"> 

Basta sostituire {CURRENT_TIMESTAMP} ingegno h il timestamp effettivo nel codice lato server. Questo fa sì che il browser pensi che sia un nuovo file a causa della stringa di query e verrà scaricato di nuovo. È anche possibile utilizzare il tempo di modifica effettivo del file (filemtime('/path/to/css/screen.css') se si utilizza PHP) che dovrebbe impedire download non necessari.

Answer 4

L'approccio apparentemente inelegante ma solido come una roccia consiste nel dare un nuovo nome alla risorsa quando il contenuto cambia. Questo risolve il problema per tutti gli utenti, non solo si:

<link rel="stylesheet" src="/css/screen_034.css"> 
<link rel="stylesheet" src="/css/screen_035.css"> 
<link rel="stylesheet" src="/css/screen_036.css"> 

O forse (ma è più di un dolore di cambiare in un IDE, e, a volte causa problemi non imparentati con la cache):

<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034"> 

Nient'altro funziona altrettanto bene negli ambienti di produzione su larga scala, dove milioni di copie di un vecchio file css possono trovarsi in varie cache intermedie o browser. Alcuni client ignorano le intestazioni di controllo della cache e in realtà non si desidera che il caching venga sovvertito, almeno non in produzione.

In fase di sviluppo è possibile premere Ctrl + Maiusc + J (Chrome) e disattivare la memorizzazione nella cache.