So you update the CSS and javascript for your website frequently, but most of your website visitors are reporting not seeing your latest style changes?  Is this a caching issue in their browser?  Can I force client browsers to pull the latest version of CSS or javascript files when I update them?

The answer is yes, this is probably a caching issue, but it is easily resolved.  When you reference you CSS or other files like javascript for instance in your html like so:

<link rel="stylesheet" type="text/css" href="lightbox.css" media="all" />

…a web browser accessing the webpage normally caches a copy of the file so subsequent visits to the page does not require the browser to download the file again unnecessarily.  This can be a good thing most of the time since you want to keep bandwidth usage to a minimum.  If the CSS hasn’t changed since the website visitor last viewed the page then there is no reason to force the browser to download the same file content over and over.

Forcing a refresh

But how do you tell a web browser to grab a new version of the CSS script after you make an update to it?  Yes you could rename the CSS file each time you update it, but that is silly.  Not only would you need to ensure you update all of the references to the script in your html, but it just isn’t necessary.  Simply add a querystring element to the file name in the html reference like so:

<link rel="stylesheet" type="text/css" href="lightbox.css?v=2" media="all" />

Here I added a ‘?v=2’ string to the end of the file name but it can be a datestamp or whatever you want basically.  This is the equivalent to changing the the file name, without the need to change the physical file name. The web browser just interprets it as this script (the lightbox.css in this case) as needing to process the v=2 you are passing through the querystring.  Since your CSS isn’t actually doing anything with the query values the script doesn’t care if the querystring is present.  The only thing that matters is the browser thinks something is different.

So for instance, each time you update a .css or .js script you could change the querystring to increment like v=3, v=4, etc.  This also allows you to update the scripts you have on your production website and see the changes (by performing a shift+reload on your browser) while silently keeping the changes from showing up for your other visitors until you change or add the querystring value; since most browsers will cache the CSS file your site visitors would not notice the change unless until you update the querystring.

Additional usage

There you go.  Now you know how to force client browsers to download the latest versions of your included scripts when you make an update.  Some Content Management Systems allow inline editing of CSS (such as the Joomla CMS).  This would allow you to build a function into the CMS that appends the latest date stamp of the CSS script to a querystring referencing the CSS file in your site template.  This may not be something you would want in all cases, but it would be a case for dynamically updating your site html for your site vistors when you make an update to the CSS.