CSS Caching Problem

Have you ever updated some text on a web page and realised that the CSS needs to be changed. The easy solution is to make the change in the CSS file and upload it to your server. Once that is done you may publish the text and everything is alright. But it's not.

Depending on how your server is setup your CSS file maybe cache on your clients machine. We also have the problem that ISP's continually cache data to speed up internet speeds, which could have also cache the CSS file. Whilst our text may have been updated on our website, our CSS files are not.

There are a number of ways to solve this problem and the goal is always to force our clients to download a new CSS file when it is created. One solution is to add a variable to the end of the CSS file. This will cause our clients to believe that it is a new file and try to download it:

<link rel="stylesheet" href="wp-content/themes/website/css/basic.css?version=27" type="text/css" />

Nice fix, the only problem is that you are required to update your header section each time you update your CSS file. A better solution is to write a script that collates all your CSS files and creates another file with a timestamp. Serve this file to your clients and each time you make a change to your CSS file, your timestamped main file will be updated. Your CSS may then look something like the following:

<link rel="stylesheet" href="wp-content/themes/website/css/css1253188740.css" type="text/css" />

The above code should be automatic so caching problems are a thing of the past.