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.
reference: http://www.unc.edu/~pgale/information-technology/blog/4
