Seamless CSS Updates

If you run a website, sometimes you need to make changes to the (X)HTML/CSS to fix or improve your website’s styling.

Sometimes these changes can be pretty drastic in terms of layout changes. Browsers commonly cache CSS files. If a visitor’s browser has cached the old version of your CSS file, they may see a very ugly version of your site, applying the old stylesheet to the new markup.

There’s a cunning way to make sure that visitors always see your site using the latest CSS (I guess this would work with any other cached files e.g. JavaScript too). I ran across it here: whilst in the world of wordpress.

The principle is simple. just use a query string on your CSS call – e.g.

<link href="/css/your.css?date" type="text/css" rel="stylesheet" />

Every time you update the CSS file, simply change the query string to that date. This forces any browser to download the new file, which it will cache until the next time you update your query string, or until something else makes the cache expire.

Cool trick!

One comment

  1. Thanks for the mention of CSS Cache Buster!

    Just aheads-up that my next trick is much more exciting: a full CSS uptimization suite (built into my upcoming WordPress theme) that optimizes, merges, compresses and caches CSS files at runtime.

    Stand by at for that, before Christmas.

    It will use the CSScaffold “engine” which is totally brilliant.


Comments are closed.