title: How to force browsers to reload cached CSS and JS files?
body: <p>I have noticed that some browsers (in particular, Firefox and <a href="https://en.wikipedia.org/wiki/Opera_%28web_browser%29" rel="noreferrer">Opera</a>) are very zealous in using cached copies of <strong>.css</strong> and <strong>.js</strong> files, even between browser sessions. This leads to a problem when you update one of these files, but the user's browser keeps on using the cached copy.</p>
  <p>What is the most elegant way of forcing the user's browser to reload the file when it has changed?</p>
  <p>Ideally, the solution would not force the browser to reload the file on every visit to the page.</p>
  <hr/>
  <p>I have found <a href="https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-and-javascript-files/118921#118921">John Millikin's</a> and <a href="https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-and-javascript-files/118901#118901">da5id's</a> suggestion to be useful. It turns out there is a term for this: <strong>auto-versioning</strong>.</p>
  <p>I have posted a new answer below which is a combination of my original solution and John's suggestion.</p>
  <p>Another idea that was suggested by <strong>SCdF</strong> would be to append a bogus query string to the file. (Some Python code, to automatically use the timestamp as a bogus query string, was <a href="https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-and-javascript-files/121143#121143">submitted by <em>pi.</em></a>.)</p>
  <p>However, there is some discussion as to whether or not the browser would cache a file with a query string. (Remember, we want the browser to cache the file and use it on future visits. We only want it to fetch the file again when it has changed.)</p>