For those of you who publish websites that utilize cascading stylesheets (*.css) and/or JavaScript (*.js), you may have run into this problem: You enhance your site by changing the HTML, the corresponding stylesheet(s) and the corresponding JavaScript file(s), and then publish all of the updates to your server. Two minutes later, you get a complaint from a user that the site is broken (or worse, the user just goes away disgruntled). The problem turns out to be that the user’s web browser has cashed the stylesheets and JavaScript files. So, it’s trying to apply old versions of those files to the new versions of the HTML, which is obviously not what you intended.
It turns out that there is an elegant solution to this problem — a simple way to force the web browser to load fresh copies of the stylesheets, JavaScript, or any other related files associated with the HTML when the HTML changes.
The Magic Trick: Take a look at where your HTML specifies any cascading style sheet or JavaScript files to be used. It probably looks something like the following. (In the case of a PHP system, you’ll probably find this code in a common “include file.” The include file may have a name like “header.php” or “header.inc”.)
<link rel="StyleSheet" type="text/css" href="/sheet1.css"> <script src="/script1.js" type="text/javascript"></script>
Where “sheet1″ and “script1″ could be anything. As you can see, the stylesheet files are referenced using the HREF attribute of a LINK tag, while the JavaScript file names are referenced using the SRC attribute of a SCRIPT tag. The trick entails modifying those HREF and SRC attributes, adding something like “?v=12345″ (where the “v” stands for “version”) after the filename, like this:
<link rel="StyleSheet" type="text/css" href="/sheet1.css?v=9"> <script src="/script1.js?v=9" type="text/javascript"></script>
Every time you want to force a reload of a stylesheet or Javascript file, change any references to it by bumping that version number:
<link rel="StyleSheet" type="text/css" href="/sheet1.css?v=10"> <script src="/script1.js?v=10" type="text/javascript"></script>
Both the letter “v” the number “10” are completely arbitrary. They could be any letters and numbers. Changing it from “?v=9″ to “?favoritefruit=banana” would have the same effect. The important thing is that it changes.
Why It Works:
Don’t go looking for any code anywhere that process is such a “v” number. You won’t find it. What we are doing here is playing a trick on the browser. Normally, you find such question mark arguments associated with HTML pages (e.g. “/index.html?user=smith”). It makes the pages dynamic. The browser knows that “/index.html?user=smith” and “/index.html?user=jones” are essentially two completely different pages, even though they both have index.html at the root. It cannot serve a cached result of one for the other. Well, all browsers use the same mechanism that caches HTML pages to cache the stylesheets and JavaScript files. So adding question mark arguments to those references fools the browser into thinking that they are completely different files. On the server-side, those question mark arguments are ignored by the web server. It simply serves back what it has as the current version of the stylesheet or script file.
Even Easier in PHP
For a PHP system, it’s easy to define such a “revision” number in a central location, and reference it programmatically. That way when you bump it in the one central location, it automatically changes all the references. It look something like this:
<?php $version="10" ?> ... <link rel="StyleSheet" type="text/css" href="/sheet1.css?v=<?=$version?>"> <script src="/script1.js?v=<?=$version?>" type="text/javascript"></script>
Where Credit is Due: I cannot claim credit for this idea. Unfortunately, neither can I recall where I first heard of it. The least I can do is point out this writeup by Stefan Hayden, from early last year: (stefanhayden.com/blog/2006/04/03/css-caching-hack
Related articles: