Il problema è noto: può capitare che, modificando un foglio di stile (magari insieme al codice HTML), rimanga nella cache del browser la vecchia versione.
Stephen Hayden propone un trucchetto per evitare che cià avvenga, Lo sottopongo ai commenti di quelli bravi. Tutto sta nell'aggiungere una variabile alla fine del nome del CSS, così:
<link rel="stylesheet" href="http://sito.com/style.css?version=1" type="text/css" />
Ecco la spiegazione:
What does ?version=1 mean? This is what a URL looks like if itÂ’s passing a GET variable from one page to the next. To the browser it means the page is dynamic and it needs to get a new version because code may have changed. The browser has no way of knowing if the CSS file is actually dynamic or not.The trick is to change the number each time you update the CSS file to make sure the browser always downloads the new code.
When a browser looks to see if it has anything cashed it compares file names. If you have “style.css” in your cashe then it’s not going to download it again. But if the browser compares “style.css?version=1? to what the new HTML is “style.css?version=2? then the browser thinks they are different files and needs to download the new CSS file.
In pratica, basta cambiare il numero di versione ad ogni modifica (che è anche un modo per tenere traccia dei cambiamenti apportati nel corso del tempo).
/https://www.html.it/app/uploads/2024/04/css.png)
/https://www.html.it/app/uploads/2024/01/cssday.png)
/https://www.html.it/app/uploads/2023/10/cssday2024.png)