This seems to have been the week of weird caching issues.  I was working on a Drupal project and learned I had to flush the caches when creating templates.   Of course, that was after a few hours of banging my head against the desk.

Then, I was working on a static website and having trouble reloading the css changes.  The site was located on a client server, not one of my own.  I updated the stylesheets and tested on my local machine.  Everything looked fine.  And then, after uploading to the client server, the changes would not take place.  I would clear the browser cache and reload the page.  Still nothing.  So, I tried several different browsers and even a computer that had never loaded the website.  Still nothing.

I sat there scratching my head as my eyes started to pop out of their sockets.  Another caching issue.  You have to be kidding me.  I knew something was caching the stylesheets.  But what?  With a few Google searches and the proper keywords, I came across Jason Beaird’s website, Jasongraphix.  Jason is the author of Principles of Beautiful Web Design,  a great read.  He has a post on his site called CSS CacheBuster which describes a solution to the issue at hand.

The server is caching the stylesheet.  You need to make the server think the stylesheet is a dynamic page, therefore changing constantly.  This keeps the server from caching the stylesheet.  By adding a query string to the stylesheet, you have successfully tricked the server.

<link href=”stylesheet.css?cachebuster” type=”text/css” />

Problem solved.  Though, you should still try to solve the issue on the server.  In my case, I was unable to access the server and therefore this solution worked beautifully.  There is still a chance that the server will cache this page sooner or later.  The address stays the same.  You could change ?cachebuster to ?cachebuster1, ?cachebuster2… and so on.  But that gets to a pain.  I just added a random number to help eliminate the issue.  My final code looked like the following:

<link href=”stylesheet.css?cachebuster<?php echo rand(0, 100000);?>” type=”text/css” />

If you are unable to modify the server settings, use the method above.  Otherwise, I would suggest checking your server settings and turning off the stylesheet caching.