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: http://www.alistercameron.com/2008/09/12/wordpress-plugin-css-cache-buster/ 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!


Digg This
Reddit This
Stumble Now!
Share on Facebook
Bookmark this on Delicious
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Buzz this!


Printed from: http://www.divydovy.com/2009/07/seamless-css-updates/. © divydovy 2014

1 Comment   »

RSS feed for comments on this post , TrackBack URI

Leave a Reply