Do you wanna know my biggest enemy as a web developer? It’s not browser inconsistencies, nor is it stubborn designers. No, my biggest and most annoying enemy is a simple one – browser caching! While this is a good feature for the end-user that enables pages to load a lot faster by saving some information on the user’s hard drive, it drives me nuts when I’m updating a page. My carefully reworked style sheet just won’t load until after the user has reloaded the page and emptied their cache!
However, there is a solution to this problem that has other advantages as well, and I’m going to tell you all about it!
When I’m working on a project, I usually use Firefox and the Web Developer toolbar extension. It has many advantages and one of them is the ability to easily turn off Firefox caching. This is gold when you’re doing front-end design! (And I also hear it’s now available for Google Chrome!).
Anyway, let’s say your job is to update a site with a new font and some new styling. You download the CSS, make the changes and upload the file again. And what happens? The client calls a few days later and claims they can’t view the changes made! Telling them to reload the page to clear the cache will do no good since the harm is, in a way, already done! How can we prevent this?
Well, let me introduce you to our simple friend – query strings! While they are normally only used with a server language, like PHP or ASP.NET, (or, in some cases, with JavasScript) they can be utilized when calling CSS style sheets and JavaScript files! Just use a line like this:
<link rel="stylesheet" href="http://www.yoursite.com/css/layout.css?v=1" />
This will do no actual effect on the style sheet, or the way it is referenced. You can use this for your first release of your project and the v=1 part tells you, or anyone else picking up the project, that the CSS is on its first version.
HOWEVER! Let’s say you want to update that file. Download it, make the necessary changes, then upload it and change the calling so it looks like this:
<link rel="stylesheet" href="http://www.yoursite.com/css/layout.css?v=2" />
The browser will interpret this as a second CSS file, completely separate from the first one, and thus it will not use the one that is cached! This is great stuff! Of course, the browser will then continue to cache the file as usual, which is all fine and good.
This also has the advantage of telling the developer, whether it be you or anyone else, how many changes has been made to the CSS since the site was first released.
No more angry clients calling back telling me they can’t view the changes! So simple, yet so powerful!